feat: dark/light theming with emotion

2019-03-27 21:45:55 -06:00
parent 043acd30cf
commit 49bb678bfa
9 changed files with 140 additions and 25 deletions
--- a/package.json
+++ b/package.json
@@ -7,11 +7,14 @@
    "@emotion/styled": "^10.0.10",
    "babel-plugin-emotion": "^10.0.9",
    "date-fns": "^1.30.1",
+    "emotion-theming": "^10.0.10",
    "firebase": "^5.9.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
+    "react-feather": "^1.1.6",
    "react-router-dom": "^5.0.0",
-    "react-scripts": "2.1.8"
+    "react-scripts": "2.1.8",
+    "recompose": "^0.30.0"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import styled from "@emotion/styled";
+import { ThemeProvider } from "emotion-theming";

-import logo from "./logo.svg";
 import "./App.css";
+import theme from "./styles/theme";
 import Navbar from "./components/Navbar";
 import Day from "./components/screens/Day";
 import Month from "./components/screens/Month";
@@ -21,23 +22,28 @@ const RouteLayout = styled.div`

 class App extends Component {
  state = {
-    authUser: JSON.parse(localStorage.getItem("authUser"))
+    authUser: JSON.parse(localStorage.getItem("authUser")),
+    selectedTheme: "LIGHT"
  };

  render() {
-    const { authUser } = this.state;
+    const { authUser, selectedTheme } = this.state;
+
+    const currentTheme = theme[selectedTheme];
    return (
-      <Router>
-        <Navbar />
-        <RouteLayout>
-          <Route path="/:year(\d+)" component={Year} />
-          <Route path="/:year(\d+)/:month(\d+)" component={Month} />
-          <Route path="/:year(\d+)/:month(\d+)/:day(\d+)" component={Day} />
-          <Route path="/user" component={User} />
-          <Route path="/login" component={Login} />
-          <Route path="/register" component={Register} />
-        </RouteLayout>
-      </Router>
+      <ThemeProvider theme={currentTheme}>
+        <Router>
+          <Navbar />
+          <RouteLayout>
+            <Route path="/:year(\d+)" component={Year} />
+            <Route path="/:year(\d+)/:month(\d+)" component={Month} />
+            <Route path="/:year(\d+)/:month(\d+)/:day(\d+)" component={Day} />
+            <Route path="/user" component={User} />
+            <Route path="/login" component={Login} />
+            <Route path="/register" component={Register} />
+          </RouteLayout>
+        </Router>
+      </ThemeProvider>
    );
  }
 }
--- a/src/components/Icon/Icon.js
+++ b/src/components/Icon/Icon.js
@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Book, Calendar, Circle, User } from "react-feather";
+
+const IconBase = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: none;
+  border-radius: 12px;
+  padding: 5px;
+  transition: 0.1s all ease-in-out;
+  &:hover {
+    background-color: yellow;
+  }
+`;
+
+const Icon = ({ name }) => (
+  <IconBase>
+    {name === "Book" && <Book />}
+    {name === "Calendar" && <Calendar />}
+    {name === "Circle" && <Circle />}
+    {name === "User" && <User />}
+  </IconBase>
+);
+
+export default Icon;
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -0,0 +1,2 @@
+import Icon from "./Icon";
+export default Icon;
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -1,14 +1,17 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import styled from "@emotion/styled";
+import { compose } from "recompose";
+import { withTheme } from "emotion-theming";

-import { todayUrl, yearUrl, urls } from "../../utils/date";
+import { todayUrl, yearUrl } from "../../utils/date";

