feat(app-signup): update ui

eficode · Jan 28, 2021 · 2d69667 · 2d69667
1 parent fbd6ec5
commit 2d69667
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 56 deletions.
diff --git a/packages/game-app/src/_shared/components/SelectInput/SelectInput.styled.tsx b/packages/game-app/src/_shared/components/SelectInput/SelectInput.styled.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 import Box from '../Box';
 import React from 'react';
-import Typography from '../Typography';
 
 export const Select = styled.select`
   width: 100%;
   height: 40px;
   padding: 5px 10px;
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 4px;
+  border: 1px solid #d7d2cb;
 
   &:focus {
     outline: none;

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FormTextField } from '@pipeline/form';
-import { Box, Button, Link, PasswordInput, Typography, TowColumnPage } from '@pipeline/components';
+import { Box, Button, Link, PasswordInput, TowColumnPage, Typography } 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 { useLocation } from 'react-router-dom';
+import { RoutingPath, useNavigateTo } from '@pipeline/routing';
 import { LoginForm } from './Login.styled';
 
 type Props = {};
@@ -27,12 +27,9 @@ const Login: React.FC<Props> = () => {
 
   const submit = useMemo(() => handleSubmit(login), [login, handleSubmit]);
 
-  const history = useHistory();
   const location = useLocation<{ desiredUrl: string }>();
 
-  const goToSignUp = useCallback(() => {
-    history.push(RoutingPath.Signup, location.state);
-  }, [history, location]);
+  const goToSignUp = useNavigateTo(RoutingPath.Signup, location.state);
 
   return (
     <TowColumnPage
@@ -58,7 +55,7 @@ const Login: React.FC<Props> = () => {
           </Box>
         </LoginForm>
       }
-    ></TowColumnPage>
+    />
   );
 };
 

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -1,22 +1,20 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { FormSelect, FormTextField } from '@pipeline/form';
+import { useLocation } from 'react-router-dom';
 import { yupResolver } from '@hookform/resolvers/yup';
+
+import { FormSelect, FormTextField } from '@pipeline/form';
+import { useDevOpsMaturities, useGameRoles } from '@pipeline/dynamicData';
+import { Box, Button, Link, PasswordInput, TowColumnPage, Typography } from '@pipeline/components';
+import { useTranslate } from '@pipeline/i18n';
+import { RoutingPath, useNavigateOnCondition, useNavigateTo } from '@pipeline/routing';
+
 import { SignupInfo } from '../../types/signupInfo';
 import useSignup from '../../hooks/useSignup';
-import { useDevOpsMaturities, useGameRoles } from '@pipeline/dynamicData';
 import { signupValidationSchema } from '../../utils/validation';
-import { useTranslate } from '@pipeline/i18n';
-import { PasswordInput } from '@pipeline/components';
-import { RoutingPath, useNavigateOnCondition } from '@pipeline/routing';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Link, Button } from '@pipeline/components';
-import styled from 'styled-components';
 
 type Props = {};
 
-const SignupForm = styled.div``;
-
 const Signup: React.FC<Props> = () => {
   const t = useTranslate();
 
@@ -55,44 +53,52 @@ const Signup: React.FC<Props> = () => {
     [signup, handleSubmit, location],
   );
 
-  const history = useHistory();
-
-  const goToSignIn = useCallback(() => {
-    history.push(RoutingPath.Login, location.state);
-  }, [history, location]);
+  const goToSignIn = useNavigateTo(RoutingPath.Login, location.state);
 
   useNavigateOnCondition(signupSuccess, RoutingPath.EmailVerificationRequired);
 
   return (
-    <div className="signup">
-      <SignupForm className="content card">
-        <h2>{t('signup.title')}</h2>
-        <FormProvider {...methods}>
-          <form>
-            <FormTextField type="email" name="email" label={t('signup.form.emailLabel')} />
-            <FormTextField CustomInput={PasswordInput} name="password" label={t('signup.form.passwordLabel')} />
-            <FormTextField
-              CustomInput={PasswordInput}
-              name="repeatPassword"
-              label={t('signup.form.repeatPasswordLabel')}
-            />
-            <FormSelect name="role" label={t('signup.form.roleLabel')} options={gameRoles} />
-            <FormSelect name="devOpsMaturity" label={t('signup.form.maturityLabel')} options={devOpsMaturities} />
-            <div className="text-center">
-              <Button id="signup-button" label={t('signup.form.buttonText')} onClick={submit} />
-            </div>
-
-            {signupLoading ? <span>Loading</span> : null}
-            {signupTranslateError ? <span className="error-message">{signupTranslateError}</span> : null}
-            {signupSuccess ? <span>Success</span> : null}
-            <div className="text-center">
-              <span>{t('signup.alreadyAccount')}</span>&nbsp;
-              <Link onClick={goToSignIn}>{t('signup.goToSignIn')}</Link>
-            </div>
-          </form>
-        </FormProvider>
-      </SignupForm>
-    </div>
+    <TowColumnPage
+      left={
+        <Box>
+          <Typography variant="title">{t('signup.title')}</Typography>
+          <Box mt={5}>
+            <FormProvider {...methods}>
+              <form>
+                <FormTextField type="email" name="email" label={t('signup.form.emailLabel')} />
+                <Box mt={3}>
+                  <FormTextField CustomInput={PasswordInput} name="password" label={t('signup.form.passwordLabel')} />
+                </Box>
+                <Box mt={3}>
+                  <FormTextField
+                    CustomInput={PasswordInput}
+                    name="repeatPassword"
+                    label={t('signup.form.repeatPasswordLabel')}
+                  />
+                </Box>
+                <Box mt={3}>
+                  <FormSelect name="role" label={t('signup.form.roleLabel')} options={gameRoles} />
+                </Box>
+                <Box mt={3}>
+                  <FormSelect name="devOpsMaturity" label={t('signup.form.maturityLabel')} options={devOpsMaturities} />
+                </Box>
+                <Box mt={5} textAlign="center">
+                  <Button id="signup-button" label={t('signup.form.buttonText')} onClick={submit} />
+                </Box>
+
+                {signupLoading ? <span>Loading</span> : null}
+                {signupTranslateError ? <span className="error-message">{signupTranslateError}</span> : null}
+                {signupSuccess ? <span>Success</span> : null}
+                <Box mt={4} display="flex" flexDirection="row" justifyContent="center">
+                  <span>{t('signup.alreadyAccount')}</span>&nbsp;
+                  <Link onClick={goToSignIn}>{t('signup.goToSignIn')}</Link>
+                </Box>
+              </form>
+            </FormProvider>
+          </Box>
+        </Box>
+      }
+    />
   );
 };