UI

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;

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>
   );
 };
 

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;

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;
+`;

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;