refactor: apply new design

graasp · Aug 21, 2024 · 093ff38 · 093ff38
1 parent 35afffc
commit 093ff38
Show file tree

Hide file tree

Showing 16 changed files with 244 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@sentry/react": "7.118.0",
     "http-status-codes": "2.3.0",
     "i18next": "23.12.1",
+    "lucide-react": "0.429.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-ga4": "2.1.0",

diff --git a/src/components/AgreementForm.tsx b/src/components/AgreementForm.tsx
@@ -7,7 +7,6 @@ import {
   Typography,
 } from '@mui/material';
 
-import { MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP } from '../config/constants';
 import { useAuthTranslation } from '../config/i18n';
 import { SIGN_UP_AGREEMENTS_CHECKBOX_ID } from '../config/selectors';
 import { UseAgreementForm } from '../hooks/useAgreementForm';
@@ -30,7 +29,7 @@ export const AgreementForm = ({ useAgreementForm }: Props) => {
   const errorColor = 'error';
 
   return (
-    <FormGroup sx={{ maxWidth: `${MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP}px` }}>
+    <FormGroup>
       <FormControlLabel
         checked={userHasAcceptedAllTerms}
         onChange={(_, checked) => updateUserAgreements(checked)}

diff --git a/src/components/EmailInput.tsx b/src/components/EmailInput.tsx
@@ -1,10 +1,15 @@
+import { Mail } from 'lucide-react';
 import React, { FC, useEffect, useState } from 'react';
 
+import { InputAdornment } from '@mui/material';
+
 import { useAuthTranslation } from '../config/i18n';
 import { AUTH } from '../langs/constants';
 import { emailValidator } from '../utils/validation';
 import StyledTextField from './StyledTextField';
 
+const { EMAIL_INPUT_PLACEHOLDER } = AUTH;
+
 type Props = {
   required?: boolean;
   value: string;
@@ -16,7 +21,7 @@ type Props = {
 };
 
 const EmailInput: FC<Props> = ({
-  required = true,
+  required = false,
   value = '',
   id,
   disabled = false,
@@ -44,12 +49,20 @@ const EmailInput: FC<Props> = ({
 
   return (
     <StyledTextField
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <Mail />
+          </InputAdornment>
+        ),
+      }}
       variant="outlined"
-      label={t(AUTH.EMAIL_FIELD_TEXT)}
-      required={required}
       value={value}
       error={Boolean(error)}
       helperText={t(error)}
+      placeholder={t(
+        `${EMAIL_INPUT_PLACEHOLDER}${required ? '_REQUIRED' : ''}`,
+      )}
       onChange={handleEmailOnChange}
       id={id}
       type="email"

diff --git a/src/components/EnableAnalyticsForm.tsx b/src/components/EnableAnalyticsForm.tsx
@@ -6,7 +6,6 @@ import {
   Typography,
 } from '@mui/material';
 
-import { MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP } from '../config/constants';
 import { useAuthTranslation } from '../config/i18n';
 import { SIGN_UP_SAVE_ACTIONS_ID } from '../config/selectors';
 import { AUTH } from '../langs/constants';
@@ -25,7 +24,7 @@ export const EnableAnalyticsForm = ({
 
   return (
     <Tooltip title={t(SIGN_UP_SAVE_ACTIONS_TOOLTIP)} placement="right">
-      <FormGroup sx={{ maxWidth: `${MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP}px` }}>
+      <FormGroup>
         <FormControlLabel
           control={
             <Checkbox

diff --git a/src/components/FullscreenContainer.tsx b/src/components/FullscreenContainer.tsx
diff --git a/src/components/LeftContentContainer.tsx b/src/components/LeftContentContainer.tsx
@@ -0,0 +1,80 @@
+import { Stack, Typography } from '@mui/material';
+
+import APIChecker from './APIChecker';
+import Footer from './Footer';
+
+type Props = {
+  children: JSX.Element | JSX.Element[];
+};
+
+const LeftContentContainer = ({ children }: Props): JSX.Element => (
+  <Stack
+    direction="row"
+    margin="auto"
+    // bgcolor="#f6f7fb"
+    minHeight="100svh"
+    // 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")`,
+    // }}
+  >
+    <Stack
+      display={{
+        xs: 'none',
+        sm: 'flex',
+      }}
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+      bgcolor="rgba(30,202,165,0.15)"
+      // p={5}
+    >
+      <APIChecker />
+      <Stack
+        flexGrow={1}
+        width="100%"
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        p={5}
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 1080 1080"
+          width="150"
+          data-astro-cid-zpomngsj=""
+        >
+          <path
+            fill="#1ECAA5"
+            d="M656.39 481.93H428.2c-30.88 0-56-25.12-56-56V250.47c0-30.88 25.12-56 56-56h228.19c30.88 0 56 25.12 56 56v175.46c0 30.88-25.12 56-56 56ZM428.2 245.6a4.87 4.87 0 0 0-4.87 4.87v175.46a4.87 4.87 0 0 0 4.87 4.87h228.19a4.87 4.87 0 0 0 4.87-4.87V250.47a4.87 4.87 0 0 0-4.87-4.87H428.2ZM845.1 805.78H616.91c-30.88 0-56-25.12-56-56V574.32c0-30.88 25.12-56 56-56H845.1c30.88 0 56 25.12 56 56v175.46c0 30.88-25.12 56-56 56ZM616.91 569.45a4.87 4.87 0 0 0-4.87 4.87v175.46a4.87 4.87 0 0 0 4.87 4.87H845.1a4.87 4.87 0 0 0 4.87-4.87V574.32a4.87 4.87 0 0 0-4.87-4.87H616.91ZM467.68 805.78h-228.2c-30.88 0-56-25.12-56-56V574.32c0-30.88 25.12-56 56-56h228.19c30.88 0 56 25.12 56 56v175.46c0 30.88-25.12 56-56 56h.01ZM239.49 569.45a4.87 4.87 0 0 0-4.87 4.87v175.46a4.87 4.87 0 0 0 4.87 4.87h228.19a4.87 4.87 0 0 0 4.87-4.87V574.32a4.87 4.87 0 0 0-4.87-4.87h-228.2.01Z"
+          ></path>
+        </svg>
+        <Typography variant="h2" textAlign="left">
+          Create your own learning activities with the Builder
+        </Typography>
+      </Stack>
+    </Stack>
+    <Stack
+      flexGrow={1}
+      justifyContent="space-between"
+      alignItems="flex-end"
+      width={{ xs: '100%', sm: 'inherit' }}
+      bgcolor="white"
+      border="1px solid #eaeaf7"
+      px={{ xs: 2, sm: 8 }}
+      py={{ xs: 2, sm: 2 }}
+      boxShadow="0px 0px 20px 5px rgba(44, 47, 240, 0.08)"
+    >
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        height="100%"
+        width="100%"
+      >
+        {children}
+      </Stack>
+      <Footer />
+    </Stack>
+  </Stack>
+);
+
+export default LeftContentContainer;
diff --git a/src/components/MagicLinkForm.tsx b/src/components/MagicLinkForm.tsx
@@ -96,6 +96,8 @@ const MagicLinkForm = () => {
         id={SIGN_IN_BUTTON_ID}
         variant="contained"
         onClick={handleSignIn}
+        sx={{ textTransform: 'none' }}
+        fullWidth
         loading={isLoadingMobileSignIn || isLoadingSignIn}
       >
         {t(SIGN_IN_BUTTON)}

diff --git a/src/components/MagicLinkSuccessContent.tsx b/src/components/MagicLinkSuccessContent.tsx
@@ -19,7 +19,7 @@ import {
 import { useRecaptcha } from '../context/RecaptchaContext';
 import { useRedirection } from '../hooks/searchParams';
 import { AUTH } from '../langs/constants';
-import FullscreenContainer from './FullscreenContainer';
+import LeftContentContainer from './LeftContentContainer';
 
 const MagicLinkSuccessContent = () => {
   const navigate = useNavigate();
@@ -55,7 +55,7 @@ const MagicLinkSuccessContent = () => {
   };
 
   return (
-    <FullscreenContainer>
+    <LeftContentContainer>
       <Container id={SUCCESS_CONTENT_ID} maxWidth="sm">
         <Stack direction="column" spacing={2}>
           <Typography
@@ -99,7 +99,7 @@ const MagicLinkSuccessContent = () => {
           </Stack>
         </Stack>
       </Container>
-    </FullscreenContainer>
+    </LeftContentContainer>
   );
 };
 

diff --git a/src/components/MobileAuth.tsx b/src/components/MobileAuth.tsx
@@ -6,7 +6,7 @@ import { Button, Stack, Typography } from '@mui/material';
 import { useAuthTranslation } from '../config/i18n';
 import { HOME_PATH } from '../config/paths';
 import { AUTH } from '../langs/constants';
-import FullscreenContainer from './FullscreenContainer';
+import LeftContentContainer from './LeftContentContainer';
 
 const PLAY_STORE_LINK =
   'https://play.google.com/store/apps/details?id=org.graasp.mobile';
@@ -15,7 +15,7 @@ const MobileAuth = (): JSX.Element => {
   const { t } = useAuthTranslation();
 
   return (
-    <FullscreenContainer>
+    <LeftContentContainer>
       <Stack
         justifyContent="center"
         alignItems="center"
@@ -56,7 +56,7 @@ const MobileAuth = (): JSX.Element => {
           {t(AUTH.MOBILE_BACK_TO_LOGIN)}
         </Typography>
       </Stack>
-    </FullscreenContainer>
+    </LeftContentContainer>
   );
 };
 export default MobileAuth;
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
@@ -1,59 +1,28 @@
-import { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-import { Button, GraaspLogo } from '@graasp/ui';
+import { GraaspLogo } from '@graasp/ui';
 
-import { Stack, useTheme } from '@mui/material';
-import Box from '@mui/material/Box';
-import FormControl from '@mui/material/FormControl';
+import { Divider, Stack, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 import { useAuthTranslation } from '../config/i18n';
 import { SIGN_UP_PATH } from '../config/paths';
-import {
-  EMAIL_SIGN_IN_METHOD_BUTTON_ID,
-  PASSWORD_SIGN_IN_METHOD_BUTTON_ID,
-  SIGN_IN_HEADER_ID,
-} from '../config/selectors';
+import { SIGN_IN_HEADER_ID } from '../config/selectors';
 import { AUTH } from '../langs/constants';
-import { SIGN_IN_METHODS } from '../types/signInMethod';
-import FullscreenContainer from './FullscreenContainer';
+import LeftContentContainer from './LeftContentContainer';
 import MagicLinkForm from './MagicLinkForm';
 import SignInPasswordForm from './SignInPasswordForm';
 
-const {
-  SIGN_UP_LINK_TEXT,
-  PASSWORD_SIGN_IN_METHOD,
-  EMAIL_SIGN_IN_METHOD,
-  SIGN_IN_HEADER,
-} = AUTH;
+const { SIGN_UP_LINK_TEXT, SIGN_IN_HEADER } = AUTH;
 
 const SignIn = () => {
   const { t } = useAuthTranslation();
   const theme = useTheme();
 
   const { search } = useLocation();
 
-  const [signInMethod, setSignInMethod] = useState(SIGN_IN_METHODS.EMAIL);
-
-  const handleSignInMethod = () => {
-    // signInMethod email when true
-    switch (signInMethod) {
-      case SIGN_IN_METHODS.EMAIL: {
-        setSignInMethod(SIGN_IN_METHODS.PASSWORD);
-        break;
-      }
-      case SIGN_IN_METHODS.PASSWORD: {
-        setSignInMethod(SIGN_IN_METHODS.EMAIL);
-        break;
-      }
-      default:
-        break;
-    }
-  };
-
   return (
-    <FullscreenContainer>
+    <LeftContentContainer>
       {
         <Stack direction="column" alignItems="center" spacing={2}>
           <Stack spacing={1}>
@@ -62,36 +31,16 @@ const SignIn = () => {
               {t(SIGN_IN_HEADER)}
             </Typography>
           </Stack>
-          <FormControl>
-            <Stack direction="column" spacing={1}>
-              {signInMethod === SIGN_IN_METHODS.PASSWORD && (
-                <SignInPasswordForm />
-              )}
-              {signInMethod === SIGN_IN_METHODS.EMAIL && <MagicLinkForm />}
-            </Stack>
-          </FormControl>
+
+          <MagicLinkForm />
+          <Divider sx={{ width: '100%' }}>or</Divider>
+          <SignInPasswordForm />
+
+          <Divider sx={{ width: '100%' }}>or</Divider>
           <Link to={`${SIGN_UP_PATH}${search}`}>{t(SIGN_UP_LINK_TEXT)}</Link>
-          <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>
+    </LeftContentContainer>
   );
 };