evo/EvoCalculator
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Logo

Browse Source
This commit is contained in:
Chika 2020-09-14 20:14:49 +03:00
parent 8abc0bfc03
commit 15e0dc55a3
8 changed files with 79 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -15,7 +15,7 @@
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
href="%PUBLIC_URL%/logo192.png" href="%PUBLIC_URL%/logo-100.png"
crossorigin="use-credentials" crossorigin="use-credentials"
/> />
<!-- <!--
@ -36,7 +36,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Evo Calculator</title> <title>Лизинговый калькулятор - Эволюция</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo-100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/logo-1line-100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

16
public/manifest.json
View File

@ -1,22 +1,14 @@
{ {
"short_name": "React App", "short_name": "Калькулятор",
"name": "Create React App Sample", "name": "Лизинговый калькулятор - Эволюция",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ { "src": "logo-100", "type": "image/png", "sizes": "100x100" },
"src": "logo192.png", { "src": "logo-1line-100", "type": "image/png", "sizes": "100x100" }
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
], ],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",

2
src/client/Containers/Calculation/Sections/index.jsx
View File

@ -84,7 +84,7 @@ const renderGroups = ({ groups }) => {
return ( return (
<React.Fragment key={ig}> <React.Fragment key={ig}>
{blocksTitle && ( {blocksTitle && (
<AntDivider style={{ margin: '16px 0', color: colors.blueTemp[200] }}> <AntDivider style={{ margin: '16px 0', color: colors.blueTemp[100] }}>
{blocksTitle} {blocksTitle}
</AntDivider> </AntDivider>
)} )}

19
src/client/Elements/Text.jsx
View File

@ -1,13 +1,22 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Flex } from 'client/UIKit/grid'; import { Flex } from 'client/UIKit/grid';
import colors from 'client/UIKit/colors'; 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; color: white;
font-size: 1.125rem; font-size: 1.12rem;
font-weight: bold; ${mq.tablet`
flex-direction: column; font-size: 1.3rem;
justify-content: center; `}
${mq.desktop`
font-size: 1.45rem;
`}
font-weight: 300;
letter-spacing: 2px;
`; `;
export const PrimaryText = styled.p` export const PrimaryText = styled.p`

30
src/client/Layout/Logo.jsx Normal file
View File

@ -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 (
<LogoWrapper margin="0 4px 0 0">
<Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
</LogoWrapper>
);
};
export default Logo;

41
src/client/Layout/index.jsx
View File

@ -2,12 +2,38 @@ import paths from 'client/common/paths';
import { LogoText } from 'client/Elements/Text'; import { LogoText } from 'client/Elements/Text';
import colors from 'client/UIKit/colors'; import colors from 'client/UIKit/colors';
import { Box, Flex } from 'client/UIKit/grid'; import { Box, Flex } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import React from 'react'; import React from 'react';
import { Route, Switch } from 'react-router-dom'; 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 = () => ( const Header = () => (
<header style={styles.header}> <header style={styles.header}>
<Flex style={styles.headerContent}> <HeaderContent style={styles.headerContent} alignItems="center">
<Flex alignItems="center">
<Logo />
<LogoText>Лизинговый Калькулятор</LogoText>
</Flex>
{/* {paths.map( {/* {paths.map(
(path, i) => (path, i) =>
path.route && ( path.route && (
@ -16,8 +42,7 @@ const Header = () => (
</Link> </Link>
) )
)} */} )} */}
<LogoText>EVO Calculator</LogoText> </HeaderContent>
</Flex>
</header> </header>
); );
@ -52,16 +77,6 @@ const styles = {
top: 0, top: 0,
zIndex: 999999, 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; export default Layout;