valitydev/checkout
14
0
Fork 0
mirror of https://github.com/valitydev/checkout.git synced 2024-11-06 10:35:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add persian green theme (#349)

Browse Source
This commit is contained in:
Ildar Galeev 2021-10-01 13:07:56 +03:00 committed by GitHub
parent 3fe338d414
commit ff29eaaa21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 164 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/main-success-icon.tsx Normal file
View File

@ -0,0 +1,17 @@
import * as React from 'react';
import SmileIcon from './smile-icon.svg';
import styled from 'checkout/styled-components';
const MainSuccess = styled.svg`
width: 100px;
height: 100px;
display: block;
margin: auto;
`;
export const MainSuccessIcon = () => (
<MainSuccess viewBox="0 0 86 86" id="success-icon">
<SmileIcon />
</MainSuccess>
);

12
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.svg
View File

@ -1,12 +0,0 @@
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="nonzero" fill="none">
<circle fill="#D1658E" cx="43" cy="43" r="43" />
<path
stroke="#FFF"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"
d="M27 42.862L39.089 55 61 33"
/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 368 B

28
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/neutral-success-icon.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react';
import styled from 'checkout/styled-components';
const NeutralSuccess = styled.svg`
width: 100px;
height: 100px;
display: block;
margin: auto;
circle {
fill: ${({ theme }) => theme.color.success[1]};
}
path {
stroke: #fff;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
}
`;
export const NeutralSuccessIcon = () => (
<NeutralSuccess viewBox="0 0 86 86" id="success-icon">
<g fillRule="nonzero" fill="none">
<circle cx="43" cy="43" r="43" />
<path d="M27 42.862L39.089 55 61 33" />
</g>
</NeutralSuccess>
);

19
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/smile-icon.svg Normal file
View File

@ -0,0 +1,19 @@
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M46 23C46 10.536 36.086.388 23.714.01 23.477.005 23.239 0 23 0 10.297 0 0 10.297 0 23" id="a" />
<mask id="b" fill="#fff"><use transform="rotate(180 23 11.5)" xlink:href="#a" /></mask>
</defs>
<g fill="none" fill-rule="nonzero">
<circle fill="#38CD8F" cx="43" cy="43" r="43" />
<path
d="M65.093 35c0-3.314-2.707-6-6.046-6C55.707 29 53 31.686 53 35m-19.907 0c0-3.314-2.707-6-6.046-6C23.707 29 21 31.686 21 35"
stroke="#000"
stroke-linecap="round"
stroke-width="2"
/>
<g transform="translate(20 48)">
<use fill="#000" transform="rotate(180 23 11.5)" xlink:href="#a" />
<ellipse fill="#E75542" mask="url(#b)" cx="23" cy="23.5" rx="14" ry="8.5" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 925 B

22
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.svg
View File

@ -1,22 +0,0 @@
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
d="M46 23C46 10.536 36.086.388 23.714.01 23.477.005 23.239 0 23 0 10.297 0 0 10.297 0 23"
id="semicircle"
/>
<mask id="semicircle2" fill="#fff"><use xlink:href="#semicircle" /></mask>
<mask id="semicircle3" fill="#fff"><use transform="rotate(180 23 11.5)" xlink:href="#semicircle" /></mask>
</defs>
<g fill="none" fill-rule="evenodd">
<circle fill="#38CD8F" fill-rule="nonzero" cx="43" cy="43" r="43" />
<g fill-rule="nonzero" stroke="#000" stroke-linecap="round" stroke-width="2">
<path
d="M65.093 35c0-3.314-2.707-6-6.046-6C55.707 29 53 31.686 53 35M33.093 35c0-3.314-2.707-6-6.046-6C23.707 29 21 31.686 21 35"
/>
</g>
<g transform="translate(20 48)">
<use fill="#000" fill-rule="nonzero" transform="rotate(180 23 11.5)" xlink:href="#semicircle" />
<ellipse fill="#E75542" fill-rule="nonzero" mask="url(#semicircle3)" cx="23" cy="23.5" rx="14" ry="8.5" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

25
src/app/components/app/modal-container/modal/form-container/result-form/result-icons/success-icon/success-icon.tsx
View File

@ -1,18 +1,15 @@
import * as React from 'react';
import Success from './success-icon.svg';
import NeutralSuccess from './neutral-success-icon.svg';
import styled, { withTheme } from 'checkout/styled-components';
import { withTheme } from 'checkout/styled-components';
import { ThemeName, WithThemeProps } from 'checkout/themes';
import { NeutralSuccessIcon } from './neutral-success-icon';
import { MainSuccessIcon } from './main-success-icon';
export const SuccessIcon = styled(
withTheme(({ theme, ...props }: WithThemeProps) => {
const Icon = theme.name === ThemeName.main ? Success : NeutralSuccess;
return <Icon {...props} id="success-icon" />;
})
)`
width: 100px;
height: 100px;
display: block;
margin: auto;
`;
export const SuccessIcon = withTheme(({ theme }: WithThemeProps) => {
switch (theme.name) {
case ThemeName.main:
return <MainSuccessIcon />;
default:
return <NeutralSuccessIcon />;
}
});

