prettify header

public/manifest.json

@@ -7,8 +7,7 @@
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
-    { "src": "logo-100", "type": "image/png", "sizes": "100x100" },
-    { "src": "logo-1line-100", "type": "image/png", "sizes": "100x100" }
+    { "src": "logo-100", "type": "image/png", "sizes": "100x100" }
   ],
   "start_url": ".",
   "display": "standalone",

src/client/Layout/Logo.jsx

@@ -1,30 +1,18 @@
-import { Box } from 'client/UIKit/grid';
 import mq from 'client/UIKit/mq';
 import React from 'react';
 import styled from 'styled-components';
 
-const LOGO_NAME = 'logo-100.png';
-
-const LogoWrapper = styled(Box)`
-  margin: 0 5px 0 0;
-`;
+const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';
 
 const Image = styled.img`
-  height: 30px;
-  ${mq.tablet`
-  height: 35px;  
-  `}
+  margin: 10px 5px 0 0;
+  height: 20px;
+
   ${mq.desktop`
-    height: 40px;  
+    height: 25px;  
   `}
 `;
 
-const Logo = () => {
-  return (
-    <LogoWrapper margin="0 4px 0 0">
-      <Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
-    </LogoWrapper>
-  );
-};
-
-export default Logo;
+export default () => (
+  <Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
+);

src/client/Layout/index.jsx

@@ -30,35 +30,34 @@ const LogoText = styled.h3`
   margin-bottom: 3%;
   text-transform: uppercase;
   color: white;
-  font-size: 1rem;
+  font-size: 0.9rem;
+  font-family: 'Montserrat';
   ${mq.desktop`
     font-size: 1.2rem;
   `}
-  font-weight: 300;
-  letter-spacing: 2px;
+  font-weight: 500;
+  // letter-spacing: 2px;
+`;
+
+const HeaderWrapper = styled.header`
+  position: 'sticky';
+  top: 0;
+  zindex: 999999;
 `;
 
 const Header = () => (
-  <header style={styles.header}>
-    <HeaderContent style={styles.headerContent} alignItems="center">
-      <Flex alignItems="center">
+  <HeaderWrapper>
+    <HeaderContent alignItems="center">
+      <Flex flexDirection="column" alignItems="flex-start">
         <Logo />
         <LogoText>Лизинговый Калькулятор</LogoText>
       </Flex>
-      {/* {paths.map(
-      (path, i) =>
-      path.route && (
-        <Link to={path.route}>
-        <MenuButton key={i}>{path.name}</MenuButton>
-        </Link>
-        )
-      )} */}
     </HeaderContent>
-  </header>
+  </HeaderWrapper>
 );
 
 const Content = () => (
-  <Box style={styles.root}>
+  <Box>
     <Routes />
   </Box>
 );
@@ -70,15 +69,4 @@ const Layout = () => (
   </Flex>
 );
 
-const styles = {
-  root: {
-    height: '100%',
-  },
-  header: {
-    position: 'sticky',
-    top: 0,
-    zIndex: 999999,
-  },
-};
-
 export default Layout;

src/index.css

@@ -1,4 +1,5 @@
-@import "~normalize.css";
+@import '~normalize.css';
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,900&subset=cyrillic');
 
 html,
 body,
@@ -10,14 +11,14 @@ body,
 body {
   background-color: rgb(240, 240, 240);
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }