diff --git a/public/index.html b/public/index.html index 9ced9cc..dea02c2 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ /> - Evo Calculator + Лизинговый калькулятор - Эволюция diff --git a/public/logo-100.png b/public/logo-100.png new file mode 100644 index 0000000..4cdb1e1 Binary files /dev/null and b/public/logo-100.png differ diff --git a/public/logo-1line-100.png b/public/logo-1line-100.png new file mode 100644 index 0000000..b0a4a06 Binary files /dev/null and b/public/logo-1line-100.png differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..0cdc649 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,22 +1,14 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Калькулятор", + "name": "Лизинговый калькулятор - Эволюция", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } + { "src": "logo-100", "type": "image/png", "sizes": "100x100" }, + { "src": "logo-1line-100", "type": "image/png", "sizes": "100x100" } ], "start_url": ".", "display": "standalone", diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx index b774d3e..b82edaf 100644 --- a/src/client/Containers/Calculation/Sections/index.jsx +++ b/src/client/Containers/Calculation/Sections/index.jsx @@ -84,7 +84,7 @@ const renderGroups = ({ groups }) => { return ( {blocksTitle && ( - + {blocksTitle} )} diff --git a/src/client/Elements/Text.jsx b/src/client/Elements/Text.jsx index 30b8a2b..ac3e82e 100644 --- a/src/client/Elements/Text.jsx +++ b/src/client/Elements/Text.jsx @@ -1,13 +1,22 @@ import styled from 'styled-components'; import { Flex } from 'client/UIKit/grid'; import colors from 'client/UIKit/colors'; +import mq from 'client/UIKit/mq'; -export const LogoText = styled(Flex)` +export const LogoText = styled.h3` + margin: 0; + margin-bottom: 3%; + text-transform: uppercase; color: white; - font-size: 1.125rem; - font-weight: bold; - flex-direction: column; - justify-content: center; + font-size: 1.12rem; + ${mq.tablet` + font-size: 1.3rem; + `} + ${mq.desktop` + font-size: 1.45rem; + `} + font-weight: 300; + letter-spacing: 2px; `; export const PrimaryText = styled.p` diff --git a/src/client/Layout/Logo.jsx b/src/client/Layout/Logo.jsx new file mode 100644 index 0000000..80aacbc --- /dev/null +++ b/src/client/Layout/Logo.jsx @@ -0,0 +1,30 @@ +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 Image = styled.img` + height: 30px; + ${mq.tablet` + height: 38px; + `} + ${mq.desktop` + height: 45px; + `} +`; + +const Logo = () => { + return ( + + logo + + ); +}; + +export default Logo; diff --git a/src/client/Layout/index.jsx b/src/client/Layout/index.jsx index dd95847..77ef18f 100644 --- a/src/client/Layout/index.jsx +++ b/src/client/Layout/index.jsx @@ -2,12 +2,38 @@ import paths from 'client/common/paths'; import { LogoText } from 'client/Elements/Text'; import colors from 'client/UIKit/colors'; import { Box, Flex } from 'client/UIKit/grid'; +import mq from 'client/UIKit/mq'; import React from 'react'; import { Route, Switch } from 'react-router-dom'; +import styled from 'styled-components'; +import Logo from './Logo'; + +const HeaderContent = styled(Flex)` + background: ${`linear-gradient(90deg, + ${colors.blueTemp[0]} 0%, + ${colors.blueTemp[300]} 50%, + ${colors.blueTemp[600]} 100%)`}; + + height: 45px; + ${mq.tablet` + height: 55px; + `} + ${mq.desktop` + height: 65px; + `} + padding: 10px 12px; + ${mq.desktop` + paddingleft: 20px; + `} +`; const Header = () => (
- + + + + Лизинговый Калькулятор + {/* {paths.map( (path, i) => path.route && ( @@ -16,8 +42,7 @@ const Header = () => ( ) )} */} - EVO Calculator - +
); @@ -52,16 +77,6 @@ const styles = { top: 0, zIndex: 999999, }, - headerContent: { - background: `linear-gradient(90deg, - ${colors.blueTemp[0]} 0%, - ${colors.blueTemp[300]} 50%, - ${colors.blueTemp[600]} 100%)`, - height: '65px', - padding: '10px 12px', - paddingLeft: '20px', - // borderRadius: "0 0 10px 10px", - }, }; export default Layout;