From 4c485619a9fea241718917416da8c816ecaaee42 Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Wed, 3 Apr 2019 17:10:24 -0600 Subject: [PATCH] chore: styling for login/signup pages --- src/components/Navbar/Navbar.js | 2 +- src/components/Seek/Seek.js | 8 +- src/components/SignOut/SignOut.js | 23 +---- src/components/elements/elements.js | 68 +++++++++++++ src/components/elements/index.js | 1 + src/components/screens/Login/Login.js | 79 ++++++++++----- src/components/screens/Month/Month.js | 3 +- src/components/screens/Register/Register.js | 107 +++++++++++++------- src/styles/constants.js | 1 + src/styles/theme.js | 2 + 10 files changed, 203 insertions(+), 91 deletions(-) create mode 100644 src/components/elements/elements.js create mode 100644 src/components/elements/index.js diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index b2da0e6..2266cab 100644 --- a/src/components/Navbar/Navbar.js +++ b/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" diff --git a/src/components/Seek/Seek.js b/src/components/Seek/Seek.js index e92ebb4..3b2fd81 100644 --- a/src/components/Seek/Seek.js +++ b/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 }) => ( - {title} +

{title}

diff --git a/src/components/SignOut/SignOut.js b/src/components/SignOut/SignOut.js index 0632e57..e8134f1 100644 --- a/src/components/SignOut/SignOut.js +++ b/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` - background-color: ${props => props.theme.colors.headerBackground}; - 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 }) => ( - ) diff --git a/src/components/elements/elements.js b/src/components/elements/elements.js new file mode 100644 index 0000000..197d0da --- /dev/null +++ b/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}; + } +`) diff --git a/src/components/elements/index.js b/src/components/elements/index.js new file mode 100644 index 0000000..9fb7d02 --- /dev/null +++ b/src/components/elements/index.js @@ -0,0 +1 @@ +export * from "./elements" diff --git a/src/components/screens/Login/Login.js b/src/components/screens/Login/Login.js index 2835e31..1c6bf45 100644 --- a/src/components/screens/Login/Login.js +++ b/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 }) => ( -
-

Login

+const LoginGrid = styled.div` + display: grid; + 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 }) => ( + {firebase => } -

+

Don't have an account? Sign Up -

-
+

+ ) 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 (
- - - - + + + + + {error &&

{error.message}

}
) } } -const LoginForm = withRouter(LoginFormBase) +const LoginForm = compose( + withTheme, + withRouter +)(LoginFormBase) -export default LoginPage +export default withTheme(LoginPage) export { LoginForm } diff --git a/src/components/screens/Month/Month.js b/src/components/screens/Month/Month.js index 76aef03..0820b2a 100644 --- a/src/components/screens/Month/Month.js +++ b/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( diff --git a/src/components/screens/Register/Register.js b/src/components/screens/Register/Register.js index 8546f99..4f8ba6e 100644 --- a/src/components/screens/Register/Register.js +++ b/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 }) => ( -
-

Register

+const RegisterGrid = styled.div` + display: grid; + 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 }) => ( + {firebase => } -
+

+ Already have an account? Login +

+ ) -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 (
- - - - - + + + + + + + {error &&

{error.message}

}
@@ -109,6 +137,11 @@ class RegisterForm extends Component { } } -export default withRouter(RegisterPage) +const RegisterForm = compose( + withTheme, + withRouter +)(RegisterFormBase) + +export default withTheme(RegisterPage) export { RegisterForm } diff --git a/src/styles/constants.js b/src/styles/constants.js index c47539b..fefe0b6 100644 --- a/src/styles/constants.js +++ b/src/styles/constants.js @@ -5,4 +5,5 @@ export const SIZES = { medium: "1.5rem", large: "2rem", maxWidth: "600px", + smallWidth: "300px", } diff --git a/src/styles/theme.js b/src/styles/theme.js index 6ccfe2b..fc1db2d 100644 --- a/src/styles/theme.js +++ b/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)", }, },