Header NodeUI tweaks

Signed-off-by: Mantas Domaševičius <mantas@mysterium.network>

Author: mdomasevicius

src/Pages/Authenticated/Components/Layout/Header.tsx

@@ -18,6 +18,7 @@ import { themeCommon } from '../../../../theme/themeCommon'
 import { useMediaQuery } from 'react-responsive'
 import { media } from '../../../../commons/media'
 import { MobileHeader } from '../../Navigation/Mobile/MobileHeader'
+import { LayoutRow } from './Layout'
 
 const Container = styled.div`
   display: flex;
@@ -55,7 +56,8 @@ const Group = styled.div`
 const MobileHeaderMargin = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 120px;
+  margin-top: 86px;
+  width: 100%;
 `
 
 interface Props {
@@ -67,9 +69,11 @@ export const Header = ({ logo, title }: Props) => {
   const isMobile = useMediaQuery(media.isMobileQuery)
   if (isMobile) {
     return (
-      <MobileHeaderMargin>
-        <MobileHeader />
-      </MobileHeaderMargin>
+      <LayoutRow>
+        <MobileHeaderMargin>
+          <MobileHeader />
+        </MobileHeaderMargin>
+      </LayoutRow>
     )
   }
   return (

src/Pages/Authenticated/Navigation/Mobile/MobileHeader.tsx

@@ -15,7 +15,7 @@ const Grid = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   height: 144px;
-  width: 90%;
+  width: 100%;
   min-width: 300px;
   border-radius: 20px;
   background-color: ${({ theme }) => theme.bgSettlementMobile};
@@ -46,19 +46,32 @@ const Cell = styled.div`
   align-items: center;
 `
 
+const Padded = styled.div`
+  padding: 0 8px 0 8px;
+  width: 100%;
+`
+
 export const MobileHeader = () => {
   return (
     <Grid>
       <Cell>
-        <NodeStatus />
+        <Padded>
+          <NodeStatus />
+        </Padded>
+      </Cell>
+      <Cell>
+        <Padded>
+          <NATStatus />
+        </Padded>
       </Cell>
       <Cell>
-        <NATStatus />
+        <Padded>
+          <Quality />
+        </Padded>
       </Cell>
       <Cell>
-        <Quality />
+        <SettlementStatus />
       </Cell>
-      <Cell>{<SettlementStatus />}</Cell>
     </Grid>
   )
 }