Skip to content

Commit 51d3e38

Browse files
iamvijaydeviamvijaydev
committed
add simple demo styles
1 parent 719b441 commit 51d3e38

File tree

14 files changed

+276
-128
lines changed

14 files changed

+276
-128
lines changed

‎config/theme/colors.js

Lines changed: 82 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,87 @@ const colors = {
22
white: '#fff',
33
black: '#000',
44

5-
gray100: '#eee',
6-
gray200: '#aaa',
7-
gray300: '#555',
8-
gray400: '#111',
9-
10-
yellow: '#ffbf00',
11-
green: '#36ba4e',
12-
red: '#f05323',
5+
gray100: '#F5F5F5',
6+
gray200: '#EEEEEE',
7+
gray300: '#E0E0E0',
8+
gray400: '#BDBDBD',
9+
gray500: '#9E9E9E',
10+
gray600: '#757575',
11+
gray700: '#616161',
12+
gray800: '#424242',
13+
gray900: '#212121',
14+
15+
red400: '#Ef5350',
16+
red500: '#F44336',
17+
red600: '#E53935',
18+
19+
pink400: '#EC407A',
20+
pink500: '#E91E63',
21+
pink600: '#D81B60',
22+
23+
purple400: '#AB47BC',
24+
purple500: '#9C27B0',
25+
purple600: '#8E24AA',
26+
27+
deepPurple400: '#7E57C2',
28+
deepPurple500: '#673AB7',
29+
deepPurple600: '#5E35B1',
30+
31+
indigo400: '#5C6BC0',
32+
indigo500: '#3F51B5',
33+
indigo600: '#3949AB',
34+
35+
blue400: '#42A5F5',
36+
blue500: '#2196F3',
37+
blue600: '#1E88E5',
38+
39+
lightBlue400: '#29B6F6',
40+
lightBlue500: '#03A9F4',
41+
lightBlue600: '#039BE5',
42+
43+
cyan400: '#26C6DA',
44+
cyan500: '#00BCD4',
45+
cyan600: '#00ACC1',
46+
47+
teal400: '#26A69A',
48+
teal500: '#009688',
49+
teal600: '#00897B',
50+
51+
green400: '#66BB6A',
52+
green500: '#4CAF50',
53+
green600: '#43A047',
54+
55+
lightGreen400: '#9CCC65',
56+
lightGreen500: '#8BC34A',
57+
lightGreen600: '#7CB342',
58+
59+
lime400: '#D4E157',
60+
lime500: '#CDDC39',
61+
lime600: '#C0CA33',
62+
63+
yellow400: '#FFEE58',
64+
yellow500: '#FFEB3B',
65+
yellow600: '#FDD835',
66+
67+
amber400: '#FFCA28',
68+
amber500: '#FFC107',
69+
amber600: '#FFB300',
70+
71+
orange400: '#FFA726',
72+
orange500: '#FF9800',
73+
orange600: '#FB8C00',
74+
75+
deepOrange400: '#FF7043',
76+
deepOrange500: '#FF5722',
77+
deepOrange600: '#F4511E',
78+
79+
brown400: '#8D6E63',
80+
brown500: '#795548',
81+
brown600: '#6D4C41',
82+
83+
blueGrey400: '#78909C',
84+
blueGrey500: '#607D8B',
85+
blueGrey600: '#546E7A',
1386
};
1487

15-
export { colors as default };
88+
export default colors;

