feat(style): revamp of the login page (#107)

* feat(style): revamp of the login page * fix: remove visible dividers * fix: remove userswitch button
graasp · Jul 17, 2023 · 11f83de · 11f83de
1 parent 78f5337
commit 11f83de
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 145 deletions.
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -7,7 +7,7 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-import { COOKIE_KEYS, Member } from '@graasp/sdk';
+import { Member } from '@graasp/sdk';
 
 import {
   EMAIL_SIGN_IN_FIELD_ID,

diff --git a/src/components/FullscreenContainer.tsx b/src/components/FullscreenContainer.tsx
@@ -13,8 +13,22 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
     flexDirection="column"
     alignItems="center"
     justifyContent="center"
+    bgcolor="#f6f7fb"
+    sx={{
+      backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f2f2ff' fill-opacity='0.82' fill-rule='evenodd'/%3E%3C/svg%3E")`,
+    }}
   >
-    {children}
+    <Box
+      bgcolor="white"
+      border="1px solid #eaeaf7"
+      borderRadius={3}
+      px={{ xs: 2, sm: 8 }}
+      py={{ xs: 2, sm: 6 }}
+      m={4}
+      boxShadow="0px 0px 20px 5px rgba(44, 47, 240, 0.08)"
+    >
+      {children}
+    </Box>
   </Box>
 );
 

diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
@@ -5,6 +5,7 @@ import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { Stack } from '@mui/material';
 import Box from '@mui/material/Box';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
@@ -26,10 +27,8 @@ import { SIGN_IN_METHODS } from '../types/signInMethod';
 import { emailValidator, passwordValidator } from '../utils/validation';
 import EmailInput from './EmailInput';
 import FullscreenContainer from './FullscreenContainer';
-import StyledDivider from './StyledDivider';
 import StyledTextField from './StyledTextField';
 import SuccessContent from './SuccessContent';
-import UserSwitch from './UserSwitch';
 
 const {
   SIGN_IN_BUTTON,
@@ -148,88 +147,83 @@ const SignIn: FC = () => {
   const renderSignInForm = () => (
     <>
       <FormControl>
-        <EmailInput
-          value={email}
-          setValue={setEmail}
-          id={EMAIL_SIGN_IN_FIELD_ID}
-          onKeyPress={handleKeypress}
-          shouldValidate={shouldValidate}
-        />
-        {signInMethod === SIGN_IN_METHODS.PASSWORD && (
-          <>
-            <StyledTextField
-              required
-              label={t(PASSWORD_FIELD_LABEL)}
-              variant="outlined"
-              value={password}
-              error={Boolean(passwordError)}
-              helperText={passwordError}
-              onChange={handleOnChangePassword}
-              id={PASSWORD_SIGN_IN_FIELD_ID}
-              type="password"
-              onKeyPress={handleKeypress}
-            />
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handlePasswordSignIn}
-              id={PASSWORD_SIGN_IN_BUTTON_ID}
-            >
+        <Stack direction="column" spacing={1}>
+          <EmailInput
+            value={email}
+            setValue={setEmail}
+            id={EMAIL_SIGN_IN_FIELD_ID}
+            onKeyPress={handleKeypress}
+            shouldValidate={shouldValidate}
+          />
+          {signInMethod === SIGN_IN_METHODS.PASSWORD && (
+            <>
+              <StyledTextField
+                required
+                label={t(PASSWORD_FIELD_LABEL)}
+                variant="outlined"
+                value={password}
+                error={Boolean(passwordError)}
+                helperText={passwordError}
+                onChange={handleOnChangePassword}
+                id={PASSWORD_SIGN_IN_FIELD_ID}
+                type="password"
+                onKeyPress={handleKeypress}
+              />
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handlePasswordSignIn}
+                id={PASSWORD_SIGN_IN_BUTTON_ID}
+              >
+                {t(SIGN_IN_BUTTON)}
+              </Button>
+            </>
+          )}
+          {signInMethod === SIGN_IN_METHODS.EMAIL && (
+            <Button onClick={handleSignIn} id={SIGN_IN_BUTTON_ID}>
               {t(SIGN_IN_BUTTON)}
             </Button>
-          </>
-        )}
-        {signInMethod === SIGN_IN_METHODS.EMAIL && (
-          <Button onClick={handleSignIn} id={SIGN_IN_BUTTON_ID}>
-            {t(SIGN_IN_BUTTON)}
-          </Button>
-        )}
+          )}
+        </Stack>
       </FormControl>
-      <StyledDivider />
       <Link to={SIGN_UP_PATH}>{t(SIGN_UP_LINK_TEXT)}</Link>
     </>
   );
 
   return (
     <FullscreenContainer>
-      {
-        // eslint-disable-next-line no-constant-condition
-        (signInSuccess || signInWithPasswordSuccess) && successView ? (
-          <SuccessContent
-            title={t(AUTH.SIGN_IN_SUCCESS_TITLE)}
-            email={email}
-            handleBackButtonClick={handleBackButtonClick}
-          />
-        ) : (
-          <>
-            <Typography variant="h2" component="h2" id={SIGN_IN_HEADER_ID}>
-              {t(SIGN_IN_HEADER)}
-            </Typography>
-            {renderSignInForm()}
-            <StyledDivider />
-            <Box sx={{ justifyContent: 'center' }}>
-              <Button
-                variant="text"
-                disabled={signInMethod === SIGN_IN_METHODS.EMAIL}
-                onClick={handleSignInMethod}
-                id={EMAIL_SIGN_IN_METHOD_BUTTON_ID}
-              >
-                {t(EMAIL_SIGN_IN_METHOD)}
-              </Button>
-              <Button
-                variant="text"
-                disabled={signInMethod === SIGN_IN_METHODS.PASSWORD}
-                onClick={handleSignInMethod}
-                id={PASSWORD_SIGN_IN_METHOD_BUTTON_ID}
-              >
-                {t(PASSWORD_SIGN_IN_METHOD)}
-              </Button>
-            </Box>
-            <StyledDivider />
-            <UserSwitch />
-          </>
-        )
-      }
+      {(signInSuccess || signInWithPasswordSuccess) && successView ? (
+        <SuccessContent
+          title={t(AUTH.SIGN_IN_SUCCESS_TITLE)}
+          email={email}
+          handleBackButtonClick={handleBackButtonClick}
+        />
+      ) : (
+        <Stack direction="column" spacing={2}>
+          <Typography variant="h2" component="h2" id={SIGN_IN_HEADER_ID}>
+            {t(SIGN_IN_HEADER)}
+          </Typography>
+          {renderSignInForm()}
+          <Box justifyContent="center">
+            <Button
+              variant="text"
+              disabled={signInMethod === SIGN_IN_METHODS.EMAIL}
+              onClick={handleSignInMethod}
+              id={EMAIL_SIGN_IN_METHOD_BUTTON_ID}
+            >
+              {t(EMAIL_SIGN_IN_METHOD)}
+            </Button>
+            <Button
+              variant="text"
+              disabled={signInMethod === SIGN_IN_METHODS.PASSWORD}
+              onClick={handleSignInMethod}
+              id={PASSWORD_SIGN_IN_METHOD_BUTTON_ID}
+            >
+              {t(PASSWORD_SIGN_IN_METHOD)}
+            </Button>
+          </Box>
+        </Stack>
+      )}
     </FullscreenContainer>
   );
 };

diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
@@ -5,6 +5,7 @@ import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button, Loader } from '@graasp/ui';
 
+import { Stack } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 
@@ -21,7 +22,6 @@ import { useRecaptcha } from '../context/RecaptchaContext';
 import { emailValidator, nameValidator } from '../utils/validation';
 import EmailInput from './EmailInput';
 import FullscreenContainer from './FullscreenContainer';
-import StyledDivider from './StyledDivider';
 import StyledTextField from './StyledTextField';
 import SuccessContent from './SuccessContent';
 
@@ -95,30 +95,30 @@ const SignUp = () => {
   const renderForm = () => (
     <>
       <FormControl>
-        <StyledTextField
-          required
-          label={t(NAME_FIELD_LABEL)}
-          variant="outlined"
-          value={name}
-          error={Boolean(nameError)}
-          helperText={nameError}
-          onChange={handleNameOnChange}
-          id={NAME_SIGN_UP_FIELD_ID}
-          disabled={Boolean(invitation?.get('name'))}
-        />
-        <EmailInput
-          value={email}
-          setValue={setEmail}
-          id={EMAIL_SIGN_UP_FIELD_ID}
-          disabled={Boolean(invitation?.get('email'))}
-          shouldValidate={shouldValidate}
-        />
-        <Button onClick={handleRegister} id={SIGN_UP_BUTTON_ID} fullWidth>
-          {t(SIGN_UP_BUTTON)}
-        </Button>
+        <Stack direction="column" spacing={1}>
+          <StyledTextField
+            required
+            label={t(NAME_FIELD_LABEL)}
+            variant="outlined"
+            value={name}
+            error={Boolean(nameError)}
+            helperText={nameError}
+            onChange={handleNameOnChange}
+            id={NAME_SIGN_UP_FIELD_ID}
+            disabled={Boolean(invitation?.get('name'))}
+          />
+          <EmailInput
+            value={email}
+            setValue={setEmail}
+            id={EMAIL_SIGN_UP_FIELD_ID}
+            disabled={Boolean(invitation?.get('email'))}
+            shouldValidate={shouldValidate}
+          />
+          <Button onClick={handleRegister} id={SIGN_UP_BUTTON_ID} fullWidth>
+            {t(SIGN_UP_BUTTON)}
+          </Button>
+        </Stack>
       </FormControl>
-
-      <StyledDivider />
       <Link to={buildSignInPath()}>{t(SIGN_IN_LINK_TEXT)}</Link>
     </>
   );
@@ -132,12 +132,12 @@ const SignUp = () => {
           handleBackButtonClick={handleBackButtonClick}
         />
       ) : (
-        <>
+        <Stack direction="column" spacing={2}>
           <Typography variant="h2" component="h2" id={SIGN_UP_HEADER_ID}>
             {t(SIGN_UP_HEADER)}
           </Typography>
           {renderForm()}
-        </>
+        </Stack>
       )}
     </FullscreenContainer>
   );