+import Icon from "../Icon";
 import SignOut from "../SignOut";
 import { withAuthentication } from "../session";

 const Header = styled.div`
-  background-color: #fafbfc;
+  background-color: ${props => props.theme.colors.background};
  height: 60px;
  display: grid;
  grid-template-areas: "... nav ...";
@@ -32,7 +35,7 @@ const NavIcons = styled.div`
  }
 `;

-const Navbar = ({ authUser }) => (
+const Navbar = ({ authUser, theme }) => (
  <Header>
    <Nav>
      <Logo>Logo</Logo>
@@ -42,6 +45,7 @@ const Navbar = ({ authUser }) => (
            <Link to={yearUrl()}>Year</Link>
            <Link to={todayUrl()}>Today</Link>
            <Link to={"/user"}>Account</Link>
+            <Icon name="Book" />
            <SignOut />
          </React.Fragment>
        ) : (
@@ -56,4 +60,7 @@ const Navbar = ({ authUser }) => (
  </Header>
 );

-export default withAuthentication(Navbar);
+export default compose(
+  withAuthentication,
+  withTheme
+)(Navbar);
--- a/src/components/Seek/Seek.js
+++ b/src/components/Seek/Seek.js
@@ -8,13 +8,15 @@ const SeekHeader = styled.header`
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
-  margin-top: ${SIZES.normal};
 `;
 const SeekH1 = styled.h1`
  display: block;
  font-size: ${SIZES.normal};
 `;
 const SeekArrows = styled.div``;
+const SeekHr = styled.hr`
+  margin: 0;
+`;

 const Seek = ({ title = "", prev = "", next = "" }) => (
  <React.Fragment>
@@ -22,7 +24,7 @@ const Seek = ({ title = "", prev = "", next = "" }) => (
      <SeekH1>{title}</SeekH1>
      <SeekArrows>asdf</SeekArrows>
    </SeekHeader>
-    <hr />
+    <SeekHr />
  </React.Fragment>
 );

--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
@@ -7,7 +8,6 @@ import Firebase, { FirebaseContext } from "./components/firebase";

 ReactDOM.render(
  <FirebaseContext.Provider value={new Firebase()}>
-    {" "}
    <App />
  </FirebaseContext.Provider>,
  document.getElementById("root")
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -0,0 +1,22 @@
+const theme = {
+  LIGHT: {
+    colors: {
+      primary: "#2E3136",
+      secondary: "#999",
+      tertiary: "#C4C4C4",
+      quarternary: "#EAEAEA",
+      background: "#FAFBFC"
+    }
+  },
+  DARK: {
+    colors: {
+      primary: "#F3F6F8",
+      secondary: "#9Ba3B0",
+      tertiary: "#6F7682",
+      quarternary: "#3E4B62",
+      background: "#2E3136"
+    }
+  }
+};
+
+export default theme;
--- a/yarn.lock
+++ b/yarn.lock
@@ -823,7 +823,7 @@
  dependencies:
    regenerator-runtime "^0.12.0"

-"@babel/runtime@^7.1.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2":
  version "7.4.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.2.tgz#f5ab6897320f16decd855eed70b705908a313fe8"
  integrity sha512-7Bl2rALb7HpvXFL7TETNzKSAeBVCPHELzc0C//9FCxN8nsiueWSJBqaF+2oIJScyILStASR/Cx5WMkXGYTiJFA==
@@ -2473,6 +2473,11 @@ chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+  integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=
+
 chardet@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -3575,6 +3580,15 @@ emojis-list@^2.0.0:
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=

+emotion-theming@^10.0.10:
+  version "10.0.10"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.10.tgz#efe8751119751bdc70fdc1795fe4cde0fb0cf14c"
+  integrity sha512-E4SQ3Y91avxxydDgubi/po/GaC5MM1XHm8kcClKg1PA/TeOye0PiLBzAzlgt9dBzDRV9+qHDunsayPvzVYIYng==
+  dependencies:
+    "@emotion/weak-memoize" "0.2.2"
+    hoist-non-react-statics "^3.3.0"
+    object-assign "^4.1.1"
+
 encodeurl@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -4130,7 +4144,7 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "^2.0.0"

-fbjs@^0.8.0:
+fbjs@^0.8.0, fbjs@^0.8.1:
  version "0.8.17"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -4803,7 +4817,12 @@ hoek@4.x.x:
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
  integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==

-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -8449,6 +8468,11 @@ react-error-overlay@^5.1.4:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
  integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==

+react-feather@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.6.tgz#2a547e3d5cd5e383d3da0128d593cbdb3c1b32f7"
+  integrity sha512-iCofWhTjX+vQwvDmg7o6vg0XrUg1c41yBDZG+l83nz1FiCsleJoUgd3O+kHpOeWMXuPrRIFfCixvcqyOLGOgIg==
+
 react-is@^16.6.0, react-is@^16.7.0:
  version "16.8.5"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8"
@@ -8459,6 +8483,11 @@ react-is@^16.8.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==

+react-lifecycles-compat@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-router-dom@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
@@ -8624,6 +8653,18 @@ realpath-native@^1.0.0:
  dependencies:
    util.promisify "^1.0.0"

+recompose@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
+  integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    react-lifecycles-compat "^3.0.2"
+    symbol-observable "^1.0.4"
+
 recursive-readdir@2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -9645,6 +9686,11 @@ svgo@^1.0.0, svgo@^1.1.1:
    unquote "~1.1.1"
    util.promisify "~1.0.0"

+symbol-observable@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"