style: fix header indentation

lifinance · Feb 7, 2022 · 5c4b833 · 5c4b833
1 parent 0cb42c1
commit 5c4b833
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/widget/src/components/Header.tsx b/packages/widget/src/components/Header.tsx
@@ -5,14 +5,16 @@ const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.common.black,
 }));
 
-const HeaderToolbar = styled(Toolbar)({
+const HeaderToolbar = styled(Toolbar, {
+  shouldForwardProp: (prop) => prop !== 'height',
+})<{ height?: number }>(({ height }) => ({
   '@media all': {
-    minHeight: 48,
+    minHeight: height ?? 52,
   },
-});
+}));
 
-export const Header: React.FC = ({ children }) => (
+export const Header: React.FC<{ height?: number }> = ({ children, height }) => (
   <HeaderAppBar position="relative" elevation={0}>
-    <HeaderToolbar>{children}</HeaderToolbar>
+    <HeaderToolbar height={height}>{children}</HeaderToolbar>
   </HeaderAppBar>
 );
diff --git a/packages/widget/src/components/NavigationHeader.tsx b/packages/widget/src/components/NavigationHeader.tsx
@@ -51,7 +51,7 @@ export const NavigationHeader: React.FC = () => {
           <ArrowBackIcon />
         </IconButton>
       </Collapse>
-      <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
+      <Typography variant="h5" noWrap sx={{ flexGrow: 1, fontWeight: 'bold' }}>
         {handleHeaderTitle()}
       </Typography>
       {location.pathname === '/' && (

diff --git a/packages/widget/src/components/WalletHeader.tsx b/packages/widget/src/components/WalletHeader.tsx
@@ -5,13 +5,14 @@ import { Header } from './Header';
 export const WalletHeader: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <Header>
+    <Header height={40}>
       <Typography
         variant="body2"
         noWrap
         align="right"
         sx={{ flexGrow: 1 }}
         color="grey.500"
+        mt={2}
       >
         {t(`swap.header.walletConnected`, { walletAddress: '0000000000' })}
       </Typography>