From 10e4514de60a80051edd0691887dbede93217166 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 12 May 2018 01:42:29 +0200 Subject: [PATCH] theme switch tweaks --- src/components/molecules/ThemeSwitch.jsx | 72 +++++++++++------------- src/components/organisms/Footer.jsx | 2 +- src/layouts/index.jsx | 12 +--- src/layouts/index.scss | 6 +- src/templates/Project.jsx | 2 +- 5 files changed, 40 insertions(+), 54 deletions(-) diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx index 1168654..63c5712 100644 --- a/src/components/molecules/ThemeSwitch.jsx +++ b/src/components/molecules/ThemeSwitch.jsx @@ -1,4 +1,5 @@ -import React, { PureComponent } from 'react' +import React, { PureComponent, Fragment } from 'react' +import Helmet from 'react-helmet' import { FadeIn } from '../atoms/Animations' import { ReactComponent as Day } from '../../images/day.svg' import { ReactComponent as Night } from '../../images/night.svg' @@ -11,7 +12,7 @@ class ThemeSwitch extends PureComponent { this.state = { dark: false } } - componentWillMount() { + componentDidMount() { const now = new Date().getHours() if (now >= 19 || now <= 7) { @@ -19,52 +20,43 @@ class ThemeSwitch extends PureComponent { } } - componentDidMount() { - this.toggleTheme() - } - - componentDidUpdate() { - this.toggleTheme() - } - isDark = () => this.state.dark === true handleChange = () => { this.setState({ dark: !this.isDark() }) } - toggleTheme = () => { - document - .getElementsByClassName('app')[0] - .classList.toggle('dark', this.state.dark) - } - render() { return ( - - - + + + + + + + + ) } } diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index b0a374f..03a0934 100644 --- a/src/components/organisms/Footer.jsx +++ b/src/components/organisms/Footer.jsx @@ -44,7 +44,7 @@ class Footer extends PureComponent { FileSaver.saveAs(blob, this.generateFileName()) } - handleAddressbookClick = (e) => { + handleAddressbookClick = e => { e.preventDefault() this.constructVcard() } diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx index 9b0fdc2..c87409c 100644 --- a/src/layouts/index.jsx +++ b/src/layouts/index.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import withRouter from 'react-router-dom/withRouter' import TransitionGroup from 'react-transition-group/TransitionGroup' @@ -24,15 +24,9 @@ const Main = ({ children }) =>
{children}
const TemplateWrapper = ({ data, location, children }) => { const meta = data.dataYaml const isHomepage = location.pathname === '/' - const now = new Date().getHours() - let classes = 'app' - - if (now >= 19 || now <= 7) { - classes += ' dark' - } return ( -
+
@@ -48,7 +42,7 @@ const TemplateWrapper = ({ data, location, children }) => {
+ ) } diff --git a/src/layouts/index.scss b/src/layouts/index.scss index 4bfde24..a1175fd 100644 --- a/src/layouts/index.scss +++ b/src/layouts/index.scss @@ -107,14 +107,14 @@ svg { margin: 0; } -.app { +#___gatsby { display: flex; min-height: 100vh; flex-direction: column; background: $body-background-color; - transition: background .2s ease-out; + transition: .6s $easing; - &.dark { + .dark & { background: $body-background-color--dark; color: $text-color--dark; } diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx index b15f94b..3ff84e3 100644 --- a/src/templates/Project.jsx +++ b/src/templates/Project.jsx @@ -18,7 +18,7 @@ class Project extends Component { const description = this.props.data.projectsYaml.description this.state = { - descriptionWithLineBreaks: description.split('\n').join('\n\n') + descriptionWithLineBreaks: description.split('\n').join('\n\n'), } }