Add Logo
This commit is contained in:
Chika
parent
8abc0bfc03
commit
15e0dc55a3
@ -15,7 +15,7 @@
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
href="%PUBLIC_URL%/logo192.png"
|
||||
href="%PUBLIC_URL%/logo-100.png"
|
||||
crossorigin="use-credentials"
|
||||
/>
|
||||
<!--
|
||||
@ -36,7 +36,7 @@
|
||||
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`.
|
||||
-->
|
||||
<title>Evo Calculator</title>
|
||||
<title>Лизинговый калькулятор - Эволюция</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
BIN
public/logo-100.png
Normal file
BIN
public/logo-100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/logo-1line-100.png
Normal file
BIN
public/logo-1line-100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -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",
|
||||
|
||||
@ -84,7 +84,7 @@ const renderGroups = ({ groups }) => {
|
||||
return (
|
||||
<React.Fragment key={ig}>
|
||||
{blocksTitle && (
|
||||
<AntDivider style={{ margin: '16px 0', color: colors.blueTemp[200] }}>
|
||||
<AntDivider style={{ margin: '16px 0', color: colors.blueTemp[100] }}>
|
||||
{blocksTitle}
|
||||
</AntDivider>
|
||||
)}
|
||||
|
||||
@ -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`
|
||||
|
||||
30
src/client/Layout/Logo.jsx
Normal file
30
src/client/Layout/Logo.jsx
Normal 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;
|
||||
@ -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 = () => (
|
||||
<header style={styles.header}>
|
||||
<Flex style={styles.headerContent}>
|
||||
<HeaderContent style={styles.headerContent} alignItems="center">
|
||||
<Flex alignItems="center">
|
||||
<Logo />
|
||||
<LogoText>Лизинговый Калькулятор</LogoText>
|
||||
</Flex>
|
||||
{/* {paths.map(
|
||||
(path, i) =>
|
||||
path.route && (
|
||||
@ -16,8 +42,7 @@ const Header = () => (
|
||||
</Link>
|
||||
)
|
||||
)} */}
|
||||
<LogoText>EVO Calculator</LogoText>
|
||||
</Flex>
|
||||
</HeaderContent>
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user