m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

dark mode tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-09 19:12:58 +01:00
parent 9f7b96656b
commit 7d208934a2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby-config.js
View File

@ -72,10 +72,11 @@ module.exports = {
short_name: 'mk',
start_url: '/',
background_color: '#e7eef4',
theme_color: '#88bec8',
theme_color: '#e7eef4',
icon: 'src/images/favicon.png',
display: 'minimal-ui',
cache_busting_mode: 'name'
display: 'standalone',
cache_busting_mode: 'name',
theme_color_in_head: false // dynamically set in ThemeSwitch
}
},
'gatsby-plugin-react-helmet',

44
src/components/molecules/ThemeSwitch.jsx
View File

@ -1,8 +1,8 @@
import React, { PureComponent } from 'react'
import React, { useContext } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import posed from 'react-pose'
import { Consumer } from '../../store/createContext'
import Context from '../../store/createContext'
import { fadeIn } from '../atoms/Transitions'
import { ReactComponent as Day } from '../../images/day.svg'
@ -39,25 +39,23 @@ ThemeToggleInput.propTypes = {
toggleDark: PropTypes.func.isRequired
}
export default class ThemeSwitch extends PureComponent {
render() {
return (
<Consumer>
{({ dark, toggleDark }) => (
<>
<Helmet>
<body className={dark ? 'dark' : null} />
</Helmet>
<Animation className={styles.themeSwitch}>
<label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span>
<ThemeToggleInput dark={dark} toggleDark={toggleDark} />
<ThemeToggle dark={dark} />
</label>
</Animation>
</>
)}
</Consumer>
)
}
export default function ThemeSwitch() {
const { darkMode, toggleDark } = useContext(Context)
const themeColor = darkMode ? '#1d2224' : '#e7eef4'
return (
<>
<Helmet>
<body className={darkMode ? 'dark' : null} />
<meta content={themeColor} name="theme-color" />
</Helmet>
<Animation className={styles.themeSwitch}>
<label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span>
<ThemeToggleInput dark={darkMode} toggleDark={toggleDark} />
<ThemeToggle dark={darkMode} />
</label>
</Animation>
</>
)
}

20
src/components/molecules/ThemeSwitch.test.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { render, fireEvent, cleanup } from '@testing-library/react'
import { Provider } from '../../store/createContext'
import Context from '../../store/createContext'
import ThemeSwitch from './ThemeSwitch'
describe('ThemeSwitch', () => {
@ -9,9 +9,11 @@ describe('ThemeSwitch', () => {
it('renders correctly', () => {
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => toggleDark }}>
<Context.Provider
value={{ darkMode: false, toggleDark: () => toggleDark }}
>
<ThemeSwitch />
</Provider>
</Context.Provider>
)
const switchContainer = container.querySelector('aside')
@ -21,9 +23,11 @@ describe('ThemeSwitch', () => {
it('switches when it is dark', () => {
const { container } = render(
<Provider value={{ dark: true, toggleDark: () => toggleDark }}>
<Context.Provider
value={{ darkMode: true, toggleDark: () => toggleDark }}
>
<ThemeSwitch />
</Provider>
</Context.Provider>
)
const toggle = container.querySelector('input')
@ -32,9 +36,11 @@ describe('ThemeSwitch', () => {
it('checkbox can be changed', () => {
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => toggleDark }}>
<Context.Provider
value={{ darkMode: false, toggleDark: () => toggleDark }}
>
<ThemeSwitch />
</Provider>
</Context.Provider>
)
const toggle = container.querySelector('input')

10
src/components/organisms/Header.test.jsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { render } from '@testing-library/react'
import { StaticQuery, useStaticQuery } from 'gatsby'
import Header from './Header'
import { Provider } from '../../store/createContext'
import Context from '../../store/createContext'
import data from '../../../jest/__fixtures__/meta.json'
describe('Header', () => {
@ -13,18 +13,18 @@ describe('Header', () => {
it('renders correctly', () => {
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => null }}>
<Context.Provider value={{ dark: false, toggleDark: () => null }}>
<Header />
</Provider>
</Context.Provider>
)
expect(container.firstChild).toBeInTheDocument()
})
it('Availability can be hidden', () => {
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => null }}>
<Context.Provider value={{ dark: false, toggleDark: () => null }}>
<Header minimal={true} />
</Provider>
</Context.Provider>
)
expect(container.querySelector('.availability')).not.toBeInTheDocument()
})

26
src/store/AppProvider.jsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Provider } from './createContext'
import Context from './createContext'
import { getLocationTimes } from '../utils/getLocationTimes'
import { getCountry } from '../utils/getCountry'
@ -10,7 +10,7 @@ export default class AppProvider extends PureComponent {
}
state = {
dark: false,
darkMode: false,
toggleDark: () => this.toggleDark(),
geolocation: null
}
@ -31,8 +31,8 @@ export default class AppProvider extends PureComponent {
this.mounted = false
}
setDark(dark) {
this.mounted && this.setState({ dark })
setDark(darkMode) {
this.mounted && this.setState({ darkMode })
}
darkLocalStorageMode(darkLocalStorage) {
@ -43,16 +43,16 @@ export default class AppProvider extends PureComponent {
// All the checks to see if we should go dark or light
//
async checkTimes() {
const { geolocation, dark } = this.state
const { sunset, sunrise } = await getLocationTimes(geolocation)
const { geolocation, darkMode } = this.state
const { sunset, sunrise } = getLocationTimes(geolocation)
const now = new Date().getHours()
const weWantItDarkTimes = now >= sunset || now <= sunrise
!dark && weWantItDarkTimes ? this.setDark(true) : this.setDark(false)
!darkMode && weWantItDarkTimes ? this.setDark(true) : this.setDark(false)
}
async checkDark() {
const darkLocalStorage = await this.store.getItem('dark')
const darkLocalStorage = await this.store.getItem('darkMode')
darkLocalStorage
? this.darkLocalStorageMode(darkLocalStorage)
@ -60,11 +60,15 @@ export default class AppProvider extends PureComponent {
}
toggleDark = () => {
this.setState({ dark: !this.state.dark })
this.store && this.store.setItem('dark', !this.state.dark)
this.setState({ darkMode: !this.state.darkMode })
this.store && this.store.setItem('darkMode', !this.state.darkMode)
}
render() {
return <Provider value={this.state}>{this.props.children}</Provider>
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}

6
src/store/AppProvider.test.jsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { LocalStorageMock } from '@react-mock/localstorage'
import AppProvider from './AppProvider.jsx'
import { Consumer } from './createContext.jsx'
import Context from './createContext.jsx'
describe('AppProvider', () => {
it('renders correctly', () => {
@ -15,13 +15,13 @@ describe('AppProvider', () => {
const { getByTestId } = render(
<LocalStorageMock items={{ dark: 'true' }}>
<AppProvider>
<Consumer>
<Context.Consumer>
{state => (
<button data-testid="toggle" onClick={() => state.toggleDark()}>
Toggle
</button>
)}
</Consumer>
</Context.Consumer>
</AppProvider>
</LocalStorageMock>
)

4
src/store/createContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
const Context = createContext()
export { Provider, Consumer }
export default Context