‎config/theme/darktheme.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,20 @@ const darktheme = {
1919
textColor: colors.white,
2020

2121
/* for UI elements */
22-
primaryColor: colors.green,
23-
secondaryColor: colors.yellow,
24-
alternativeColor: colors.red,
22+
primaryColor: colors.green500,
23+
secondaryColor: colors.yellow500,
24+
alternativeColor: colors.red500,
2525

2626
/* status colors */
27-
errorColor: colors.red,
28-
successColor: colors.green,
29-
notifColor: colors.green,
27+
errorColor: colors.red500,
28+
successColor: colors.green500,
29+
notifColor: colors.green500,
3030
neutralColor: colors.gray200,
3131

3232
/* link colors */
33-
linkColor: colors.red,
34-
linkActiveColor: colors.yellow,
35-
linkVisitedColor: colors.green,
33+
linkColor: colors.blue500,
34+
linkActiveColor: colors.blue600,
35+
linkVisitedColor: colors.indigo500,
3636

3737
/* theme specific fonts */
3838
primaryFont: fonts.sans,

‎config/theme/whitetheme.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,23 @@ const whitetheme = {
1616

1717
/* dark theme */
1818
backgroudColor: colors.white,
19-
textColor: colors.gray400,
19+
textColor: colors.gray900,
2020

2121
/* for UI elements */
22-
primaryColor: colors.green,
23-
secondaryColor: colors.yellow,
24-
alternativeColor: colors.red,
22+
primaryColor: colors.green500,
23+
secondaryColor: colors.yellow500,
24+
alternativeColor: colors.red500,
2525

2626
/* status colors */
27-
errorColor: colors.red,
28-
successColor: colors.green,
29-
notifColor: colors.green,
27+
errorColor: colors.red500,
28+
successColor: colors.green500,
29+
notifColor: colors.green500,
3030
neutralColor: colors.gray200,
3131

3232
/* link colors */
33-
linkColor: colors.red,
34-
linkActiveColor: colors.yellow,
35-
linkVisitedColor: colors.green,
33+
linkColor: colors.blue500,
34+
linkActiveColor: colors.blue600,
35+
linkVisitedColor: colors.indigo500,
3636

3737
/* theme specific fonts */
3838
primaryFont: fonts.sans,

‎src/App/AppGlobalStyles/index.js

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,85 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
1+
import React, { useEffect } from 'react';
2+
import { shape } from 'prop-types';
33

44
import dynamicStyles from '../../services/dynamicStyles';
55

6-
export default class GlobalStyles extends React.Component {
7-
static getStyles = theme => `
8-
html {
9-
font-size: 62.5%;
10-
}
11-
12-
body {
13-
font-family: ${theme.primaryFont};
14-
font-size: 1.6rem;
15-
margin: 0;
16-
padding: 0;
17-
background: ${theme.backgroudColor};
18-
color: ${theme.textColor};
19-
}
6+
const GlobalStyles = ({ theme }) => {
7+
useEffect(() => {
8+
const styles = `
9+
html {
10+
font-size: 62.5%;
11+
}
12+
13+
body {
14+
font-family: ${theme.primaryFont};
15+
font-size: 1.6rem;
16+
margin: 0;
17+
padding: 0;
18+
background: ${theme.backgroudColor};
19+
color: ${theme.textColor};
20+
}
2021
21-
a {
22-
color: ${theme.linkColor};
23-
text-decoration: underline;
24-
}
22+
html,
23+
body,
24+
#root {
25+
width: 100%;
26+
height: 100%;
27+
}
2528
26-
a:visited {
27-
color: ${theme.linkVisitedColor};
28-
}
29+
a {
30+
color: ${theme.linkColor};
31+
text-decoration: underline;
32+
}
2933
30-
a:hover,
31-
a:active {
32-
color: ${theme.linkActiveColor};
33-
}
34+
a:visited {
35+
color: ${theme.linkVisitedColor};
36+
}
3437
35-
input[type=number]::-webkit-inner-spin-button,
36-
input[type=number]::-webkit-outer-spin-button {
37-
-webkit-appearance: none;
38-
-moz-appearance: none;
39-
appearance: none;
40-
margin: 0;
41-
}
38+
a:hover,
39+
a:active {
40+
color: ${theme.linkActiveColor};
41+
}
4242
43-
::-webkit-input-placeholder {
44-
color: ${theme.colors.gray200};
45-
}
46-
::-moz-placeholder {
47-
color: ${theme.colors.gray200};
48-
}
49-
:-ms-input-placeholder {
50-
color: ${theme.colors.gray200};
51-
}
52-
:-moz-placeholder {
53-
color: ${theme.colors.gray200};
54-
}
43+
input[type=number]::-webkit-inner-spin-button,
44+
input[type=number]::-webkit-outer-spin-button {
45+
-webkit-appearance: none;
46+
-moz-appearance: none;
47+
appearance: none;
48+
margin: 0;
49+
}
5550
56-
#modal-root {
57-
position: relative;
58-
z-index: ${theme.zindex.modalx};
59-
}
60-
`;
51+
::-webkit-input-placeholder {
52+
color: ${theme.colors.gray400};
53+
}
54+
::-moz-placeholder {
55+
color: ${theme.colors.gray400};
56+
}
57+
:-ms-input-placeholder {
58+
color: ${theme.colors.gray400};
59+
}
60+
:-moz-placeholder {
61+
color: ${theme.colors.gray400};
62+
}
6163
62-
constructor(props) {
63-
super(props);
64+
#modal-root {
65+
position: relative;
66+
z-index: ${theme.zindex.modalx};
67+
}
6468
65-
this.styleId = 'GLOBAL_STYLES';
66-
}
69+
.app-container > div {
70+
margin: 0 0 0 30rem;
71+
padding: 2rem;
72+
}
73+
`;
6774

68-
componentWillMount() {
69-
dynamicStyles(this.styleId, GlobalStyles.getStyles(this.props.theme));
70-
}
75+
dynamicStyles('GLOBAL_STYLES', styles);
76+
}, [theme]);
7177

