chore: resize writing area, add name to navbar
This commit is contained in:
56
src/App.js
56
src/App.js
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user