From a8bb9df2de05e791eaf5b4c8ed52a11edb7a65ca Mon Sep 17 00:00:00 2001 From: "jakub.jozwiak" Date: Tue, 2 Mar 2021 01:27:08 +0100 Subject: [PATCH] feat(client): add login view styles --- packages/client/src/Routes.tsx | 6 +- .../src/containers/Login/Login.styled.ts | 58 +++++++++ .../Login.types.d.ts} | 2 +- .../client/src/containers/Login/index.tsx | 114 ++++++++++++++++++ .../Registration.styled.ts} | 0 .../Registration.types.d.ts} | 2 +- .../{SignUp => Registration}/index.tsx | 20 +-- .../src/containers/SignIn/SignIn.styled.ts | 16 --- .../client/src/containers/SignIn/index.tsx | 87 ------------- packages/client/src/containers/index.ts | 4 +- .../BackgroundLogo/BackgroundLogo.stories.tsx | 13 ++ .../BackgroundLogo/BackgroundLogo.styled.ts | 20 +++ .../src/elements/BackgroundLogo/index.tsx | 14 +++ .../src/elements/Button/Button.styled.ts | 2 +- .../client/src/elements/Card/Card.styled.ts | 5 +- .../elements/Copyright/Copyright.styled.ts | 2 +- .../Inputs/Checkbox/Checkbox.styled.ts | 30 ++--- .../client/src/elements/Link/Link.styled.ts | 4 - packages/client/src/elements/index.ts | 1 + packages/client/src/icons/EmailIcon.tsx | 20 +++ packages/client/src/icons/LockIcon.tsx | 6 +- .../src/icons/SmartGateBackgroundLogo.tsx | 21 ++++ packages/client/src/icons/SmartGateLogo.tsx | 34 ++++++ packages/client/src/icons/TickIcon.tsx | 4 +- packages/client/src/icons/index.ts | 3 + .../src/providers/StylesProvider/index.tsx | 1 - packages/client/src/theme/GlobalStyles.ts | 2 +- packages/client/src/theme/Theme.ts | 2 +- 28 files changed, 345 insertions(+), 148 deletions(-) create mode 100644 packages/client/src/containers/Login/Login.styled.ts rename packages/client/src/containers/{SignIn/SignIn.types.d.ts => Login/Login.types.d.ts} (67%) create mode 100644 packages/client/src/containers/Login/index.tsx rename packages/client/src/containers/{SignUp/SignUp.styled.ts => Registration/Registration.styled.ts} (100%) rename packages/client/src/containers/{SignUp/SignUp.types.d.ts => Registration/Registration.types.d.ts} (73%) rename packages/client/src/containers/{SignUp => Registration}/index.tsx (89%) delete mode 100644 packages/client/src/containers/SignIn/SignIn.styled.ts delete mode 100644 packages/client/src/containers/SignIn/index.tsx create mode 100644 packages/client/src/elements/BackgroundLogo/BackgroundLogo.stories.tsx create mode 100644 packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts create mode 100644 packages/client/src/elements/BackgroundLogo/index.tsx create mode 100644 packages/client/src/icons/EmailIcon.tsx create mode 100644 packages/client/src/icons/SmartGateBackgroundLogo.tsx create mode 100644 packages/client/src/icons/SmartGateLogo.tsx diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx index 05c9b218..72d1e090 100644 --- a/packages/client/src/Routes.tsx +++ b/packages/client/src/Routes.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { routes } from './constants'; -import { Dashboard, SignIn, SignUp } from './containers'; +import { Dashboard, Login, Registration } from './containers'; const Routes = () => ( - - + + diff --git a/packages/client/src/containers/Login/Login.styled.ts b/packages/client/src/containers/Login/Login.styled.ts new file mode 100644 index 00000000..f549c3fd --- /dev/null +++ b/packages/client/src/containers/Login/Login.styled.ts @@ -0,0 +1,58 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + min-height: 100%; + padding-bottom: 5vh; +`; + +export const LinksContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-top: 30px; + height: 50px; +`; + +export const LogoWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; +`; + +export const CardContainer = styled.div` + max-width: 500px; + width: 100%; + margin: 10px; +`; + +export const ActionsContainer = styled.div` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; + flex-wrap: wrap; +`; + +export const LoginButtonContainer = styled.div( + ({ theme: { breakpoints, down } }) => ` + max-width: 200px; + width: 100%; + margin-left: 10px; + ${down(breakpoints.sm)} { + max-width: 100%; + margin-left: 0; + margin-top: 20px; + } +`, +); + +export const IconWrapper = styled.div` + color: ${({ theme }) => theme.palette.colors.orange}; +`; diff --git a/packages/client/src/containers/SignIn/SignIn.types.d.ts b/packages/client/src/containers/Login/Login.types.d.ts similarity index 67% rename from packages/client/src/containers/SignIn/SignIn.types.d.ts rename to packages/client/src/containers/Login/Login.types.d.ts index 4bdb7bfd..dd481ee7 100644 --- a/packages/client/src/containers/SignIn/SignIn.types.d.ts +++ b/packages/client/src/containers/Login/Login.types.d.ts @@ -1,4 +1,4 @@ -export interface SignInInputs { +export interface LoginInputs { email: string; password: string; keepMeLoggedIn?: boolean; diff --git a/packages/client/src/containers/Login/index.tsx b/packages/client/src/containers/Login/index.tsx new file mode 100644 index 00000000..dcd4e530 --- /dev/null +++ b/packages/client/src/containers/Login/index.tsx @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { useHistory } from 'react-router-dom'; + +import { BackgroundLogo, Button, Card, Checkbox, Form, Link, TextField } from '../../elements'; +import { useAuth, useSnackbar } from '../../hooks'; +import { EmailIcon, SmartGateLogo } from '../../icons'; +import { + ActionsContainer, + CardContainer, + Container, + IconWrapper, + LinksContainer, + LoginButtonContainer, + LogoWrapper, +} from './Login.styled'; +import { LoginInputs } from './Login.types'; + +const Login = () => { + const history = useHistory(); + const [loading, setLoading] = useState(false); + const showSnackbar = useSnackbar(); + const { register, handleSubmit, errors, reset, trigger } = useForm({ + mode: 'onBlur', + }); + const auth = useAuth(); + + if (!auth) { + return null; + } + + const onSubmit = async (values: LoginInputs) => { + setLoading(true); + const isValid = await trigger(); + + if (!isValid) { + setLoading(false); + return; + } + + try { + await auth.login(values); + reset(); + history.push('/dashboard'); + } catch (error) { + if (!error.response) { + showSnackbar({ message: error.message, severity: 'error' }); + } else { + const { message } = error.response.data; + showSnackbar({ message, severity: 'error' }); + } + } finally { + setLoading(false); + } + }; + + const emailIcon = ( + + + + ); + + return ( + + + + + + + +
+ + + + + + + + + + + Forgot password? + + + I don’t have an account + + + +
+ + + ); +}; + +export default Login; diff --git a/packages/client/src/containers/SignUp/SignUp.styled.ts b/packages/client/src/containers/Registration/Registration.styled.ts similarity index 100% rename from packages/client/src/containers/SignUp/SignUp.styled.ts rename to packages/client/src/containers/Registration/Registration.styled.ts diff --git a/packages/client/src/containers/SignUp/SignUp.types.d.ts b/packages/client/src/containers/Registration/Registration.types.d.ts similarity index 73% rename from packages/client/src/containers/SignUp/SignUp.types.d.ts rename to packages/client/src/containers/Registration/Registration.types.d.ts index 66da8ad1..ecf1407b 100644 --- a/packages/client/src/containers/SignUp/SignUp.types.d.ts +++ b/packages/client/src/containers/Registration/Registration.types.d.ts @@ -1,4 +1,4 @@ -export interface SignUpInputs { +export interface RegistrationInputs { firstName: string; lastName: string; email: string; diff --git a/packages/client/src/containers/SignUp/index.tsx b/packages/client/src/containers/Registration/index.tsx similarity index 89% rename from packages/client/src/containers/SignUp/index.tsx rename to packages/client/src/containers/Registration/index.tsx index c7acb85c..5129f7af 100644 --- a/packages/client/src/containers/SignUp/index.tsx +++ b/packages/client/src/containers/Registration/index.tsx @@ -6,23 +6,25 @@ import { regex } from '../../constants'; import { Button, Card, Form, Link, TextField } from '../../elements'; import { useAuth, useSnackbar } from '../../hooks'; import { UserIcon } from '../../icons'; -import { Container } from './SignUp.styled'; -import { SignUpInputs } from './SignUp.types'; +import { Container } from './Registration.styled'; +import { RegistrationInputs } from './Registration.types'; -export default function Index() { +const Registration = () => { const showSnackbar = useSnackbar(); const history = useHistory(); const [loading, setLoading] = useState(false); - const { register, handleSubmit, errors, reset, trigger, getValues } = useForm({ - mode: 'onBlur', - }); + const { register, handleSubmit, errors, reset, trigger, getValues } = useForm( + { + mode: 'onBlur', + }, + ); const auth = useAuth(); if (!auth) { return null; } - const onSubmit = async (values: SignUpInputs) => { + const onSubmit = async (values: RegistrationInputs) => { setLoading(true); const isValid = await trigger(); @@ -99,4 +101,6 @@ export default function Index() { ); -} +}; + +export default Registration; diff --git a/packages/client/src/containers/SignIn/SignIn.styled.ts b/packages/client/src/containers/SignIn/SignIn.styled.ts deleted file mode 100644 index e842272c..00000000 --- a/packages/client/src/containers/SignIn/SignIn.styled.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.div` - width: 100%; - display: flex; - justify-content: center; - margin-top: 250px; -`; - -export const LinksContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; - margin-top: 30px; -`; diff --git a/packages/client/src/containers/SignIn/index.tsx b/packages/client/src/containers/SignIn/index.tsx deleted file mode 100644 index 9ee2af25..00000000 --- a/packages/client/src/containers/SignIn/index.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useState } from 'react'; -import { useForm } from 'react-hook-form'; -import { useHistory } from 'react-router-dom'; - -import { Button, Card, Checkbox, Form, Link, TextField } from '../../elements'; -import { useAuth, useSnackbar } from '../../hooks'; -import { UserIcon } from '../../icons'; -import { Container, LinksContainer } from './SignIn.styled'; -import { SignInInputs } from './SignIn.types'; - -const SignIn = () => { - const history = useHistory(); - const [loading, setLoading] = useState(false); - const showSnackbar = useSnackbar(); - const { register, handleSubmit, errors, reset, trigger } = useForm({ - mode: 'onBlur', - }); - const auth = useAuth(); - - if (!auth) { - return null; - } - - const onSubmit = async (values: SignInInputs) => { - setLoading(true); - const isValid = await trigger(); - - if (!isValid) { - setLoading(false); - return; - } - - try { - await auth.login(values); - reset(); - history.push('/dashboard'); - } catch (error) { - if (!error.response) { - showSnackbar({ message: error.message, severity: 'error' }); - } else { - const { message } = error.response.data; - showSnackbar({ message, severity: 'error' }); - } - } finally { - setLoading(false); - } - }; - - return ( - - -

Sign in

-
- } - /> - - - - - Forgot password? - Dont have an account? Sign Up - - -
- - ); -}; - -export default SignIn; diff --git a/packages/client/src/containers/index.ts b/packages/client/src/containers/index.ts index 7a2a5309..8ac27db0 100644 --- a/packages/client/src/containers/index.ts +++ b/packages/client/src/containers/index.ts @@ -1,4 +1,4 @@ export { default as Dashboard } from './Dashboard'; export { default as DefaultLayout } from './DefaultLayout'; -export { default as SignIn } from './SignIn'; -export { default as SignUp } from './SignUp'; +export { default as Login } from './Login'; +export { default as Registration } from './Registration'; diff --git a/packages/client/src/elements/BackgroundLogo/BackgroundLogo.stories.tsx b/packages/client/src/elements/BackgroundLogo/BackgroundLogo.stories.tsx new file mode 100644 index 00000000..39eee057 --- /dev/null +++ b/packages/client/src/elements/BackgroundLogo/BackgroundLogo.stories.tsx @@ -0,0 +1,13 @@ +import { Meta, Story } from '@storybook/react/types-6-0'; +import React from 'react'; + +import BackgroundLogo from '.'; + +export default { + title: 'Elements/BackgroundLogo', + component: BackgroundLogo, +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); diff --git a/packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts b/packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts new file mode 100644 index 00000000..a39dfbaf --- /dev/null +++ b/packages/client/src/elements/BackgroundLogo/BackgroundLogo.styled.ts @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const BackgroundLogoWrapper = styled.div( + ({ theme: { breakpoints, up, palette } }) => ` + display: none; + ${up(breakpoints.lg)} { + position: fixed; + z-index: -999; + top: -2%; + right: -15%; + left: 50%; + bottom: -2%; + display: flex; + justify-content: center; + align-items: stretch; + color: ${palette.background.paper}; + opacity: 0.75 + } + `, +); diff --git a/packages/client/src/elements/BackgroundLogo/index.tsx b/packages/client/src/elements/BackgroundLogo/index.tsx new file mode 100644 index 00000000..96228c72 --- /dev/null +++ b/packages/client/src/elements/BackgroundLogo/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { SmartGateBackgroundLogo } from '../../icons'; +import { BackgroundLogoWrapper } from './BackgroundLogo.styled'; + +const BackgroundLogo = () => ( + + + +); + +BackgroundLogo.displayName = 'BackgroundLogo'; + +export default BackgroundLogo; diff --git a/packages/client/src/elements/Button/Button.styled.ts b/packages/client/src/elements/Button/Button.styled.ts index b3cb5488..525c6962 100644 --- a/packages/client/src/elements/Button/Button.styled.ts +++ b/packages/client/src/elements/Button/Button.styled.ts @@ -19,7 +19,7 @@ export const StyledButton = styled.button( margin: ${margin}; text-align: center; border: none; - min-width: 220px; + min-width: 100px; cursor: pointer; line-height: 16px; transition: 0.15s; diff --git a/packages/client/src/elements/Card/Card.styled.ts b/packages/client/src/elements/Card/Card.styled.ts index 392fbb7b..058f72eb 100644 --- a/packages/client/src/elements/Card/Card.styled.ts +++ b/packages/client/src/elements/Card/Card.styled.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { CardProps } from './Card.types'; export const Wrapper = styled.div( - ({ minWidth, theme: { sizes, palette } }) => ` + ({ minWidth, theme: { sizes, palette, breakpoints, down } }) => ` display: flex; flex-direction: column; background: ${palette.background.paper}; @@ -11,5 +11,8 @@ export const Wrapper = styled.div( border-radius: ${sizes.borderRadius}; padding: 50px; min-width: ${minWidth}; + ${down(breakpoints.xs)} { + padding: 40px 10px + } `, ); diff --git a/packages/client/src/elements/Copyright/Copyright.styled.ts b/packages/client/src/elements/Copyright/Copyright.styled.ts index 3a3a7f21..65283940 100644 --- a/packages/client/src/elements/Copyright/Copyright.styled.ts +++ b/packages/client/src/elements/Copyright/Copyright.styled.ts @@ -5,6 +5,6 @@ export const Wrapper = styled.div` width: 100%; justify-content: center; align-items: center; - height: 50px; + height: 70px; color: ${({ theme }) => theme.palette.text.secondary}; `; diff --git a/packages/client/src/elements/Inputs/Checkbox/Checkbox.styled.ts b/packages/client/src/elements/Inputs/Checkbox/Checkbox.styled.ts index 51bc42e0..5ecb818b 100644 --- a/packages/client/src/elements/Inputs/Checkbox/Checkbox.styled.ts +++ b/packages/client/src/elements/Inputs/Checkbox/Checkbox.styled.ts @@ -5,11 +5,10 @@ import { CheckboxLabelProps, CheckboxWrapperProps, CheckmarkProps } from './Chec export const CheckboxLabel = styled.label` display: flex; align-items: center; - font-size: 16px; + height: 26px; color: ${({ theme }) => theme.palette.text.secondary}; - line-height: 24px; position: relative; - padding-left: 28px; + padding-left: 36px; cursor: pointer; user-select: none; ${({ required, theme }) => @@ -25,12 +24,12 @@ export const CheckboxLabel = styled.label` export const Checkmark = styled.span( ({ isError, theme: { palette } }) => ` position: absolute; - top: calc(50% - 10px); + top: calc(50% - 13px); left: 0; - height: 20px; - width: 20px; + height: 26px; + width: 26px; background-color: ${palette.background.paper}; - border: 2px solid ${palette.primary.dark}; + border: 3px solid ${palette.primary.dark}; border-radius: 6px; ${ @@ -44,10 +43,10 @@ export const Checkmark = styled.span( opacity: 0; z-index: 2; position: absolute; - width: 8px; - height: 7px; - top: 5px; - left: 4px; + width: 45%; + height: 45%; + top: 6px; + left: 6px; transition: opacity 200ms ease-out; } @@ -55,10 +54,11 @@ export const Checkmark = styled.span( content: ''; position: absolute; opacity: 0; - left: 1px; - top: 1px; - width: 14px; - height: 14px; + left: 2px; + top: 2px; + display: flex; + width: 16px; + height: 16px; background: ${palette.primary.dark}; border-radius: 4px; transition: opacity 200ms ease-out; diff --git a/packages/client/src/elements/Link/Link.styled.ts b/packages/client/src/elements/Link/Link.styled.ts index d0cc93b4..fa2a7110 100644 --- a/packages/client/src/elements/Link/Link.styled.ts +++ b/packages/client/src/elements/Link/Link.styled.ts @@ -18,10 +18,6 @@ const getLinkColor = ({ $colorVariant, theme }: GetLinkColorProps) => { }; const baseLink = ({ theme: { palette } }: BaseLinkProps) => css` - font-weight: 500; - font-size: 18px; - line-height: 24px; - text-decoration: none; color: ${getLinkColor}; &:disabled { diff --git a/packages/client/src/elements/index.ts b/packages/client/src/elements/index.ts index 2e92a09e..6394d92d 100644 --- a/packages/client/src/elements/index.ts +++ b/packages/client/src/elements/index.ts @@ -1,3 +1,4 @@ +export { default as BackgroundLogo } from './BackgroundLogo'; export { default as Button } from './Button'; export { default as Card } from './Card'; export { default as Copyright } from './Copyright'; diff --git a/packages/client/src/icons/EmailIcon.tsx b/packages/client/src/icons/EmailIcon.tsx new file mode 100644 index 00000000..795520ca --- /dev/null +++ b/packages/client/src/icons/EmailIcon.tsx @@ -0,0 +1,20 @@ +import React, { forwardRef, memo, Ref, SVGProps } from 'react'; + +const EmailIcon = (props: SVGProps, svgRef?: Ref) => ( + + + +); + +export default memo(forwardRef(EmailIcon)); diff --git a/packages/client/src/icons/LockIcon.tsx b/packages/client/src/icons/LockIcon.tsx index f8446a27..24f92deb 100644 --- a/packages/client/src/icons/LockIcon.tsx +++ b/packages/client/src/icons/LockIcon.tsx @@ -2,10 +2,10 @@ import React, { forwardRef, memo, Ref, SVGProps } from 'react'; const LockIcon = (props: SVGProps, svgRef?: Ref) => ( , svgRef?: Ref) => ( + + + +); + +export default memo(forwardRef(SmartGateBackgroundLogo)); diff --git a/packages/client/src/icons/SmartGateLogo.tsx b/packages/client/src/icons/SmartGateLogo.tsx new file mode 100644 index 00000000..a266f562 --- /dev/null +++ b/packages/client/src/icons/SmartGateLogo.tsx @@ -0,0 +1,34 @@ +import React, { forwardRef, memo, Ref, SVGProps } from 'react'; + +const SmartGateLogo = (props: SVGProps, svgRef?: Ref) => ( + + + + + + + + + +); + +export default memo(forwardRef(SmartGateLogo)); diff --git a/packages/client/src/icons/TickIcon.tsx b/packages/client/src/icons/TickIcon.tsx index ac5630d9..93077fef 100644 --- a/packages/client/src/icons/TickIcon.tsx +++ b/packages/client/src/icons/TickIcon.tsx @@ -2,8 +2,8 @@ import React, { forwardRef, memo, Ref, SVGProps } from 'react'; const TickIcon = (props: SVGProps, svgRef?: Ref) => ( { const { themeType } = useThemeType(); - console.log('test'); return ( diff --git a/packages/client/src/theme/GlobalStyles.ts b/packages/client/src/theme/GlobalStyles.ts index 9d20669a..5dac39f3 100644 --- a/packages/client/src/theme/GlobalStyles.ts +++ b/packages/client/src/theme/GlobalStyles.ts @@ -7,7 +7,6 @@ const GlobalStyles = createGlobalStyle` -moz-osx-font-smoothing: grayscale; } - html, body { height: 100%; padding: 0; @@ -18,6 +17,7 @@ const GlobalStyles = createGlobalStyle` } main { + display: flex; flex: 1 0 auto; height: 100%; } diff --git a/packages/client/src/theme/Theme.ts b/packages/client/src/theme/Theme.ts index f03138a2..0ffa338d 100644 --- a/packages/client/src/theme/Theme.ts +++ b/packages/client/src/theme/Theme.ts @@ -6,7 +6,7 @@ export enum ThemeType { export const getTheme = (themeType: ThemeType) => ({ type: themeType, breakpoints: { - xs: 0, + xs: 375, sm: 600, md: 960, lg: 1120,