chore: clean up home screen

src/App.js

@@ -47,13 +47,13 @@ class App extends Component {
   }
 
   componentDidMount() {
-    window.addEventListener('online', () => {
+    window.addEventListener("online", () => {
       this.setState({ online: true })
-    });
+    })
 
-    window.addEventListener('offline', () => {
+    window.addEventListener("offline", () => {
       this.setState({ online: false })
-    });
+    })
   }
 
   onChangeTheme = () => {

src/components/Navbar/Navbar.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { withRouter } from "react-router-dom"
 import { StyledLink as Link } from "../elements"
 import styled from "@emotion/styled"
 /** @jsx jsx */
@@ -41,6 +42,9 @@ const LogoSection = styled.div`
   font-family: "Montserrat", sans-serif;
   font-weight: 700;
   font-size: 18px;
+  &:hover {
+    cursor: pointer;
+  }
 `
 const LogoText = styled.span`
   color: ${props => props.color};
@@ -58,10 +62,10 @@ const NavIcons = styled.div`
   }
 `
 
-const Navbar = ({ authUser, theme, toggleTheme }) => (
+const Navbar = ({ authUser, theme, toggleTheme, history }) => (
   <Header>
     <Nav>
-      <LogoSection>
+      <LogoSection onClick={() => history.push("/")}>
         <Logo color={theme.colors.logo} />
         <LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
         <LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
@@ -104,5 +108,6 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
 
 export default compose(
   withAuthentication,
-  withTheme
+  withTheme,
+  withRouter
 )(Navbar)

src/components/SignOut/SignOut.js

@@ -7,7 +7,12 @@ import { Button } from "../elements"
 import { withFirebase } from "../firebase"
 
 const SignOutButton = ({ firebase, theme }) => (
-  <Button colors={theme.colors} type="button" onClick={firebase.doSignOut}>
+  <Button
+    fontSize="small"
+    colors={theme.colors}
+    type="button"
+    onClick={firebase.doSignOut}
+  >
     Sign Out
   </Button>
 )

src/components/elements/elements.js

@@ -33,28 +33,28 @@ export const Input = styled.input`
 
 export const Button = styled.button`
   display: inline;
-  background-color: ${props => props.colors.headerBackground};
+  background-color: ${props => props.colors.primary};
   padding: 12px 50px;
   min-height: 45px;
   border-radius: 5px;
   border: 0px solid;
   border-color: ${props => props.colors.quarternary};
-  color: ${props => props.colors.secondary};
-  font-size: ${SIZES.normal};
+  color: ${props => props.colors.quarternary};
+  font-size: ${props => SIZES[props.fontSize || "normal"]};
   font-weight: 700;
   outline: none;
   &:hover {
     cursor: pointer;
-    background-color: ${props => props.colors.hover};
+    background-color: ${props => props.colors.secondary};
   }
   &:focus {
     box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
-      0 0 0 5px ${props => props.colors.hover};
+      0 0 0 5px ${props => props.colors.secondary};
   }
 `
 
 export const P = styled.p`
-  color: ${props => props.colors.secondary};
+  color: ${props => props.theme.colors.secondary};
 `
 
 export const StyledLink = withTheme(styled(Link)`

src/components/screens/Start/Start.js

@@ -3,16 +3,14 @@ import { Link } from "react-router-dom"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
-import { Button } from "../../elements"
+import { Button, P } from "../../elements"
 import { todayUrl } from "../../../utils/date"
 
+const Title = styled.h1``
 const StartGrid = styled.div`
-  margin: 0 auto;
-  text-align: center;
   margin-top: 30px;
-  max-width: 350px;
   line-height: 1.5;
-  color: ${props => props.theme.colors.secondary};
+  color: ${props => props.theme.colors.primary};
   height: 100%;
 `
 
@@ -21,17 +19,14 @@ class Start extends Component {
     const { theme } = this.props
     return (
       <StartGrid>
-        <div style={{ margin: 10 }}>
-          Use your journal as a place to record thoughts and events from the
-          day.
-        </div>
-        <div style={{ margin: 10 }}>
-          Your journal works offline and from any device. You can add it to your
-          homescreen for faster access and write from a mobile device or type up
-          your entries from your computer.
-        </div>
+        <Title>Record what's on your mind, from anywhere</Title>
+        <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
+          Journaling can improve your health and help you take inventory of your
+          day. Sol Journal works offline and from any device. Use it as a place
+          to record thoughts and events from the day.
+        </P>
         <Link to={todayUrl()} style={{ textDecoration: "none" }}>
-          <Button colors={theme.colors}>Write Today</Button>
+          <Button colors={theme.colors}>Write about today</Button>
         </Link>
       </StartGrid>
     )

src/components/screens/User/User.js

@@ -114,6 +114,7 @@ class User extends React.Component {
           </ProfileSectionHeader>
 
           <Button
+            fontSize="small"
             colors={theme.colors}
             onClick={() => {
               console.log("reset!")
@@ -139,6 +140,7 @@ class User extends React.Component {
               style={{ textDecoration: "none" }}
             >
               <Button
+                fontSize="small"
                 colors={theme.colors}
                 onClick={() => {
                   setTimeout(() => {
@@ -151,7 +153,11 @@ class User extends React.Component {
               </Button>
             </a>
           ) : (
-            <Button colors={theme.colors} onClick={() => this.prepareExport()}>
+            <Button
+              fontSize="small"
+              colors={theme.colors}
+              onClick={() => this.prepareExport()}
+            >
               {exporting ? (
                 <BeatLoader
                   color={theme.colors.secondary}