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 ( + + Расчет осуществляется по Интересу: + Лизинговой сделке: + + ); +}; + +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 ( - - - - + + + + + + + ); }; 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;