header ui fixes

src/client/Layout/Header.jsx

@@ -0,0 +1,46 @@
+import colors from 'client/UIKit/colors';
+import { Flex } from 'client/UIKit/grid';
+import mq from 'client/UIKit/mq';
+import React from 'react';
+import styled from 'styled-components';
+import Logo from './Logo';
+
+const HeaderContent = styled(Flex)`
+  background: ${`linear-gradient(90deg,
+    ${colors.primaryColor} 0%,
+    ${colors.secondaryColor} 50%,
+    ${colors.tertiaryColor} 100%)`};
+  padding: 10px 12px;
+  ${mq.desktop`
+  padding-left: 20px;
+  `}
+`;
+
+const LogoText = styled.h3`
+  margin: 0;
+  text-transform: uppercase;
+  color: white;
+  font-size: 0.95rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  ${mq.desktop`
+  font-size: 1.2rem;
+`}
+`;
+
+const Header = styled.header`
+  position: sticky;
+  top: 0;
+  z-index: 999999;
+`;
+
+export default () => (
+  <Header>
+    <HeaderContent alignItems="center">
+      <Flex flexDirection="column" alignItems="flex-start">
+        <Logo />
+        <LogoText>Лизинговый Калькулятор</LogoText>
+      </Flex>
+    </HeaderContent>
+  </Header>
+);

src/client/Layout/Logo.jsx

@@ -5,11 +5,10 @@ import styled from 'styled-components';
 const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';
 
 const Image = styled.img`
-  margin: 10px 5px 0 0;
-  height: 20px;
+  height: 1.2rem;
 
   ${mq.desktop`
-    height: 25px;  
+    height: 1.5rem 
   `}
 `;
 

src/client/Layout/index.jsx

@@ -1,71 +1,12 @@
-import colors from 'client/UIKit/colors';
-import { Box, Flex } from 'client/UIKit/grid';
-import mq from 'client/UIKit/mq';
+import { Flex } from 'client/UIKit/grid';
 import React from 'react';
-import styled from 'styled-components';
-import Logo from './Logo';
+import Header from './Header';
 import Routes from './routes';
 
-const HeaderContent = styled(Flex)`
-  background: ${`linear-gradient(90deg,
-  ${colors.primaryColor} 0%,
-  ${colors.secondaryColor} 50%,
-  ${colors.tertiaryColor} 100%)`};
-
-  height: 45px;
-  ${mq.tablet`
-    height: 55px;
-  `}
-  ${mq.desktop`
-    height: 65px;
-  `}
-  padding: 10px 12px;
-  ${mq.desktop`
-  paddingleft: 20px;
-  `}
-`;
-
-const LogoText = styled.h3`
-  margin: 0;
-  margin-bottom: 3%;
-  text-transform: uppercase;
-  color: white;
-  font-size: 0.9rem;
-  font-family: 'Montserrat';
-  ${mq.desktop`
-    font-size: 1.2rem;
-  `}
-  font-weight: 500;
-  // letter-spacing: 2px;
-`;
-
-const HeaderWrapper = styled.header`
-  position: 'sticky';
-  top: 0;
-  zindex: 999999;
-`;
-
-const Header = () => (
-  <HeaderWrapper>
-    <HeaderContent alignItems="center">
-      <Flex flexDirection="column" alignItems="flex-start">
-        <Logo />
-        <LogoText>Лизинговый Калькулятор</LogoText>
-      </Flex>
-    </HeaderContent>
-  </HeaderWrapper>
-);
-
-const Content = () => (
-  <Box>
-    <Routes />
-  </Box>
-);
-
 const Layout = () => (
   <Flex flexDirection="column">
     <Header />
-    <Content />
+    <Routes />
   </Flex>
 );