From 552bf9bb0d5f2cde6e84aab1bc58223526408423 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 12 Jul 2023 20:08:36 +0200
Subject: [PATCH 1/3] feat(style): revamp of the login page

---
 cypress/support/commands.ts            |  2 +-
 src/components/FullscreenContainer.tsx | 14 ++++-
 src/components/SignIn.tsx              | 73 ++++++++++++--------------
 src/components/SuccessContent.tsx      |  2 +-
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 6431573f..f6fdd635 100644
--- 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
index 88c3397b..e072a2d0 100644
--- a/src/components/FullscreenContainer.tsx
+++ b/src/components/FullscreenContainer.tsx
@@ -13,8 +13,20 @@ 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}
+      p={6}
+      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
index 63b64dcf..d0c6ac8a 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -192,44 +192,41 @@ const SignIn: FC = () => {
 
   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}
+        />
+      ) : (
+        <>
+          <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 />
+        </>
+      )}
     </FullscreenContainer>
   );
 };
diff --git a/src/components/SuccessContent.tsx b/src/components/SuccessContent.tsx
index ce2966db..aa393e6d 100644
--- a/src/components/SuccessContent.tsx
+++ b/src/components/SuccessContent.tsx
@@ -45,7 +45,7 @@ const SuccessContent = ({
   };
 
   return (
-    <Container id={SUCCESS_CONTENT_ID}>
+    <Container id={SUCCESS_CONTENT_ID} style={{ border: '1px solid red' }}>
       <Typography
         variant="h4"
         display="flex"

From 3b4dbfacd47e358a1d1e7d6738cf88f1b7796113 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 12 Jul 2023 21:17:42 +0200
Subject: [PATCH 2/3] fix: remove visible dividers

---
 src/components/FullscreenContainer.tsx |  4 +-
 src/components/SignIn.tsx              | 79 +++++++++++++------------
 src/components/SignUp.tsx              | 52 ++++++++---------
 src/components/StyledTextField.tsx     |  3 +-
 src/components/SuccessContent.tsx      | 80 +++++++++++++-------------
 5 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/src/components/FullscreenContainer.tsx b/src/components/FullscreenContainer.tsx
index e072a2d0..421ae9fa 100644
--- a/src/components/FullscreenContainer.tsx
+++ b/src/components/FullscreenContainer.tsx
@@ -22,7 +22,9 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
       bgcolor="white"
       border="1px solid #eaeaf7"
       borderRadius={3}
-      p={6}
+      px={{ xs: 2, sm: 8 }}
+      py={{ xs: 2, sm: 6 }}
+      m={4}
       boxShadow="0px 0px 20px 5px rgba(44, 47, 240, 0.08)"
     >
       {children}
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index d0c6ac8a..0ac404a1 100644
--- 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,7 +27,6 @@ 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';
@@ -148,44 +148,45 @@ 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>
     </>
   );
@@ -199,12 +200,11 @@ const SignIn: FC = () => {
           handleBackButtonClick={handleBackButtonClick}
         />
       ) : (
-        <>
+        <Stack direction="column" spacing={2}>
           <Typography variant="h2" component="h2" id={SIGN_IN_HEADER_ID}>
             {t(SIGN_IN_HEADER)}
           </Typography>
           {renderSignInForm()}
-          <StyledDivider />
           <Box sx={{ justifyContent: 'center' }}>
             <Button
               variant="text"
@@ -223,9 +223,8 @@ const SignIn: FC = () => {
               {t(PASSWORD_SIGN_IN_METHOD)}
             </Button>
           </Box>
-          <StyledDivider />
           <UserSwitch />
-        </>
+        </Stack>
       )}
     </FullscreenContainer>
   );
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index ff8a9a67..3ff2939e 100644
--- 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
index 1ea89d4d..1f8e6091 100644
--- 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
index aa393e6d..8ba64df1 100644
--- a/src/components/SuccessContent.tsx
+++ b/src/components/SuccessContent.tsx
@@ -45,47 +45,47 @@ const SuccessContent = ({
   };
 
   return (
-    <Container id={SUCCESS_CONTENT_ID} style={{ border: '1px solid red' }}>
-      <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>
   );

From d82c5f3d770c69146d044f6e6625c009d9e34348 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 17 Jul 2023 16:57:58 +0200
Subject: [PATCH 3/3] fix: remove userswitch button

---
 src/components/SignIn.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 0ac404a1..bb810d9a 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -29,7 +29,6 @@ import EmailInput from './EmailInput';
 import FullscreenContainer from './FullscreenContainer';
 import StyledTextField from './StyledTextField';
 import SuccessContent from './SuccessContent';
-import UserSwitch from './UserSwitch';
 
 const {
   SIGN_IN_BUTTON,
@@ -205,7 +204,7 @@ const SignIn: FC = () => {
             {t(SIGN_IN_HEADER)}
           </Typography>
           {renderSignInForm()}
-          <Box sx={{ justifyContent: 'center' }}>
+          <Box justifyContent="center">
             <Button
               variant="text"
               disabled={signInMethod === SIGN_IN_METHODS.EMAIL}
@@ -223,7 +222,6 @@ const SignIn: FC = () => {
               {t(PASSWORD_SIGN_IN_METHOD)}
             </Button>
           </Box>
-          <UserSwitch />
         </Stack>
       )}
     </FullscreenContainer>