Skip to content

Commit 308d42a

Browse files
ltclmbdevjoelhooks
authored andcommitted
themes (#9)
* yarn add yarn add @callstack/react-theme-provider * wip * yarn remove emotion-theming * works af! * wip * wip * wip * refactoring * cleanup * refactoring * ThemeToggler * refactor for demo * fix * fix * clean up * extend theme object with toggleTheme handler * fix header bg * clean up * remove console.log * Button component * remove console.log * color vars, tidy up * save & load theme pref from local storage * localStorage vs SSR * color mode toggle styles
1 parent 2bb5fd7 commit 308d42a

21 files changed

+1175
-728
lines changed

package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,18 @@
88
"node": "10"
99
},
1010
"dependencies": {
11+
"@callstack/react-theme-provider": "^2.0.1",
1112
"@emotion/core": "^10.0.5",
1213
"@emotion/styled": "^10.0.5",
1314
"@mdx-js/mdx": "^0.17.5",
1415
"@mdx-js/tag": "^0.17.5",
16+
"add": "^2.0.6",
1517
"algoliasearch": "^3.32.0",
1618
"axios": "^0.18.0",
1719
"core-js": "^2.6.1",
1820
"date-fns": "^1.30.1",
1921
"emotion": "^10.0.5",
2022
"emotion-server": "^10.0.5",
21-
"emotion-theming": "^10.0.6",
2223
"formik": "^1.4.2",
2324
"gatsby": "^2.1",
2425
"gatsby-awesome-pagination": "^0.3.3",
@@ -66,14 +67,13 @@
6667
"serve": "^10.1.1",
6768
"typography": "^0.16.18",
6869
"typography-theme-wordpress-2016": "^0.16.18",
70+
"yarn": "^1.15.2",
6971
"yup": "^0.26.10"
7072
},
7173
"devDependencies": {
7274
"@babel/core": "^7.3.4",
7375
"babel-eslint": "^10.0.1",
7476
"babel-preset-gatsby": "^0.1.8~",
75-
"shortid": "^2.2.14",
76-
"slug": "^0.9.3",
7777
"eslint": "^5.14.1",
7878
"eslint-config-standard": "^12.0.0",
7979
"eslint-plugin-html": "^5.0.3",
@@ -84,7 +84,9 @@
8484
"eslint-plugin-react": "^7.12.4",
8585
"eslint-plugin-react-hooks": "^1.5.0",
8686
"eslint-plugin-standard": "^4.0.0",
87-
"prettier": "^1.16.4"
87+
"prettier": "^1.16.4",
88+
"shortid": "^2.2.14",
89+
"slug": "^0.9.3"
8890
},
8991
"keywords": [
9092
"gatsby"

src/components/Button.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { React } from 'react'
2+
import { css } from '@emotion/core'
3+
import { Link } from 'gatsby'
4+
import { useTheme } from './Theming'
5+
import { rgba, darken } from 'polished'
6+
7+
const Button = ({ to, children, secondary, ...restProps }) => {
8+
const theme = useTheme()
9+
const styles = css({
10+
display: 'inline-flex',
11+
border: 'none',
12+
borderRadius: '4px',
13+
background: secondary
14+
? rgba(theme.colors.primary, 0.1)
15+
: theme.colors.primary,
16+
color: secondary ? theme.colors.primary : theme.colors.white,
17+
padding: '10px 15px',
18+
cursor: 'pointer',
19+
transition: 'all 150ms ease',
20+
':hover': {
21+
color: theme.colors.white,
22+
background: darken(0.1, theme.colors.primary),
23+
},
24+
})
25+
return to ? (
26+
<Link to={to} css={styles} {...restProps}>
27+
{children}
28+
</Link>
29+
) : (
30+
<button css={styles} {...restProps}>
31+
{children}
32+
</button>
33+
)
34+
}
35+
36+
export default Button

src/components/Doodle.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

src/components/Footer.js

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,48 @@ import { bpMinSM } from '../lib/breakpoints'
44
import SubscribeForm from './Forms/SubscribeForm'
55
import { Twitter, GitHub } from './Social'
66
import Container from './Container'
7+
import { useTheme } from './Theming'
78

8-
const Footer = ({ author }) => (
9-
<footer>
10-
<Container noVerticalPadding>
11-
<SubscribeForm
12-
css={css({
13-
paddingTop: '40px',
14-
[bpMinSM]: {
15-
paddingTop: '60px',
16-
},
17-
})}
18-
/>
19-
<div
20-
css={css({
21-
display: 'flex',
22-
alignItems: 'center',
23-
justifyContent: 'space-between',
24-
padding: '50px 0 30px 0',
25-
[bpMinSM]: {
26-
padding: '60px 0 40px 0',
27-
},
28-
})}
29-
>
9+
const Footer = ({ author }) => {
10+
const theme = useTheme()
11+
return (
12+
<footer>
13+
<Container noVerticalPadding>
14+
<SubscribeForm
15+
css={css({
16+
paddingTop: '40px',
17+
[bpMinSM]: {
18+
paddingTop: '60px',
19+
},
20+
})}
21+
/>
3022
<div
3123
css={css({
32-
fontSize: '90%',
33-
opacity: 0.7,
24+
display: 'flex',
25+
alignItems: 'center',
26+
justifyContent: 'space-between',
27+
padding: '50px 0 30px 0',
28+
[bpMinSM]: {
29+
padding: '60px 0 40px 0',
30+
},
3431
})}
3532
>
36-
{author && `${author} \u00A9 ${new Date().getFullYear()}`}
37-
</div>
38-
<div>
39-
<Twitter />
40-
<GitHub />
33+
<div
34+
css={css({
35+
fontSize: '90%',
36+
opacity: 0.7,
37+
})}
38+
>
39+
{author && `${author} \u00A9 ${new Date().getFullYear()}`}
40+
</div>
41+
<div>
42+
<Twitter color={theme.colors.text} hover={theme.colors.primary} />
43+
<GitHub color={theme.colors.text} hover={theme.colors.primary} />
44+
</div>
4145
</div>
42-
</div>
43-
</Container>
44-
</footer>
45-
)
46+
</Container>
47+
</footer>
48+
)
49+
}
4650

4751
export default Footer

src/components/Forms/SubscribeForm.js

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import axios from 'axios'
55
import { css } from '@emotion/core'
66
import theme from '../../../config/theme'
77
import { bpMinSM, bpMinMD } from '../../lib/breakpoints'
8-
import joelsHandImg from '../../images/joels-hand-rotated.svg'
8+
import Hand from '../Hand'
9+
import Button from '../Button'
910

1011
const FORM_ID = process.env.CONVERTKIT_SIGNUP_FORM
1112

@@ -85,15 +86,11 @@ class SubscribeForm extends React.Component {
8586
<h2
8687
css={css({
8788
margin: '0 0 20px 0',
88-
fontSize: '22px',
89-
fontFamily: theme.fonts.regular,
90-
[bpMinSM]: {
91-
fontSize: '24px',
92-
},
89+
fontFamily: theme.fonts.semibold,
9390
})}
9491
>
95-
Want more? Get emails from me about coding, business, learning,
96-
and teaching.
92+
Get emails from me about coding, business, learning, and
93+
teaching.
9794
</h2>
9895
<p
9996
css={css({
@@ -106,11 +103,8 @@ class SubscribeForm extends React.Component {
106103
people enjoy it, and you probably will too!
107104
</p>
108105
</div>
109-
<img
110-
src={joelsHandImg}
111-
alt=""
106+
<div
112107
css={css({
113-
width: '70px',
114108
flexShrink: 0,
115109
margin: 0,
116110
[bpMinSM]: {
@@ -122,7 +116,9 @@ class SubscribeForm extends React.Component {
122116
margin: '0 0 0 120px',
123117
},
124118
})}
125-
/>
119+
>
120+
<Hand />
121+
</div>
126122
</div>
127123
)}
128124

@@ -185,7 +181,7 @@ class SubscribeForm extends React.Component {
185181
css={inputFieldStyles}
186182
/>
187183
</label>
188-
<button
184+
<Button
189185
data-element="submit"
190186
type="submit"
191187
css={css({
@@ -197,7 +193,7 @@ class SubscribeForm extends React.Component {
197193
>
198194
{!loading && 'Subscribe'}
199195
{loading && 'Subscribing...'}
200-
</button>
196+
</Button>
201197
</Form>
202198
)}
203199
/>
@@ -234,7 +230,7 @@ const inputFieldStyles = css({
234230
fontSize: '16px',
235231
height: '50px',
236232
borderRadius: '3px',
237-
borderColor: theme.colors.gray,
233+
borderColor: theme.colors.text,
238234
boxShadow: 'none',
239235
fontWeight: 400,
240236
'::placeholder': {

0 commit comments

Comments
 (0)