feat: redirect login to proper route, navigation with Seek component on year pages

src/App.js

@@ -15,6 +15,9 @@ import Register from "./components/screens/Register";
 import { withAuthentication } from "./components/session";
 
 const RouteLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   margin: 0 auto;
   padding: 0 10px;
   max-width: 720px;

src/components/Navbar/Navbar.js

@@ -6,6 +6,7 @@ import { withTheme } from "emotion-theming";
 
 import { todayUrl, yearUrl } from "../../utils/date";
 
+import Logo from "../Logo";
 import Icon from "../Icon";
 import { withAuthentication } from "../session";
 
@@ -29,10 +30,13 @@ const Nav = styled.div`
   justify-content: space-between;
   align-content: center;
 `;
-const Logo = styled.div``;
+const LogoSection = styled.div`
+  width: 40px;
+`;
 const NavIcons = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
   * + * {
     margin-left: 10px;
   }
@@ -41,12 +45,16 @@ const NavIcons = styled.div`
 const Navbar = ({ authUser, theme, toggleTheme }) => (
   <Header>
     <Nav>
-      <Logo>Logo</Logo>
+      <LogoSection>
+        <Logo color={theme.colors.logo} />
+      </LogoSection>
       <NavIcons>
-        <Icon
-          onClick={() => toggleTheme()}
-          name={theme.name === "Dark" ? "Sun" : "Moon"}
-        />
+        <Link to="#">
+          <Icon
+            onClick={() => toggleTheme()}
+            name={theme.name === "Dark" ? "Sun" : "Moon"}
+          />
+        </Link>
         {authUser ? (
           <React.Fragment>
             <Link to={yearUrl()}>

src/components/Seek/Seek.js

@@ -38,9 +38,7 @@ const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => (
           disabled={disableNext}
           name="ChevronRight"
           style={{
-            color: disableNext
-              ? theme.colors.quarternary
-              : theme.colors.secondary
+            color: disableNext ? theme.colors.hover : theme.colors.secondary
           }}
         />
       </Link>

src/components/screens/Day/Day.js

@@ -1,8 +1,34 @@
 import React, { Component } from "react";
+import styled from "@emotion/styled";
+import { withTheme } from "emotion-theming";
 import { addDays, subDays, format, isAfter, startOfYesterday } from "date-fns";
 
+import { SIZES } from "../../../styles/constants";
+
 import Seek from "../../Seek";
 
+const JournalHeading = styled.h2`
+  font-weight: 700;
+  font-size: ${SIZES.tiny};
+  color: ${props => props.theme.colors.secondary};
+  margin-top: ${SIZES.medium};
+`;
+const JournalEntryArea = styled.textarea`
+  flex-grow: 1;
+  color: ${props => props.theme.colors.primary};
+  background-color: transparent;
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+  width: 100%;
+  border: none;
+  resize: none;
+  outline: none;
+  font-size: ${SIZES.small};
+  &::placeholder {
+    color: ${props => props.theme.colors.tertiary};
+  }
+`;
+
 class Day extends Component {
   render() {
     const {
@@ -15,16 +41,18 @@ class Day extends Component {
     if (!currentDay) return;
 
     return (
-      <div>
+      <>
         <Seek
           title={format(currentDay, "YYYY MMM DD")}
           prev={format(subDays(currentDay, 1), "/YYYY/MM/DD")}
           next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
           disableNext={isAfter(currentDay, startOfYesterday())}
         />
-      </div>
+        <JournalHeading>WHAT'S HAPPENED TODAY?</JournalHeading>
+        <JournalEntryArea placeholder="Start writing..." />
+      </>
     );
   }
 }
 
-export default Day;
+export default withTheme(Day);

src/components/screens/Login/Login.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { withRouter, Link } from "react-router-dom";
+import { format } from "date-fns";
 
 import { FirebaseContext } from "../../firebase";
 
@@ -30,7 +31,7 @@ class LoginFormBase extends Component {
       .doSignInWithEmailAndPassword(email, password)
       .then(() => {
         this.setState({ email: "", password: "", error: null });
-        this.props.history.push("/home");
+        this.props.history.push(format(new Date(), "/YYYY/MM/DD"));
       })
       .catch(error => {
         this.setState({ error });

src/index.css

@@ -1,6 +1,9 @@
 * {
   transition: 0.2s all ease-in-out;
 }
+textarea:focus {
+  outline: none;
+}
 body {
   margin: 0;
   padding: 0;

src/styles/constants.js

@@ -1,5 +1,5 @@
 export const SIZES = {
-  tiny: "0.5rem",
+  tiny: "0.75rem",
   small: "1rem",
   normal: "1.25rem",
   medium: "1.5rem",

src/styles/theme.js

@@ -2,6 +2,7 @@ const theme = {
   LIGHT: {
     name: "Light",
     colors: {
+      logo: "#344157",
       primary: "#2E3136",
       secondary: "#999",
       tertiary: "#C4C4C4",
@@ -14,6 +15,7 @@ const theme = {
   DARK: {
     name: "Dark",
     colors: {
+      logo: "#EAEAEA",
       primary: "#F3F6F8",
       secondary: "#9Ba3B0",
       tertiary: "#6F7682",