feat(app-login): update login ui

eficode · Jan 28, 2021 · fbd6ec5 · fbd6ec5
1 parent 0432d84
commit fbd6ec5
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 32 deletions.
diff --git a/packages/game-app/src/_shared/components/Dialog/Dialog.tsx b/packages/game-app/src/_shared/components/Dialog/Dialog.tsx
@@ -27,7 +27,7 @@ const Dialog: React.FC<Props> = ({ open, title, children }) => {
   return (
     <GlassOverlay open={open}>
       <DialogContainer>
-        <Typography variant="title">{title}</Typography>
+        <Typography variant="dialogHead">{title}</Typography>
         {children}
       </DialogContainer>
     </GlassOverlay>

diff --git a/packages/game-app/src/_shared/components/Input/Input.styled.tsx b/packages/game-app/src/_shared/components/Input/Input.styled.tsx
@@ -9,7 +9,7 @@ export const StyledInput = styled.input<{ variant: InputVariants; withIcon?: boo
   height: 40px;
   padding: 5px 10px;
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 4px;
 
   &:focus {
     outline: none;

diff --git a/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.styled.tsx b/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.styled.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { flex, FlexProps } from 'styled-system';
+
+export const TowColumnsContainer = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+`;
+
+TowColumnsContainer.displayName = 'TowColumnsContainer';
+
+export const Column = styled.div<FlexProps>`
+  ${flex}
+`;
+
+Column.displayName = 'Column';
+
+export const LeftColumn = styled(Column)`
+  padding: 40px 8%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #eeeeee;
+  box-sizing: border-box;
+  max-width: 45%;
+  flex: 0.45 0.45 auto;
+`;
+
+LeftColumn.displayName = 'LeftColumn';
+
+export const Logo = styled.div`
+  width: 100px;
+  position: absolute;
+  top: 16px;
+  left: 8%;
+
+  svg {
+    max-width: 100%;
+  }
+`;
+
+Logo.displayName = 'Logo';
diff --git a/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.tsx b/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Column, LeftColumn, Logo, TowColumnsContainer } from './TowColumnPage.styled';
+import { ReactComponent as TextLogo } from '@assets/images/eficode-text-logo.svg';
+
+type Props = {
+  left: React.ReactElement;
+};
+
+const TowColumnPage: React.FC<Props> = ({ left }) => {
+  return (
+    <TowColumnsContainer>
+      <Logo>
+        <TextLogo />
+      </Logo>
+      <LeftColumn>{left}</LeftColumn>
+      <Column flex={0.55}></Column>
+    </TowColumnsContainer>
+  );
+};
+
+TowColumnPage.displayName = 'TowColumnPage';
+
+export default TowColumnPage;
diff --git a/packages/game-app/src/_shared/components/TowColumnPage/index.ts b/packages/game-app/src/_shared/components/TowColumnPage/index.ts
@@ -0,0 +1,3 @@
+import TowColumnPage from './TowColumnPage';
+
+export default TowColumnPage;
diff --git a/packages/game-app/src/_shared/components/Typography/Typography.stories.tsx b/packages/game-app/src/_shared/components/Typography/Typography.stories.tsx
@@ -20,7 +20,7 @@ export default {
 const Template: Story<React.ComponentProps<typeof Typography>> = ({ children }) => {
   return (
     <Container>
-      <Typography variant="title">title: {children}</Typography>
+      <Typography variant="dialogHead">dialogHead: {children}</Typography>
       <Typography variant="content">content: {children}</Typography>
       <Typography variant="label">label: {children}</Typography>
     </Container>

diff --git a/packages/game-app/src/_shared/components/Typography/Typography.tsx b/packages/game-app/src/_shared/components/Typography/Typography.tsx
@@ -11,7 +11,7 @@ import {
   textAlign,
 } from 'styled-system';
 
-type TypographyVariants = 'label' | 'title' | 'content' | 'contentHead' | 'bigTitle';
+type TypographyVariants = 'label' | 'title' | 'content' | 'contentHead' | 'bigTitle' | 'dialogHead';
 
 type CustomTypographyProps = { variant?: TypographyVariants } & TypographyProps &
   MarginProps &
@@ -26,6 +26,11 @@ const Typography = styled.div<CustomTypographyProps>`
         fontFamily: 'Montserrat',
       },
       title: {
+        fontSize: '32px',
+        fontFamily: 'Montserrat',
+        fontWeight: 'bold',
+      },
+      dialogHead: {
         fontSize: '24px',
         fontFamily: 'Montserrat',
         fontWeight: 'bold',

diff --git a/packages/game-app/src/_shared/components/index.ts b/packages/game-app/src/_shared/components/index.ts
@@ -20,6 +20,7 @@ import EstimationInCard from './EstimationInCard';
 import Input from './Input';
 import GlassOverlay from './GlassOverlay';
 import Icon from './Icon';
+import TowColumnPage from './TowColumnPage';
 
 export {
   TextInput,
@@ -44,4 +45,5 @@ export {
   EstimationInCard,
   GlassOverlay,
   Icon,
+  TowColumnPage,
 };
diff --git a/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx b/packages/game-app/src/gameView/components/ExpandableRule/ExpandableRule.tsx
@@ -19,7 +19,7 @@ const ExpandableRule: React.FC<Props> = ({ title, children }) => {
     <RuleWrapper collapsed={collapsed}>
       <RuleHeader collapsed={collapsed} p={3} onClick={toggle}>
         <Icon>{collapsed ? <ExpandIcon /> : <CollapseIcon />}</Icon>
-        <Typography variant="title" fontWeight="600">
+        <Typography variant="dialogHead" fontWeight="600">
           {title}
         </Typography>
       </RuleHeader>

diff --git a/packages/game-app/src/gameView/components/ScenarioPanel/ScenarioPanel.tsx b/packages/game-app/src/gameView/components/ScenarioPanel/ScenarioPanel.tsx
@@ -10,7 +10,7 @@ const ScenarioPanel: React.FC<Props> = () => {
 
   return (
     <ExpandableTopPanel label="Scenario">
-      <Typography variant="title" as="h2">
+      <Typography variant="dialogHead" as="h2">
         {scenario?.title}
       </Typography>
       <Typography variant="contentHead" as="div" mt={2}>

diff --git a/packages/game-app/src/login/components/Login/Login.styled.tsx b/packages/game-app/src/login/components/Login/Login.styled.tsx
@@ -0,0 +1,8 @@
+import { animations } from '@pipeline/components';
+import styled from 'styled-components';
+
+export const LoginForm = styled.div<{ error?: boolean }>`
+  ${props => props.error && animations.shake()}
+`;
+
+LoginForm.displayName = 'LoginForm';
diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -1,20 +1,15 @@
 import React, { useCallback, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FormTextField } from '@pipeline/form';
-import { animations, PasswordInput } from '@pipeline/components';
+import { Box, Button, Link, PasswordInput, Typography, TowColumnPage } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { useLogin } from '@pipeline/auth';
 import { useHistory, useLocation } from 'react-router-dom';
 import { RoutingPath } from '@pipeline/routing';
-import { Button, Link } from '@pipeline/components';
-import styled from 'styled-components';
+import { LoginForm } from './Login.styled';
 
 type Props = {};
 
-const LoginForm = styled.div<{ error?: boolean }>`
-  ${props => props.error && animations.shake()}
-`;
-
 const Login: React.FC<Props> = () => {
   const t = useTranslate();
 
@@ -40,24 +35,30 @@ const Login: React.FC<Props> = () => {
   }, [history, location]);
 
   return (
-    <div className="login">
-      <LoginForm className="content card" error={!!loginTranslateError}>
-        <h2>{t('login.title')}</h2>
-        <FormProvider {...methods}>
-          <FormTextField name="email" label={t('login.form.emailLabel')} />
-          <FormTextField CustomInput={PasswordInput} name="password" label={t('login.form.passwordLabel')} />
-          <div className="text-center">
-            <Button label={t('login.form.buttonText')} onClick={submit} />
-          </div>
-          {loginTranslateError ? <span className="error-message">{loginTranslateError}</span> : null}
-          {loginLoading ? <span>Loading</span> : null}
-          <div className="text-center">
-            <span>{t('login.notYetAccount')}</span>&nbsp;
-            <Link onClick={goToSignUp}>{t('login.goToSignup')}</Link>
-          </div>
-        </FormProvider>
-      </LoginForm>
-    </div>
+    <TowColumnPage
+      left={
+        <LoginForm error={!!loginTranslateError}>
+          <Typography variant="title">{t('login.title')}</Typography>
+          <Box mt={5}>
+            <FormProvider {...methods}>
+              <FormTextField name="email" label={t('login.form.emailLabel')} />
+              <Box mt={3}>
+                <FormTextField CustomInput={PasswordInput} name="password" label={t('login.form.passwordLabel')} />
+              </Box>
+              <Box textAlign="center" mt={5}>
+                <Button label={t('login.form.buttonText')} onClick={submit} />
+              </Box>
+              {loginTranslateError ? <span className="error-message">{loginTranslateError}</span> : null}
+              {loginLoading ? <span>Loading</span> : null}
+              <Box display="flex" flexDirection="row" justifyContent="center" mt={4}>
+                <span>{t('login.notYetAccount')}</span>&nbsp;
+                <Link onClick={goToSignUp}>{t('login.goToSignup')}</Link>
+              </Box>
+            </FormProvider>
+          </Box>
+        </LoginForm>
+      }
+    ></TowColumnPage>
   );
 };
 

diff --git a/packages/game-app/src/theme.ts b/packages/game-app/src/theme.ts
@@ -4,7 +4,7 @@ const theme: DefaultTheme = {
   input: {
     variants: {
       default: {
-        border: '1px solid #9a9a9a',
+        border: '1px solid #D7D2CB',
       },
       clear: {
         border: 'none',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import TowColumnPage from './TowColumnPage';

		export default TowColumnPage;