chore: additional theming implementation

src/App.css

@@ -1,25 +0,0 @@
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 10vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -3,7 +3,6 @@ import { BrowserRouter as Router, Route } from "react-router-dom";
 import styled from "@emotion/styled";
 import { ThemeProvider } from "emotion-theming";
 
-import "./App.css";
 import theme from "./styles/theme";
 import Navbar from "./components/Navbar";
 import Day from "./components/screens/Day";
@@ -18,6 +17,8 @@ import { withAuthentication } from "./components/session";
 const RouteLayout = styled.div`
   margin: 0 auto;
   max-width: 720px;
+  min-height: calc(100vh - 60px);
+  background-color: ${props => props.theme.colors.bodyBackground};
 `;
 
 class App extends Component {
@@ -26,6 +27,20 @@ class App extends Component {
     selectedTheme: "LIGHT"
   };
 
+  onChangeTheme = () => {
+    const { selectedTheme } = this.state;
+    const root = document.documentElement;
+    console.log(root);
+    const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT";
+    root.style.setProperty(
+      "background-color",
+      theme[newTheme].colors.bodyBackground
+    );
+    this.setState(prevState => ({
+      selectedTheme: newTheme
+    }));
+  };
+
   render() {
     const { authUser, selectedTheme } = this.state;
 
@@ -33,7 +48,7 @@ class App extends Component {
     return (
       <ThemeProvider theme={currentTheme}>
         <Router>
-          <Navbar />
+          <Navbar toggleTheme={this.onChangeTheme} />
           <RouteLayout>
             <Route path="/:year(\d+)" component={Year} />
             <Route path="/:year(\d+)/:month(\d+)" component={Month} />

src/components/Icon/Icon.js

@@ -1,6 +1,15 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Book, Calendar, Circle, User } from "react-feather";
+import {
+  Book,
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  Moon,
+  User
+} from "react-feather";
+import { withTheme } from "emotion-theming";
 
 const IconBase = styled.div`
   display: flex;
@@ -10,18 +19,23 @@ const IconBase = styled.div`
   border-radius: 12px;
   padding: 5px;
   transition: 0.1s all ease-in-out;
+  color: ${props => props.theme.colors.secondary};
   &:hover {
-    background-color: yellow;
+    background-color: ${props => props.theme.colors.hover};
+    cursor: pointer;
   }
 `;
 
-const Icon = ({ name }) => (
-  <IconBase>
+const Icon = ({ name, ...rest }) => (
+  <IconBase {...rest}>
     {name === "Book" && <Book />}
     {name === "Calendar" && <Calendar />}
+    {name === "ChevronLeft" && <ChevronLeft />}
+    {name === "ChevronRight" && <ChevronRight />}
     {name === "Circle" && <Circle />}
+    {name === "Moon" && <Moon />}
     {name === "User" && <User />}
   </IconBase>
 );
 
-export default Icon;
+export default withTheme(Icon);

src/components/Navbar/Navbar.js

@@ -11,12 +11,15 @@ import SignOut from "../SignOut";
 import { withAuthentication } from "../session";
 
 const Header = styled.div`
-  background-color: ${props => props.theme.colors.background};
+  background-color: ${props => props.theme.colors.headerBackground};
   height: 60px;
   display: grid;
   grid-template-areas: "... nav ...";
   grid-template-columns: 1fr minmax(240px, 720px) 1fr;
   align-items: center;
+  border-width: 1px;
+  border-color: ${props => props.theme.colors.quarternary};
+  border-style: solid;
 `;
 const Nav = styled.div`
   grid-area: nav;
@@ -35,17 +38,24 @@ const NavIcons = styled.div`
   }
 `;
 
-const Navbar = ({ authUser, theme }) => (
+const Navbar = ({ authUser, theme, toggleTheme }) => (
   <Header>
     <Nav>
       <Logo>Logo</Logo>
       <NavIcons>
+        <Icon onClick={() => toggleTheme()} name="Moon" />
         {authUser ? (
           <React.Fragment>
-            <Link to={yearUrl()}>Year</Link>
-            <Link to={todayUrl()}>Today</Link>
-            <Link to={"/user"}>Account</Link>
-            <Icon name="Book" />
+            <Link to={yearUrl()}>
+              <Icon name="Calendar" />
+            </Link>
+            <Link to={todayUrl()}>
+              <Icon name="Book" />
+            </Link>
+            <Link to={"/user"}>
+              <Icon name="User" />
+            </Link>
+
             <SignOut />
           </React.Fragment>
         ) : (

src/components/Seek/Seek.js

@@ -1,31 +1,38 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { withTheme } from "emotion-theming";
 
 import { SIZES } from "../../styles/constants";
+import Icon from "../Icon";
 
 const SeekHeader = styled.header`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: ${props => props.theme.colors.quarternary};
 `;
 const SeekH1 = styled.h1`
   display: block;
   font-size: ${SIZES.normal};
+  color: ${props => props.theme.colors.secondary};
 `;
-const SeekArrows = styled.div``;
-const SeekHr = styled.hr`
-  margin: 0;
+const SeekArrows = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
 `;
 
 const Seek = ({ title = "", prev = "", next = "" }) => (
-  <React.Fragment>
-    <SeekHeader>
-      <SeekH1>{title}</SeekH1>
-      <SeekArrows>asdf</SeekArrows>
-    </SeekHeader>
-    <SeekHr />
-  </React.Fragment>
+  <SeekHeader>
+    <SeekH1>{title}</SeekH1>
+    <SeekArrows>
+      <Icon name="ChevronLeft" />
+      <Icon name="ChevronRight" />
+    </SeekArrows>
+  </SeekHeader>
 );
 
-export default Seek;
+export default withTheme(Seek);

src/index.css

@@ -1,3 +1,6 @@
+* {
+  transition: 0.2s all ease-in-out;
+}
 body {
   margin: 0;
   padding: 0;
@@ -7,8 +10,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}

src/styles/theme.js

@@ -5,7 +5,9 @@ const theme = {
       secondary: "#999",
       tertiary: "#C4C4C4",
       quarternary: "#EAEAEA",
-      background: "#FAFBFC"
+      headerBackground: "#FAFBFC",
+      bodyBackground: "#FFF",
+      hover: "hsla(233, 5%, 31%, 0.12)"
     }
   },
   DARK: {
@@ -14,7 +16,9 @@ const theme = {
       secondary: "#9Ba3B0",
       tertiary: "#6F7682",
       quarternary: "#3E4B62",
-      background: "#2E3136"
+      headerBackground: "#272f3d",
+      bodyBackground: "#262B34",
+      hover: "hsla(233, 100%, 96%, 0.12)"
     }
   }
 };