diff --git a/src/components/StyledTextField.tsx b/src/components/StyledTextField.tsx
@@ -3,8 +3,7 @@ import TextField from '@mui/material/TextField';
 
 import { FORM_INPUT_MIN_WIDTH } from '../config/constants';
 
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  margin: theme.spacing(1, 0),
+const StyledTextField = styled(TextField)(() => ({
   minWidth: FORM_INPUT_MIN_WIDTH,
 }));
 export default StyledTextField;
diff --git a/src/components/SuccessContent.tsx b/src/components/SuccessContent.tsx
@@ -45,47 +45,47 @@ const SuccessContent = ({
   };
 
   return (
-    <Container id={SUCCESS_CONTENT_ID}>
-      <Typography
-        variant="h4"
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <MailOutlineIcon fontSize="large" sx={{ marginRight: 1 }} />
-        {title}
-      </Typography>
-      <Typography variant="body1">
-        <Trans
-          ns={namespaces.auth}
-          i18nKey={AUTH.SIGN_IN_SUCCESS_TEXT}
-          values={{ email }}
-          components={{ bold: <strong /> }}
-        />
-      </Typography>
-      <br />
-      <Typography variant="body1">
-        {t(AUTH.SIGN_IN_SUCCESS_EMAIL_PROBLEM)}
-      </Typography>
-      <br />
-      <Stack direction="row" justifyContent="center" spacing={1}>
-        <Button
-          variant="text"
-          color="primary"
-          id={BACK_BUTTON_ID}
-          onClick={handleBackButtonClick}
+    <Container id={SUCCESS_CONTENT_ID} maxWidth="sm">
+      <Stack direction="column" spacing={2}>
+        <Typography
+          variant="h4"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
         >
-          {t(AUTH.BACK_BUTTON)}
-        </Button>
-        <Button
-          variant="outlined"
-          color="primary"
-          onClick={onClickResendEmail}
-          id={RESEND_EMAIL_BUTTON_ID}
-          disabled={isEmailSent}
-        >
-          {t(AUTH.RESEND_EMAIL_BUTTON)}
-        </Button>
+          <MailOutlineIcon fontSize="large" sx={{ marginRight: 1 }} />
+          {title}
+        </Typography>
+        <Typography variant="body1">
+          <Trans
+            ns={namespaces.auth}
+            i18nKey={AUTH.SIGN_IN_SUCCESS_TEXT}
+            values={{ email }}
+            components={{ bold: <strong /> }}
+          />
+        </Typography>
+        <Typography variant="body1">
+          {t(AUTH.SIGN_IN_SUCCESS_EMAIL_PROBLEM)}
+        </Typography>
+        <Stack direction="row" justifyContent="center" spacing={1}>
+          <Button
+            variant="text"
+            color="primary"
+            id={BACK_BUTTON_ID}
+            onClick={handleBackButtonClick}
+          >
+            {t(AUTH.BACK_BUTTON)}
+          </Button>
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={onClickResendEmail}
+            id={RESEND_EMAIL_BUTTON_ID}
+            disabled={isEmailSent}
+          >
+            {t(AUTH.RESEND_EMAIL_BUTTON)}
+          </Button>
+        </Stack>
       </Stack>
     </Container>
   );