wip

src/App.js

@@ -12,9 +12,7 @@ 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 Search from "./components/screens/Search"
-import Register from "./components/screens/Register"
 import Welcome from "./components/screens/Welcome"
 import PrivateRoute from "./components/PrivateRoute"
 
@@ -70,19 +68,6 @@ class App extends Component {
     this.setState({ selectedTheme: newTheme })
   }
 
-  saveUserSettings = newTheme => {
-    const { authUser, firebase } = this.props
-    firebase.db
-      .collection("users")
-      .doc(authUser.uid)
-      .update({
-        theme: newTheme,
-      })
-      .then(function() {
-        console.log("Updated theme settings")
-      })
-  }
-
   render() {
     const { selectedTheme, authUser, online } = this.state
     const { authUser: propAuthUser } = this.props
@@ -95,7 +80,7 @@ class App extends Component {
           <FullscreenLayout>
             <Navbar toggleTheme={this.onChangeTheme} />
             <RouteLayout>
-              <Router>
+              <Router style={{ flex: 1 }}>
                 <PrivateRoute
                   authed={authed}
                   path="/app/:year"
@@ -126,15 +111,7 @@ class App extends Component {
                   component={User}
                   exact
                 />
-                <PrivateRoute
-                  authed={authed}
-                  path="/app"
-                  component={Welcome}
-                  exact
-                />
-                <Login path="/app/login" />
-                <Register path="/app/register" />
-                {/* <Start path="/app" /> */}
+                <Welcome authed={authed} path="/app" exact />
               </Router>
             </RouteLayout>
           </FullscreenLayout>

src/components/Layout/Layout.js

@@ -1,13 +1,19 @@
 import React from "react"
+import { Helmet } from "react-helmet"
 import { Global, css } from "@emotion/core"
 import styled from "@emotion/styled"
 
+import { SimpleNavbar } from "../Navbar"
+
 export default ({ children }) => (
   <>
+    <Helmet title="Sol Journal" />
     <Global
       styles={css`
         * {
-          transition: 0.2s all ease-in-out;
+          transition: 0.2s border-color ease-in-out, 0.2s fill ease-in-out,
+            0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out,
+            0.2s color ease-in-out;
         }
         h1 {
           font-family: "Montserrat", -apple-system, BlinkMacSystemFont,

src/components/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 import React from "react"
-import { navigate } from "gatsby"
-import { StyledLink as Link } from "../elements"
+import { navigate, Link } from "gatsby"
+import { StyledLink } from "../../components/elements"
 import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
@@ -73,18 +73,18 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
       <NavIcons>
         {authUser ? (
           <React.Fragment>
-            <Link to={todayUrl()}>
+            <StyledLink to={todayUrl()}>
               <Icon name="Edit2" />
-            </Link>
-            <Link to={yearUrl()}>
+            </StyledLink>
+            <StyledLink to={yearUrl()}>
               <Icon name="Calendar" />
-            </Link>
-            <Link to={"/search"}>
+            </StyledLink>
+            <StyledLink to={"/search"}>
               <Icon name="Search" />
-            </Link>
-            <Link to={"/user"}>
+            </StyledLink>
+            <StyledLink to={"/user"}>
               <Icon name="User" />
-            </Link>
+            </StyledLink>
             <Icon
               tabindex={0}
               onClick={() => toggleTheme()}
@@ -93,19 +93,38 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
             />
           </React.Fragment>
         ) : (
-          <React.Fragment>
-            {/* <Link to={"/"}>Landing</Link> */}
-            <Link to={"/login"}>
-              <Icon name="LogIn" label="Login" />
-            </Link>
-            {/* <Link to={"/register"}>Register</Link> */}
-          </React.Fragment>
+          <Link to={"/login"} style={{ textDecoration: "none" }}>
+            <Icon name="ArrowRight" label="Login" size={20} />
+          </Link>
         )}
       </NavIcons>
     </Nav>
   </Header>
 )
 
+const SimpleNav = ({ theme, toggleTheme }) => (
+  <Header>
+    <Nav>
+      <LogoSection onClick={() => navigate("/")}>
+        <Logo color={theme.colors.logo} />
+        <LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
+        <LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
+      </LogoSection>
+      <NavIcons>
+        {/* <Tooltip title="Login"> */}
+        <Link to={"/login"} style={{ textDecoration: "none" }}>
+          <Icon name="ArrowRight" label="Login" size={20} />
+        </Link>
+        {/* </Tooltip> */}
+      </NavIcons>
+    </Nav>
+  </Header>
+)
+
+const SimpleNavbar = withTheme(SimpleNav)
+
+export { SimpleNavbar }
+
 export default compose(
   withAuthentication,
   withTheme

src/components/Navbar/index.js

@@ -1,2 +1,3 @@
-import Navbar from "./Navbar"
+import Navbar, { SimpleNavbar } from "./Navbar"
 export default Navbar
+export { SimpleNavbar }

src/components/PrivateRoute/PrivateRoute.js

@@ -8,7 +8,7 @@ const PrivateRoute = ({ component: Component, authed, ...rest }) => {
         authed === true ? (
           <Component {...rest} />
         ) : (
-          <Redirect to="/app/login" from={location.pathname} />
+          <Redirect to="/login" from={location.pathname} />
         )
       }
     </Location>

src/components/firebase/fire.js

@@ -43,7 +43,7 @@ class Firebase {
 
   doSignOut = () => {
     this.auth.signOut()
-    window.location.replace("/app/login")
+    window.location.replace("/login")
   }
 
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email)

src/components/screens/Day/Day.js

@@ -17,6 +17,12 @@ import { SIZES } from "../../../styles/constants"
 import Seek from "../../Seek"
 import Icon from "../../Icon"
 
+const Main = styled.main`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`
 const EntryHeading = styled.div`
   display: flex;
   flex-direction: row;
@@ -58,6 +64,7 @@ const JournalEntryArea = styled.textarea`
   background-color: transparent;
   line-height: 1.5;
   letter-spacing: 0.5px;
+  height: calc(100vh - 275px);
   width: 100%;
   border: none;
   resize: none;

src/components/screens/Login/index.js

@@ -1,2 +0,0 @@
-import Login from "./Login"
-export default Login

src/components/screens/Register/index.js

@@ -1,2 +0,0 @@
-import Register from "./Register"
-export default Register

src/index.css

@@ -1,12 +0,0 @@
-* {
-  transition: 0.2s all ease-in-out;
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/pages/index.js

@@ -1,10 +1,12 @@
 import React from "react"
+import { SimpleNavbar } from "../components/Navbar"
 import Index from "../components/screens/Start/index"
 import Layout from "../components/Layout"
 import Container from "../components/container"
 
 export default () => (
   <Layout>
+    <SimpleNavbar />
     <Container>
       <Index />
     </Container>

src/pages/login.js

@@ -1,15 +1,15 @@
 import React, { Component } from "react"
-import { navigate } from "gatsby"
+import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
 import { withTheme } from "emotion-theming"
 
-import { Input, Button, P } from "../../elements"
-import { SIZES } from "../../../styles/constants"
-import { StyledLink as Link } from "../../elements"
-
-import { FirebaseContext } from "../../firebase"
+import { SimpleNavbar } from "../components/Navbar"
+import { Input, Button, P } from "../components/elements"
+import { SIZES } from "../styles/constants"
+import Layout from "../components/Layout"
+import { FirebaseContext } from "../components/firebase"
 
 const LoginGrid = styled.div`
   display: grid;
@@ -19,19 +19,21 @@ const LoginGrid = styled.div`
 const LoginLayout = styled.div`
   max-width: ${SIZES.smallWidth};
   width: 100%;
-  align-self: center;
-  margin-top: 20px;
+  margin: 20px auto;
 `
 
 const LoginPage = ({ theme }) => (
-  <LoginLayout>
-    <FirebaseContext.Consumer>
-      {firebase => <LoginForm firebase={firebase} />}
-    </FirebaseContext.Consumer>
-    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
-      Don't have an account? <Link to={"/register"}>Sign Up</Link>
-    </P>
-  </LoginLayout>
+  <Layout>
+    <SimpleNavbar />
+    <LoginLayout>
+      <FirebaseContext.Consumer>
+        {firebase => <LoginForm firebase={firebase} />}
+      </FirebaseContext.Consumer>
+      <P colors={theme.colors} style={{ fontStyle: "italic" }}>
+        Don't have an account? <Link to={"/register"}>Sign Up</Link>
+      </P>
+    </LoginLayout>
+  </Layout>
 )
 
 class LoginFormBase extends Component {

src/pages/register.js

@@ -1,14 +1,14 @@
 import React, { Component } from "react"
 import styled from "@emotion/styled"
-import { navigate } from "gatsby"
+import { navigate, Link } from "gatsby"
 import { compose } from "recompose"
 import { withTheme } from "emotion-theming"
 
-import { Input, Button, P } from "../../elements"
-import { SIZES } from "../../../styles/constants"
-import { StyledLink as Link } from "../../elements"
-
-import { FirebaseContext } from "../../firebase"
+import { SimpleNavbar } from "../components/Navbar"
+import { Input, Button, P } from "../components/elements"
+import { SIZES } from "../styles/constants"
+import Layout from "../components/Layout"
+import { FirebaseContext } from "../components/firebase"
 
 const RegisterGrid = styled.div`
   display: grid;
@@ -18,19 +18,21 @@ const RegisterGrid = styled.div`
 const RegisterLayout = styled.div`
   max-width: ${SIZES.smallWidth};
   width: 100%;
-  align-self: center;
-  margin-top: 20px;
+  margin: 20px auto;
 `
 
 const RegisterPage = ({ theme }) => (
-  <RegisterLayout>
-    <FirebaseContext.Consumer>
-      {firebase => <RegisterForm firebase={firebase} />}
-    </FirebaseContext.Consumer>
-    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
-      Already have an account? <Link to={"/login"}>Login</Link>
-    </P>
-  </RegisterLayout>
+  <Layout>
+    <SimpleNavbar />
+    <RegisterLayout>
+      <FirebaseContext.Consumer>
+        {firebase => <RegisterForm firebase={firebase} />}
+      </FirebaseContext.Consumer>
+      <P colors={theme.colors} style={{ fontStyle: "italic" }}>
+        Already have an account? <Link to={"/login"}>Login</Link>
+      </P>
+    </RegisterLayout>
+  </Layout>
 )
 
 class RegisterFormBase extends Component {