From 7eaa6b6046c9c5468d685f0859ec7111ef503ba2 Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Fri, 29 Mar 2019 11:35:05 -0600
Subject: [PATCH] feat: keyboard accessibility in navbar

---
 public/manifest.json                  | 14 +++++++-------
 src/components/Icon/Icon.js           | 11 ++++++++---
 src/components/Navbar/Navbar.js       | 10 ++++++----
 src/components/screens/Day/Day.js     | 24 ++++++++++++++++++++++--
 src/components/screens/Login/Login.js |  2 +-
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 1f2f141..226c9fc 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,15 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "Sol Journal",
+  "short_name": "Sol Journal",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#2E3136",
+  "background_color": "#FAFBFC",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
index 78b6b7c..5ac61c1 100644
--- a/src/components/Icon/Icon.js
+++ b/src/components/Icon/Icon.js
@@ -17,19 +17,24 @@ const IconBase = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: none;
+  background-color: transparent;
   border-radius: 12px;
   padding: 5px;
   transition: 0.1s all ease-in-out;
   color: ${props => props.theme.colors.secondary};
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px ${props => props.theme.colors.bodyBackground},
+      0 0 0 5px ${props => props.theme.colors.hover};
+  }
   &:hover {
     background-color: ${props => !props.disabled && props.theme.colors.hover};
     cursor: pointer;
   }
 `
 
-const Icon = ({ name, ...rest }) => (
-  <IconBase {...rest}>
+const Icon = ({ name, tabindex, ...rest }) => (
+  <IconBase tabIndex={tabindex} {...rest}>
     {name === "Book" && <Book />}
     {name === "Calendar" && <Calendar />}
     {name === "ChevronLeft" && <ChevronLeft />}
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
index 2005caa..b2da0e6 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -70,13 +70,15 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
             <Link to={yearUrl()}>
               <Icon name="Calendar" />
             </Link>
-            <Icon
-              onClick={() => toggleTheme()}
-              name={theme.name === "Dark" ? "Sun" : "Moon"}
-            />
             <Link to={"/user"}>
               <Icon name="User" />
             </Link>
+            <Icon
+              tabindex={0}
+              onClick={() => toggleTheme()}
+              onKeyPress={() => toggleTheme()}
+              name={theme.name === "Dark" ? "Sun" : "Moon"}
+            />
           </React.Fragment>
         ) : (
           <React.Fragment>
diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js
index 843cfd7..1868dd5 100644
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react"
 import styled from "@emotion/styled"
+import { css, keyframes } from "@emotion/core"
 import { compose } from "recompose"
 import { withRouter } from "react-router-dom"
 import { withTheme } from "emotion-theming"
@@ -31,7 +32,7 @@ const JournalEntryArea = styled.textarea`
   resize: none;
   outline: none;
   font-size: ${SIZES.small};
-  border-radius: 3px;
+  border-radius: 1px;
   margin-top: ${SIZES.tiny};
   padding-top: 0px;
   padding-bottom: 0px;
@@ -43,6 +44,18 @@ const JournalEntryArea = styled.textarea`
       0 0 0 10px ${props => props.theme.colors.hover};
   }
 `
+const fadeKeyFrames = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+const LoadingSpinner = styled(BeatLoader)`
+  opacity: 0;
+  animation: fadein 2s;
+`
 
 const AUTOSAVE_DELAY = 2000
 
@@ -165,7 +178,14 @@ class Day extends Component {
         {loading ? (
           // <JournalEntryArea disabled placeholder="Loading..." />
           <div style={{ marginTop: 10 }}>
-            <BeatLoader color={theme.colors.tertiary} size={10} margin="4px" />
+            <LoadingSpinner
+              color={theme.colors.tertiary}
+              size={10}
+              margin="4px"
+              css={css`
+                animation: ${fadeKeyFrames} 1s ease-in;
+              `}
+            />
           </div>
         ) : (
           <JournalEntryArea
diff --git a/src/components/screens/Login/Login.js b/src/components/screens/Login/Login.js
index d900cf3..2835e31 100644
--- a/src/components/screens/Login/Login.js
+++ b/src/components/screens/Login/Login.js
@@ -31,7 +31,7 @@ class LoginFormBase extends Component {
       .doSignInWithEmailAndPassword(email, password)
       .then(() => {
         this.setState({ email: "", password: "", error: null })
-        this.props.history.push(format(new Date(), "/YYYY/MM/DD"))
+        this.props.history.push(format(new Date(), "/"))
       })
       .catch(error => {
         this.setState({ error })