From b2ad7d544d3c44c81ba7afc12061dcea2f82f232 Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Wed, 27 Mar 2019 22:30:07 -0600 Subject: [PATCH] chore: additional theming implementation --- src/App.css | 25 ------------------------- src/App.js | 19 +++++++++++++++++-- src/components/Icon/Icon.js | 24 +++++++++++++++++++----- src/components/Navbar/Navbar.js | 22 ++++++++++++++++------ src/components/Seek/Seek.js | 29 ++++++++++++++++++----------- src/index.css | 8 +++----- src/styles/theme.js | 8 ++++++-- 7 files changed, 79 insertions(+), 56 deletions(-) delete mode 100644 src/App.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 4021489..0000000 --- a/src/App.css +++ /dev/null @@ -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); - } -} diff --git a/src/App.js b/src/App.js index e9e5e7e..b3ec444 100644 --- a/src/App.js +++ b/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 ( - + diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js index b49da3c..d854223 100644 --- a/src/components/Icon/Icon.js +++ b/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 }) => ( - +const Icon = ({ name, ...rest }) => ( + {name === "Book" && } {name === "Calendar" && } + {name === "ChevronLeft" && } + {name === "ChevronRight" && } {name === "Circle" && } + {name === "Moon" && } {name === "User" && } ); -export default Icon; +export default withTheme(Icon); diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 8acfc05..be4b599 100644 --- a/src/components/Navbar/Navbar.js +++ b/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 }) => (