17
src/app/themes/common-palettes.ts Normal file
View File

@ -0,0 +1,17 @@
export const neutral = {
0: '#fff',
0.1: '#d0d0d0',
0.2: '#bababa',
0.3: '#afafaf',
0.8: '#333',
0.9: '#292929',
1: '#000'
};
export const error = {
1: '#e75542'
};
export const warning = {
1: '#ffe05c'
};

23
src/app/themes/coral.ts
View File

@ -1,19 +1,12 @@
import { css } from 'checkout/styled-components';
import { ThemeName } from './theme-name';
import { Theme } from './theme';
import { error, neutral, warning } from './common-palettes';
const theme: Theme = {
name: ThemeName.coral,
color: {
neutral: {
0: '#fff',
0.1: '#d0d0d0',
0.2: '#bababa',
0.3: '#afafaf',
0.8: '#333',
0.9: '#292929',
1: '#000'
},
neutral,
primary: {
0.1: '#ff8454',
1: '#d1658e',
@ -26,14 +19,12 @@ const theme: Theme = {
1: '#8330ec',
1.1: '#9b4f69'
},
error: {
1: '#e75542'
},
warning: {
1: '#ffe05c'
},
error,
warning,
info: {},
success: {},
success: {
1: '#d1658e'
},
focus: {
1: '#d1658e'
}

3
src/app/themes/index.ts
View File

@ -2,8 +2,9 @@ import { Theme } from './theme';
import { ThemeName } from './theme-name';
import main from './main';
import coral from './coral';
import persianGreen from './persian-green';
const themes = [main, coral];
const themes = [main, coral, persianGreen];
export const DEFAULT_THEME = main;

19
src/app/themes/main.ts
View File

@ -1,19 +1,12 @@
import { css } from 'checkout/styled-components';
import { ThemeName } from './theme-name';
import { Theme } from './theme';
import { error, neutral, warning } from './common-palettes';
const theme: Theme = {
name: ThemeName.main,
color: {
neutral: {
0: '#fff',
0.1: '#d0d0d0',
0.2: '#bababa',
0.3: '#afafaf',
0.8: '#333',
0.9: '#292929',
1: '#000'
},
neutral,
primary: {
0.1: '#c3f0dd',
1: '#38cd8f',
@ -26,12 +19,8 @@ const theme: Theme = {
1: '#8330ec',
1.1: '#5248c9'
},
error: {
1: '#e75542'
},
warning: {
1: '#ffe05c'
},
error,
warning,
info: {},
success: {},
focus: {

54
src/app/themes/persian-green.ts Normal file
View File

@ -0,0 +1,54 @@
import { css } from 'checkout/styled-components';
import { ThemeName } from './theme-name';
import { Theme } from './theme';
import { error, neutral, warning } from './common-palettes';
const palette = {
Pelorous: '#36BABA',
PersianGreen: '#00A69B',
Teal: '#008E89',
Wistful: '#9CA8CF',
Smalt: '#003A8E',
BayOfMany: '#213980'
};
const theme: Theme = {
name: ThemeName.persianGreen,
color: {
neutral,
primary: {
0.1: palette.PersianGreen,
1: palette.PersianGreen,
1.1: palette.Pelorous,
1.2: palette.Teal
},
secondary: {
0.7: palette.Wistful,
0.9: palette.PersianGreen,
1: palette.Smalt,
1.1: palette.Teal
},
error,
warning,
info: {},
success: {
1: palette.PersianGreen
},
focus: {
1: palette.PersianGreen
}
},
gradients: {
form: css`linear-gradient(45deg, ${palette.BayOfMany} -20%, ${palette.PersianGreen} 90%)`,
bg: css`linear-gradient(to top right, ${palette.Smalt}, ${palette.Pelorous})`,
loader: [
[palette.Pelorous, '0%'],
[palette.BayOfMany, '100%']
]
},
font: {
family: "'Roboto', sans-serif"
}
};
export default theme;

3
src/app/themes/theme-name.ts
View File

@ -1,4 +1,5 @@
export enum ThemeName {
main = 'main',
coral = 'coral'
coral = 'coral',
persianGreen = 'persianGreen'
}

4
src/app/themes/theme.ts
View File

@ -32,7 +32,9 @@ export interface Theme {
1: string;
};
info: {};
success: {};
success: {
1?: string;
};
focus: {
1: string;
};