fix: revert theme workarounds

src/components/App.js

@@ -0,0 +1,116 @@
+import React, { Component } from "react"
+import { Router } from "@reach/router"
+import { compose } from "recompose"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
+
+import { SIZES } from "./styles/constants"
+
+// import theme from "./styles/theme"
+import Navbar from "./components/Navbar"
+import Day from "routes/Day"
+import Month from "routes/Month"
+import Year from "routes/Year"
+import User from "routes/User"
+import Search from "routes/Search"
+import Welcome from "routes/Welcome"
+import PrivateRoute from "./components/PrivateRoute"
+
+import { OnlineContext } from "./components/context/online"
+import { withAuthentication } from "./components/session"
+import { withFirebase } from "./components/firebase"
+import ThemeTogglerContext from "components/context/theme"
+
+const FullscreenBgColor = styled.div`
+  background-color: ${props => props.theme.colors.bodyBackground};
+`
+const RouteLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 10px;
+  max-width: ${SIZES.maxWidth};
+  min-height: calc(100vh - 60px);
+  background-color: transparent;
+`
+
+class App extends Component {
+  state = {
+    selectedTheme: this.props.theme.name,
+  }
+
+  componentDidMount() {
+    window.addEventListener("online", () => {
+      this.setState({ online: true })
+    })
+
+    window.addEventListener("offline", () => {
+      this.setState({ online: false })
+    })
+
+    this.setState({
+      authUser: JSON.parse(localStorage.getItem("authUser")),
+      online: navigator.onLine,
+    })
+  }
+
+  render() {
+    const { authUser, online } = this.state
+    const { authUser: propAuthUser } = this.props
+    const authed = !!propAuthUser || !!authUser
+
+    return (
+      <ThemeTogglerContext.Consumer>
+        {({ toggle }) => (
+          <OnlineContext.Provider value={online}>
+            <FullscreenBgColor>
+              <Navbar toggleTheme={toggle} />
+              <RouteLayout>
+                <Router style={{ height: "100%" }}>
+                  <PrivateRoute
+                    authed={authed}
+                    path="/app/:year"
+                    component={Year}
+                    exact
+                  />
+                  <PrivateRoute
+                    authed={authed}
+                    path="/app/:year/:month"
+                    component={Month}
+                    exact
+                  />
+                  <PrivateRoute
+                    authed={authed}
+                    path="/app/:year/:month/:day"
+                    component={Day}
+                    exact
+                  />
+                  <PrivateRoute
+                    authed={authed}
+                    path="/app/search"
+                    component={Search}
+                    exact
+                  />
+                  <PrivateRoute
+                    authed={authed}
+                    path="/app/user"
+                    component={User}
+                    exact
+                  />
+                  <Welcome authed={authed} path="/app" exact />
+                </Router>
+              </RouteLayout>
+            </FullscreenBgColor>
+          </OnlineContext.Provider>
+        )}
+      </ThemeTogglerContext.Consumer>
+    )
+  }
+}
+
+export default compose(
+  withAuthentication,
+  withFirebase,
+  withTheme
+)(App)

src/components/context/theme.js

@@ -17,21 +17,11 @@ class ThemeToggler extends React.Component {
         : "DARK",
   }
 
-  componentDidMount() {
-    // set the body style property on mount so routes don't flash between transitions
-    const { themeName } = this.state
-    this.toggle(themeName)
-  }
-
-  toggle = newThemeName => {
+  toggle = () => {
     const { themeName } = this.state
     const body = document.body
     let newTheme
-    if (newThemeName) {
-      newTheme = newThemeName
-    } else {
-      newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT"
-    }
+    newTheme = themeName === "LIGHT" ? "DARK" : "LIGHT"
     body.style.setProperty(
       "background-color",
       theme[newTheme].colors.bodyBackground