From 5639a0eb5bba5377984e6c2056b8ecc2f865053a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?=
 =?UTF-8?q?=D0=A7=D0=B8=D0=BA=D0=B0=D0=BB=D0=BA=D0=B8=D0=BD?=
 <vchikalkin@evoleasing.ru>
Date: Thu, 3 Sep 2020 15:43:41 +0300
Subject: [PATCH] UI

---
 src/client/Containers/Calculation/Top.jsx   | 14 ++++++++++++++
 src/client/Containers/Calculation/index.jsx | 14 +++++++++-----
 src/client/Elements/Background.jsx          |  2 +-
 src/client/Elements/Text.jsx                | 10 ++++++++--
 src/client/Layout/index.jsx                 | 11 +++++++----
 5 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 src/client/Containers/Calculation/Top.jsx

diff --git a/src/client/Containers/Calculation/Top.jsx b/src/client/Containers/Calculation/Top.jsx
new file mode 100644
index 0000000..464b40b
--- /dev/null
+++ b/src/client/Containers/Calculation/Top.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Background from 'client/Elements/Background';
+import { PrimaryText } from 'client/Elements/Text';
+
+const Top = () => {
+  return (
+    <Background>
+      <PrimaryText>Расчет осуществляется по Интересу:</PrimaryText>
+      <PrimaryText>Лизинговой сделке:</PrimaryText>
+    </Background>
+  );
+};
+
+export default Top;
diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index c6dddf2..1f3f7d1 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/src/client/Containers/Calculation/index.jsx
@@ -1,14 +1,18 @@
-import { Flex } from 'client/UIKit/grid';
+import { Flex, Box } from 'client/UIKit/grid';
 import React from 'react';
 import Results from './Results';
 import SectionsList from './Sections';
+import Top from './Top';
 
 const Calculation = () => {
   return (
-    <Flex flexWrap="wrap">
-      <SectionsList />
-      <Results />
-    </Flex>
+    <Box mx={['0', '1%', '1%', '10%']}>
+      <Top />
+      <Flex flexWrap="wrap">
+        <SectionsList />
+        <Results />
+      </Flex>
+    </Box>
   );
 };
 
diff --git a/src/client/Elements/Background.jsx b/src/client/Elements/Background.jsx
index 5839450..dc1db62 100644
--- a/src/client/Elements/Background.jsx
+++ b/src/client/Elements/Background.jsx
@@ -3,7 +3,7 @@ import { Box, Flex } from 'client/UIKit/grid';
 import styled from 'styled-components';
 import mq from 'client/UIKit/mq';
 
-const Background = styled(Flex)`
+const Background = styled(Box)`
   background: ${colors.white[0]};
   padding: 10px 18px;
   margin: 7px 0 10px;
diff --git a/src/client/Elements/Text.jsx b/src/client/Elements/Text.jsx
index f752476..4edc4c4 100644
--- a/src/client/Elements/Text.jsx
+++ b/src/client/Elements/Text.jsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { Flex } from "client/UIKit/grid";
+import styled from 'styled-components';
+import { Flex } from 'client/UIKit/grid';
 
 export const LogoText = styled(Flex)`
   color: white;
@@ -8,3 +8,9 @@ export const LogoText = styled(Flex)`
   flex-direction: column;
   justify-content: center;
 `;
+
+export const PrimaryText = styled.p`
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 5px 0;
+`;
diff --git a/src/client/Layout/index.jsx b/src/client/Layout/index.jsx
index f6d41d2..ac8e56d 100644
--- a/src/client/Layout/index.jsx
+++ b/src/client/Layout/index.jsx
@@ -43,17 +43,20 @@ const Layout = () => (
 
 const styles = {
   root: {
-    height: '100%'
+    height: '100%',
   },
   flex: { width: '100%' },
   header: {
+    position: 'sticky',
+    top: 0,
     // backgroundColor: colors.violet.shades[700],
     background: 'linear-gradient(90deg, #1C01A9 0%, #3A0185 50%, #580161 100%)',
-    height: '50px',
+    height: '65px',
     padding: '10px 12px',
-    paddingLeft: '20px'
+    paddingLeft: '20px',
     // borderRadius: "0 0 10px 10px",
-  }
+    zIndex: 999999,
+  },
 };
 
 export default Layout;