From 5c4b8334347db37216045eead64fa882f9907a32 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Mon, 7 Feb 2022 15:49:14 +0200
Subject: [PATCH] style: fix header indentation

---
 packages/widget/src/components/Header.tsx           | 12 +++++++-----
 packages/widget/src/components/NavigationHeader.tsx |  2 +-
 packages/widget/src/components/WalletHeader.tsx     |  3 ++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/widget/src/components/Header.tsx b/packages/widget/src/components/Header.tsx
index 6f7c6e9d3..089129d00 100644
--- 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
index 45c23321a..0e9100ec8 100644
--- 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
index e6e680948..b29e79936 100644
--- 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>