fix: remove visible dividers

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}

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>
   );

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>
   );

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;

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>
   );