72-
componentDidUpdate() {
73-
dynamicStyles(this.styleId, GlobalStyles.getStyles(this.props.theme));
74-
}
75-
76-
render() {
77-
return null;
78-
}
79-
}
78+
return null;
79+
};
8080

8181
GlobalStyles.propTypes = {
82-
theme: PropTypes.object.isRequired,
82+
theme: shape({}).isRequired
8383
};
84+
85+
export default GlobalStyles;

‎src/App/DemoToBeDeleted/components/DemoHeader/index.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React from 'react';
22
import intl from 'react-intl-universal';
33

4+
import Styled from './styled';
5+
46
const DemoHeader = () => (
5-
<>
6-
<h1>React Base Code</h1>
7+
<Styled>
8+
<Styled.Heading>React Base Code</Styled.Heading>
79
<div>
8-
<a href="https://github.com/iamvijaydev/react-base-code">Github</a>
10+
<Styled.Link href="https://github.com/iamvijaydev/react-base-code">
11+
Github
12+
</Styled.Link>
913
</div>
10-
</>
14+
</Styled>
1115
);
1216

1317
export default DemoHeader;

‎src/App/DemoToBeDeleted/components/DemoHeader/styled.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from 'styled-components';
2+
3+
const Styled = styled.header`
4+
background: ${props => props.theme.colors.red500};
5+
padding: 2rem 1rem;
6+
`;
7+
8+
const Heading = styled.h1`
9+
color: ${props => props.theme.colors.white}
10+
`;
11+
12+
const Link = styled.a`
13+
color: ${props => props.theme.colors.white}
14+
15+
&:visited {
16+
color: ${props => props.theme.colors.white}
17+
}
18+
19+
&:active,
20+
&:hover {
21+
color: ${props => props.theme.colors.white}
22+
}
23+
`;
24+
25+
Styled.Heading = Heading;
26+
Styled.Link = Link;
27+
28+
export default Styled;

‎src/App/DemoToBeDeleted/components/DemoLinks/index.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,23 @@ import React from 'react';
22
import intl from 'react-intl-universal';
33
import { Link } from 'react-router-dom';
44

5+
import { ListItem, ListSubItem } from '../../styled';
6+
57
const DemoLinks = () => (
68
<>
7-
<li>{intl.get('app/routing').d('Routing')}</li>
8-
<li>
9+
<ListItem>{intl.get('app/routing').d('Routing')}</ListItem>
10+
<ListSubItem>
911
<Link to="/">{intl.get('menu/home').d('Home')}</Link>
10-
</li>
11-
<li>
12+
</ListSubItem>
13+
<ListSubItem>
1214
<Link to="/about">{intl.get('menu/about').d('About')}</Link>
13-
</li>
14-
<li>
15+
</ListSubItem>
16+
<ListSubItem>
1517
<Link to="/topics">{intl.get('menu/topics').d('Topics')}</Link>
16-
</li>
17-
<li>
18+
</ListSubItem>
19+
<ListSubItem>
1820
<Link to="/link-does-not-exist">404</Link>
19-
</li>
21+
</ListSubItem>
2022
</>
2123
);
2224

0 commit comments

Comments
 (0)