displayname and logout button

src/client/Layout/Auth.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Cookies from 'js-cookie';
+import styled from 'styled-components';
+import mq from 'client/UIKit/mq';
+import { Flex } from 'client/UIKit/grid';
+
+const UserText = styled.span`
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  color: white;
+  font-size: 0.5rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  ${mq.desktop`
+  font-size: 0.75rem;
+  `}
+`;
+
+const User = () => {
+  const displayname = Cookies.get('displayname');
+  return <UserText>{displayname}</UserText>;
+};
+
+const Logout = styled.a`
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  color: white;
+  font-size: 0.45rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  ${mq.desktop`
+    font-size: 0.55rem;
+  `}
+`;
+
+export default () => {
+  return (
+    <Flex
+      flexDirection={['column']}
+      alignItems={['flex-start', 'flex-start', 'flex-end']}
+      mt={['2px', '2px', 0]}
+    >
+      <User />
+      <Logout href="/logout">Выход</Logout>
+    </Flex>
+  );
+};

src/client/Layout/Header.jsx

@@ -4,30 +4,23 @@ import mq from 'client/UIKit/mq';
 import React from 'react';
 import styled from 'styled-components';
 import Logo from './Logo';
+import Auth from './Auth';
 
 const HeaderContent = styled(Flex)`
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
   background: ${`linear-gradient(90deg,
     ${colors.primaryColor} 0%,
     ${colors.secondaryColor} 50%,
     ${colors.tertiaryColor} 100%)`};
-  padding: 10px 12px;
-  ${mq.desktop`
-  padding-left: 20px;
+    padding: 10px 12px;
+    ${mq.desktop`
+    padding-left: 20px;
+    flex-direction: row;
   `}
 `;
 
-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;
@@ -37,10 +30,8 @@ const Header = styled.header`
 export default () => (
   <Header>
     <HeaderContent alignItems="center">
-      <Flex flexDirection="column" alignItems="flex-start">
-        <Logo />
-        <LogoText>Лизинговый Калькулятор</LogoText>
-      </Flex>
+      <Logo />
+      <Auth />
     </HeaderContent>
   </Header>
 );

src/client/Layout/Logo.jsx

@@ -1,6 +1,7 @@
 import mq from 'client/UIKit/mq';
 import React from 'react';
 import styled from 'styled-components';
+import { Flex } from 'client/UIKit/grid';
 
 const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';
 
@@ -12,6 +13,23 @@ const Image = styled.img`
   `}
 `;
 
+const LogoText = styled.h3`
+  margin: 0;
+  margin-top: -3px;
+  text-transform: uppercase;
+  color: white;
+  font-size: 0.95rem;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  ${mq.desktop`
+  font-size: 1.2rem;
+  margin-top: -2px;
+`}
+`;
+
 export default () => (
-  <Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
+  <Flex flexDirection="column" alignItems="flex-start">
+    <Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
+    <LogoText>Лизинговый Калькулятор</LogoText>
+  </Flex>
 );