chore: resize writing area, add name to navbar

This commit is contained in:
Kyle Gill
2019-03-29 10:08:02 -06:00
parent faf5473d5d
commit eee11f9437
34 changed files with 386 additions and 369 deletions

View File

@@ -1,18 +1,20 @@
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 React, { Component } from "react"
import { BrowserRouter as Router, Route } from "react-router-dom"
import styled from "@emotion/styled"
import { ThemeProvider } from "emotion-theming"
import theme from "./styles/theme";
import Navbar from "./components/Navbar";
import Day from "./components/screens/Day";
import Month from "./components/screens/Month";
import Year from "./components/screens/Year";
import User from "./components/screens/User";
import Login from "./components/screens/Login";
import Register from "./components/screens/Register";
import { SIZES } from "./styles/constants"
import { withAuthentication } from "./components/session";
import theme from "./styles/theme"
import Navbar from "./components/Navbar"
import Day from "./components/screens/Day"
import Month from "./components/screens/Month"
import Year from "./components/screens/Year"
import User from "./components/screens/User"
import Login from "./components/screens/Login"
import Register from "./components/screens/Register"
import { withAuthentication } from "./components/session"
const RouteLayout = styled.div`
display: flex;
@@ -20,32 +22,32 @@ const RouteLayout = styled.div`
height: 100%;
margin: 0 auto;
padding: 0 10px;
max-width: 720px;
max-width: ${SIZES.maxWidth};
min-height: calc(100vh - 60px);
background-color: ${props => props.theme.colors.bodyBackground};
`;
`
class App extends Component {
state = {
authUser: JSON.parse(localStorage.getItem("authUser")),
selectedTheme: "LIGHT"
};
selectedTheme: "LIGHT",
}
onChangeTheme = () => {
const { selectedTheme } = this.state;
const root = document.documentElement;
const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT";
const { selectedTheme } = this.state
const root = document.documentElement
const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT"
root.style.setProperty(
"background-color",
theme[newTheme].colors.bodyBackground
);
this.setState({ selectedTheme: newTheme });
};
)
this.setState({ selectedTheme: newTheme })
}
render() {
const { selectedTheme } = this.state;
const { selectedTheme } = this.state
const currentTheme = theme[selectedTheme];
const currentTheme = theme[selectedTheme]
return (
<ThemeProvider theme={currentTheme}>
<Router>
@@ -68,8 +70,8 @@ class App extends Component {
</RouteLayout>
</Router>
</ThemeProvider>
);
)
}
}
export default withAuthentication(App);
export default withAuthentication(App)