chore: styling for login/signup pages

src/components/Navbar/Navbar.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Link } from "react-router-dom"
+import { StyledLink as Link } from "../elements"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { withTheme } from "emotion-theming"

src/components/Seek/Seek.js

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom"
 
 import { SIZES } from "../../styles/constants"
 import Icon from "../Icon"
+import { H1 } from "../elements"
 
 const SeekHeader = styled.header`
   display: flex;
@@ -16,11 +17,6 @@ const SeekHeader = styled.header`
   border-color: ${props => props.theme.colors.quarternary};
   margin-top: 15px;
 `
-const SeekH1 = styled.h1`
-  display: block;
-  font-size: ${SIZES.small};
-  color: ${props => props.theme.colors.secondary};
-`
 const SeekArrows = styled.div`
   display: grid;
   grid-template-columns: auto auto;
@@ -29,7 +25,7 @@ const SeekArrows = styled.div`
 
 const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => (
   <SeekHeader>
-    <SeekH1>{title}</SeekH1>
+    <H1 color={theme.colors.secondary}>{title}</H1>
     <SeekArrows>
       <Link to={prev}>
         <Icon name="ChevronLeft" />

src/components/SignOut/SignOut.js

@@ -1,28 +1,13 @@
 import React from "react"
 import { compose } from "recompose"
-import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
+import { Button } from "../elements"
+
 import { withFirebase } from "../firebase"
 
-const Button = styled.button`
+const SignOutButton = ({ firebase, theme }) => (
-  background-color: ${props => props.theme.colors.headerBackground};
+  <Button colors={theme.colors} type="button" onClick={firebase.doSignOut}>
-  padding: 10px 50px;
-  height: 40px;
-  border-radius: 5px;
-  border: 0px solid;
-  border-color: ${props => props.theme.colors.quarternary};
-  color: ${props => props.theme.colors.secondary};
-  font-size: 14px;
-  font-weight: 700;
-  &:hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.colors.hover};
-  }
-`
-
-const SignOutButton = ({ firebase }) => (
-  <Button type="button" onClick={firebase.doSignOut}>
     Sign Out
   </Button>
 )

src/components/elements/elements.js

@@ -0,0 +1,68 @@
+import React from "react"
+import { withTheme } from "emotion-theming"
+import { Link } from "react-router-dom"
+import styled from "@emotion/styled"
+
+import { SIZES } from "../../styles/constants"
+
+export const H1 = styled.h1`
+  display: block;
+  font-size: ${SIZES.small};
+  color: ${props => props.color};
+`
+
+export const Input = styled.input`
+  background-color: ${props => props.colors.headerBackground};
+  border: none;
+  border-radius: 5px;
+  max-height: 40px;
+  outline: none;
+  padding: 15px;
+  font-size: ${SIZES.normal};
+  &:focus {
+    box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
+      0 0 0 5px ${props => props.colors.hover};
+  }
+  &::placeholder {
+    color: ${props => props.colors.tertiary};
+  }
+  &:valid {
+    border-color: ${props => props.colors.valid} !important;
+  }
+`
+
+export const Button = styled.button`
+  display: inline;
+  background-color: ${props => props.colors.headerBackground};
+  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};
+  font-weight: 700;
+  outline: none;
+  &:hover {
+    cursor: pointer;
+    background-color: ${props => props.colors.hover};
+  }
+  &:focus {
+    box-shadow: 0 0 0 3px ${props => props.colors.bodyBackground},
+      0 0 0 5px ${props => props.colors.hover};
+  }
+`
+
+export const P = styled.p`
+  color: ${props => props.colors.secondary};
+`
+
+export const StyledLink = withTheme(styled(Link)`
+  text-decoration: none;
+  border-radius: 12px;
+  outline: none;
+  &:focus {
+    box-shadow: 0 0 0 3px ${props => props.theme.colors.bodyBackground},
+      0 0 0 5px ${props => props.theme.colors.hover};
+  }
+`)

src/components/elements/index.js

@@ -0,0 +1 @@
+export * from "./elements"

src/components/screens/Login/Login.js

@@ -1,19 +1,37 @@
 import React, { Component } from "react"
-import { withRouter, Link } from "react-router-dom"
+import { withRouter } from "react-router-dom"
+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"
 
-const LoginPage = ({ history }) => (
+const LoginGrid = styled.div`
-  <div>
+  display: grid;
-    <h1>Login</h1>
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+`
+const LoginLayout = styled.div`
+  max-width: ${SIZES.smallWidth};
+  width: 100%;
+  align-self: center;
+  margin-top: 20px;
+`
+
+const LoginPage = ({ history, theme }) => (
+  <LoginLayout>
     <FirebaseContext.Consumer>
       {firebase => <LoginForm history={history} firebase={firebase} />}
     </FirebaseContext.Consumer>
-    <p>
+    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
       Don't have an account? <Link to={"/register"}>Sign Up</Link>
-    </p>
+    </P>
-  </div>
+  </LoginLayout>
 )
 
 class LoginFormBase extends Component {
@@ -44,37 +62,44 @@ class LoginFormBase extends Component {
 
   render() {
     const { email, password, error } = this.state
+    const { theme } = this.props
 
     const isInvalid = password === "" || email === ""
 
     return (
       <form onSubmit={this.onSubmit}>
-        <input
+        <LoginGrid>
-          name="email"
+          <Input
-          value={email}
+            name="email"
-          onChange={this.onChange}
+            value={email}
-          type="text"
+            onChange={this.onChange}
-          placeholder="Email Address"
+            type="text"
-        />
+            placeholder="Email Address"
-        <input
+            colors={theme.colors}
-          name="password"
+          />
-          value={password}
+          <Input
-          onChange={this.onChange}
+            name="password"
-          type="password"
+            value={password}
-          placeholder="Password"
+            onChange={this.onChange}
-        />
+            type="password"
-        <button disabled={isInvalid} type="submit">
+            placeholder="Password"
-          Sign In
+            colors={theme.colors}
-        </button>
+          />
-
+          <Button colors={theme.colors} disabled={isInvalid} type="submit">
+            Login
+          </Button>
+        </LoginGrid>
         {error && <p>{error.message}</p>}
       </form>
     )
   }
 }
 
-const LoginForm = withRouter(LoginFormBase)
+const LoginForm = compose(
+  withTheme,
+  withRouter
+)(LoginFormBase)
 
-export default LoginPage
+export default withTheme(LoginPage)
 
 export { LoginForm }

src/components/screens/Month/Month.js

@@ -4,6 +4,7 @@ import styled from "@emotion/styled"
 import {
   isAfter,
   isThisYear,
+  isThisMonth,
   format,
   addMonths,
   subMonths,
@@ -52,7 +53,7 @@ class Month extends Component {
 
     let yearCards = []
     for (let i = 0; i < getDaysInMonth(currentDay); i++) {
-      const isDisabled = dayIndexesToInclude <= i
+      const isDisabled = dayIndexesToInclude <= i && isThisMonth(currentDay)
       if (isDisabled) {
         yearCards.push(
           <YearCard disabled={isDisabled} key={i}>

src/components/screens/Register/Register.js

@@ -1,18 +1,39 @@
 import React, { Component } from "react"
 import { withRouter } from "react-router-dom"
+import styled from "@emotion/styled"
+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"
 
-const RegisterPage = ({ history }) => (
+const RegisterGrid = styled.div`
-  <div>
+  display: grid;
-    <h1>Register</h1>
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+`
+const RegisterLayout = styled.div`
+  max-width: ${SIZES.smallWidth};
+  width: 100%;
+  align-self: center;
+  margin-top: 20px;
+`
+
+const RegisterPage = ({ history, theme }) => (
+  <RegisterLayout>
     <FirebaseContext.Consumer>
       {firebase => <RegisterForm history={history} firebase={firebase} />}
     </FirebaseContext.Consumer>
-  </div>
+    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
+      Already have an account? <Link to={"/login"}>Login</Link>
+    </P>
+  </RegisterLayout>
 )
 
-class RegisterForm extends Component {
+class RegisterFormBase extends Component {
   constructor(props) {
     super(props)
 
@@ -63,6 +84,7 @@ class RegisterForm extends Component {
 
   render() {
     const { username, email, passwordOne, passwordTwo, error } = this.state
+    const { theme } = this.props
     const isInvalid =
       passwordOne !== passwordTwo ||
       passwordOne === "" ||
@@ -71,37 +93,43 @@ class RegisterForm extends Component {
 
     return (
       <form onSubmit={this.onSubmit}>
-        <input
+        <RegisterGrid>
-          name="username"
+          <Input
-          value={username}
+            colors={theme.colors}
-          onChange={this.onChange}
+            name="username"
-          type="text"
+            value={username}
-          placeholder="Full Name"
+            onChange={this.onChange}
-        />
+            type="text"
-        <input
+            placeholder="Full Name"
-          name="email"
+          />
-          value={email}
+          <Input
-          onChange={this.onChange}
+            colors={theme.colors}
-          type="text"
+            name="email"
-          placeholder="Email Address"
+            value={email}
-        />
+            onChange={this.onChange}
-        <input
+            type="text"
-          name="passwordOne"
+            placeholder="Email Address"
-          value={passwordOne}
+          />
-          onChange={this.onChange}
+          <Input
-          type="password"
+            colors={theme.colors}
-          placeholder="Password"
+            name="passwordOne"
-        />
+            value={passwordOne}
-        <input
+            onChange={this.onChange}
-          name="passwordTwo"
+            type="password"
-          value={passwordTwo}
+            placeholder="Password"
-          onChange={this.onChange}
+          />
-          type="password"
+          <Input
-          placeholder="Confirm Password"
+            colors={theme.colors}
-        />
+            name="passwordTwo"
-        <button disabled={isInvalid} type="submit">
+            value={passwordTwo}
-          Sign Up
+            onChange={this.onChange}
-        </button>
+            type="password"
+            placeholder="Confirm Password"
+          />
+          <Button colors={theme.colors} disabled={isInvalid} type="submit">
+            Register
+          </Button>
+        </RegisterGrid>
 
         {error && <p>{error.message}</p>}
       </form>
@@ -109,6 +137,11 @@ class RegisterForm extends Component {
   }
 }
 
-export default withRouter(RegisterPage)
+const RegisterForm = compose(
+  withTheme,
+  withRouter
+)(RegisterFormBase)
+
+export default withTheme(RegisterPage)
 
 export { RegisterForm }

src/styles/constants.js

@@ -5,4 +5,5 @@ export const SIZES = {
   medium: "1.5rem",
   large: "2rem",
   maxWidth: "600px",
+  smallWidth: "300px",
 }

src/styles/theme.js

@@ -9,6 +9,7 @@ const theme = {
       quarternary: "#EAEAEA",
       headerBackground: "#FAFBFC",
       bodyBackground: "#FFF",
+      inputBackground: "#FAFBFC",
       hover: "hsla(233, 5%, 31%, 0.12)",
     },
   },
@@ -22,6 +23,7 @@ const theme = {
       quarternary: "#3E4B62",
       headerBackground: "#272f3d",
       bodyBackground: "#262B34",
+      inputBackground: "#272f3d",
       hover: "hsla(233, 100%, 96%, 0.12)",
     },
   },