fix(app-signup): sdd scroll to signup form

eficode · Feb 10, 2021 · 9839476 · 9839476
1 parent 4ad54b8
commit 9839476
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.styled.tsx b/packages/game-app/src/_shared/components/TowColumnPage/TowColumnPage.styled.tsx
@@ -33,7 +33,7 @@ LeftColumn.displayName = 'LeftColumn';
 export const Logo = styled.div`
   width: 100px;
   position: absolute;
-  top: 16px;
+  top: 8px;
   left: 8%;
 
   svg {

diff --git a/packages/game-app/src/signup/components/Signup/Signup.styled.tsx b/packages/game-app/src/signup/components/Signup/Signup.styled.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Box } from '@pipeline/components';
+
+export const SignupContent = styled(Box)`
+  flex: 1;
+  overflow-y: scroll;
+  scrollbar-width: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+SignupContent.displayName = 'SignupContent';
diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -12,6 +12,7 @@ import { RoutingPath, useNavigateOnCondition, useNavigateTo, useNavigateOutsideT
 import { SignupInfo } from '../../types/signupInfo';
 import useSignup from '../../hooks/useSignup';
 import { signupValidationSchema } from '../../utils/validation';
+import { SignupContent } from './Signup.styled';
 
 type Props = {};
 
@@ -63,7 +64,7 @@ const Signup: React.FC<Props> = () => {
   return (
     <TowColumnPage
       left={
-        <Box>
+        <SignupContent>
           <Typography variant="title">{t('signup.title')}</Typography>
           <Box mt={5}>
             <FormProvider {...methods}>
@@ -92,23 +93,26 @@ const Signup: React.FC<Props> = () => {
                     placeholder={t('signup.form.email.placeholder')}
                   />
                 </Box>
-                <Box mt={3}>
-                  <FormTextField
-                    CustomInput={PasswordInput}
-                    name="password"
-                    label={t('signup.form.password.label')}
-                    labelDetails={t('auth.errors.passwordRequirements')}
-                    placeholder={t('signup.form.password.placeholder')}
-                  />
-                </Box>
-                <Box mt={3}>
-                  <FormTextField
-                    CustomInput={PasswordInput}
-                    name="repeatPassword"
-                    label={t('signup.form.repeatPassword.label')}
-                    placeholder={t('signup.form.repeatPassword.placeholder')}
-                  />
+                <Box mt={3} display="flex" flexDirection="row">
+                  <Box flex={1}>
+                    <FormTextField
+                      CustomInput={PasswordInput}
+                      name="password"
+                      label={t('signup.form.password.label')}
+                      labelDetails={t('auth.errors.passwordRequirements')}
+                      placeholder={t('signup.form.password.placeholder')}
+                    />
+                  </Box>
+                  <Box flex={1} ml={3}>
+                    <FormTextField
+                      CustomInput={PasswordInput}
+                      name="repeatPassword"
+                      label={t('signup.form.repeatPassword.label')}
+                      placeholder={t('signup.form.repeatPassword.placeholder')}
+                    />
+                  </Box>
                 </Box>
+
                 <Box mt={3}>
                   <FormSelect name="role" label={t('signup.form.roleLabel')} options={gameRoles} />
                 </Box>
@@ -145,7 +149,7 @@ const Signup: React.FC<Props> = () => {
               </form>
             </FormProvider>
           </Box>
-        </Box>
+        </SignupContent>
       }
     />
   );