refactor: update backgrounds

graasp · Sep 11, 2024 · 2873f7a · 2873f7a
1 parent 74e8cd7
commit 2873f7a
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 64 deletions.
diff --git a/src/components/APIChecker.tsx b/src/components/APIChecker.tsx
@@ -25,7 +25,7 @@ const APIChecker = (): JSX.Element | false => {
   if (isError) {
     return (
       <Box maxWidth="48ch">
-        <Alert severity="error">
+        <Alert variant="outlined" sx={{ background: 'white' }} severity="error">
           <AlertTitle>{t(AUTH.API_UNAVAILABLE_TITLE)}</AlertTitle>
           <Stack direction="column" alignItems="center" spacing={1}>
             <Typography>{t(AUTH.API_UNAVAILABLE_EXPLANATION)}</Typography>

diff --git a/src/components/EmailInput.tsx b/src/components/EmailInput.tsx
@@ -18,6 +18,7 @@ type Props = {
   setValue: (str: string) => void;
   onKeyPress?: React.KeyboardEventHandler<unknown>;
   shouldValidate: boolean;
+  autoFocus?: boolean;
 };
 
 const EmailInput: FC<Props> = ({
@@ -28,6 +29,7 @@ const EmailInput: FC<Props> = ({
   setValue,
   onKeyPress,
   shouldValidate = true,
+  autoFocus = false,
 }) => {
   const { t } = useAuthTranslation();
   const [error, setError] = useState<string | null>(null);
@@ -63,6 +65,7 @@ const EmailInput: FC<Props> = ({
       placeholder={t(
         `${EMAIL_INPUT_PLACEHOLDER}${required ? '_REQUIRED' : ''}`,
       )}
+      autoFocus={autoFocus}
       onChange={handleEmailOnChange}
       id={id}
       type="email"

diff --git a/src/components/LeftContentContainer.tsx b/src/components/LeftContentContainer.tsx
@@ -1,80 +1,68 @@
-import { Stack, Typography } from '@mui/material';
+import { Stack } from '@mui/material';
 
 import APIChecker from './APIChecker';
 import Footer from './Footer';
+import { AnalyticsContent } from './leftContent/AnalyticsContent';
+import { BuilderContent } from './leftContent/BuilderContent';
+import { LibraryContent } from './leftContent/LibraryContent';
+import { PlayerContent } from './leftContent/PlayerContent';
 
 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 />
+const PLATOFRMS = [
+  { content: <BuilderContent /> },
+  { content: <PlayerContent /> },
+  { content: <LibraryContent /> },
+  { content: <AnalyticsContent /> },
+];
+
+const LeftContentContainer = ({ children }: Props): JSX.Element => {
+  const platform = PLATOFRMS[Math.floor(Math.random() * 4)];
+
+  return (
+    <Stack direction="row" margin="auto" minHeight="100svh">
       <Stack
-        flexGrow={1}
+        display={{
+          xs: 'none',
+          sm: 'none',
+          md: 'flex',
+        }}
         width="100%"
-        direction="row"
         justifyContent="center"
         alignItems="center"
-        p={5}
+        py={4}
+        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")`,
+        }}
       >
-        <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>
+        <APIChecker />
+        {platform.content}
       </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%"
+        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)"
       >
-        {children}
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          height="100%"
+          width="100%"
+        >
+          {children}
+        </Stack>
+        <Footer />
       </Stack>
-      <Footer />
     </Stack>
-  </Stack>
-);
+  );
+};
 
 export default LeftContentContainer;
diff --git a/src/components/MagicLinkForm.tsx b/src/components/MagicLinkForm.tsx
@@ -93,6 +93,7 @@ const MagicLinkForm = () => {
         id={EMAIL_SIGN_IN_MAGIC_LINK_FIELD_ID}
         onKeyPress={handleKeypress}
         shouldValidate={shouldValidate}
+        autoFocus
       />
       <ErrorDisplay error={signInError} />
       <LoadingButton

diff --git a/src/components/SignInPasswordForm.tsx b/src/components/SignInPasswordForm.tsx
@@ -118,6 +118,7 @@ const SignInPasswordForm = () => {
       />
       <ErrorDisplay error={passwordSignInError} />
       <LoadingButton
+        disabled={!(password && email)}
         id={PASSWORD_SIGN_IN_BUTTON_ID}
         variant="contained"
         color="primary"

diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
@@ -189,6 +189,7 @@ const SignUp = () => {
             onChange={handleNameOnChange}
             id={NAME_SIGN_UP_FIELD_ID}
             disabled={Boolean(invitation?.name)}
+            autoFocus
           />
           <EmailInput
             required

diff --git a/src/components/leftContent/AnalyticsContent.tsx b/src/components/leftContent/AnalyticsContent.tsx
@@ -0,0 +1,32 @@
+import { AnalyticsIcon } from '@graasp/ui';
+
+import { Stack, Typography } from '@mui/material';
+
+import { useAuthTranslation } from '../../config/i18n';
+import { AUTH } from '../../langs/constants';
+
+export const AnalyticsContent = () => {
+  const { t } = useAuthTranslation();
+
+  return (
+    <Stack
+      flexGrow={1}
+      width="100%"
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      p={5}
+    >
+      <AnalyticsIcon primaryColor="rgb(250, 91, 125)" size={180} />
+      <p>
+        <Typography variant="h4" textAlign="left">
+          {t(AUTH.ANALYTICS_BACKGROUND_TEXT)}
+        </Typography>
+
+        <Typography variant="h1" component="h2" textAlign="left">
+          {t(AUTH.ANALYTICS_BACKGROUND_TEXT_PLATFORM)}
+        </Typography>
+      </p>
+    </Stack>
+  );
+};
diff --git a/src/components/leftContent/BuilderContent.tsx b/src/components/leftContent/BuilderContent.tsx
@@ -0,0 +1,31 @@
+import { BuildIcon } from '@graasp/ui';
+
+import { Stack, Typography } from '@mui/material';
+
+import { useAuthTranslation } from '../../config/i18n';
+import { AUTH } from '../../langs/constants';
+
+export const BuilderContent = () => {
+  const { t } = useAuthTranslation();
+
+  return (
+    <Stack
+      flexGrow={1}
+      width="100%"
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      p={5}
+    >
+      <BuildIcon primaryColor="#1ECAA5" size={180} />
+      <p>
+        <Typography variant="h4" textAlign="left">
+          {t(AUTH.BUILDER_BACKGROUND_TEXT)}
+        </Typography>
+        <Typography variant="h1" component="h2" textAlign="left">
+          {t(AUTH.BUILDER_BACKGROUND_TEXT_PLATFORM)}
+        </Typography>
+      </p>
+    </Stack>
+  );
+};
diff --git a/src/components/leftContent/LibraryContent.tsx b/src/components/leftContent/LibraryContent.tsx
@@ -0,0 +1,31 @@
+import { LibraryIcon } from '@graasp/ui';
+
+import { Stack, Typography } from '@mui/material';
+
+import { useAuthTranslation } from '../../config/i18n';
+import { AUTH } from '../../langs/constants';
+
+export const LibraryContent = () => {
+  const { t } = useAuthTranslation();
+
+  return (
+    <Stack
+      flexGrow={1}
+      width="100%"
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      p={5}
+    >
+      <LibraryIcon primaryColor="rgb(198, 88, 208)" size={180} />
+      <p>
+        <Typography variant="h4" textAlign="left">
+          {t(AUTH.LIBRARY_BACKGROUND_TEXT)}
+        </Typography>
+        <Typography variant="h1" component="h2" textAlign="left">
+          {t(AUTH.LIBRARY_BACKGROUND_TEXT_PLATFORM)}
+        </Typography>
+      </p>
+    </Stack>
+  );
+};
diff --git a/src/components/leftContent/PlayerContent.tsx b/src/components/leftContent/PlayerContent.tsx
@@ -0,0 +1,31 @@
+import { PlayIcon } from '@graasp/ui';
+
+import { Stack, Typography } from '@mui/material';
+
+import { useAuthTranslation } from '../../config/i18n';
+import { AUTH } from '../../langs/constants';
+
+export const PlayerContent = () => {
+  const { t } = useAuthTranslation();
+
+  return (
+    <Stack
+      flexGrow={1}
+      width="100%"
+      direction="row"
+      justifyContent="center"
+      alignItems="center"
+      p={5}
+    >
+      <PlayIcon primaryColor="rgb(86, 176, 248)" size={180} />
+      <p>
+        <Typography variant="h4" textAlign="left">
+          {t(AUTH.PLAYER_BACKGROUND_TEXT)}
+        </Typography>
+        <Typography variant="h1" component="h2" textAlign="left">
+          {t(AUTH.PLAYER_BACKGROUND_TEXT_PLATFORM)}
+        </Typography>
+      </p>
+    </Stack>
+  );
+};
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -44,4 +44,12 @@ export const AUTH = {
   PASSWORD_SUCCESS_ALERT: 'PASSWORD_SUCCESS_ALERT',
   EMAIL_INPUT_PLACEHOLDER: 'EMAIL_INPUT_PLACEHOLDER',
   PASSWORD_INPUT_PLACEHOLDER: 'PASSWORD_INPUT_PLACEHOLDER',
+  BUILDER_BACKGROUND_TEXT: 'BUILDER_BACKGROUND_TEXT',
+  PLAYER_BACKGROUND_TEXT: 'PLAYER_BACKGROUND_TEXT',
+  LIBRARY_BACKGROUND_TEXT: 'LIBRARY_BACKGROUND_TEXT',
+  ANALYTICS_BACKGROUND_TEXT: 'ANALYTICS_BACKGROUND_TEXT',
+  BUILDER_BACKGROUND_TEXT_PLATFORM: 'BUILDER_BACKGROUND_TEXT_PLATFORM',
+  PLAYER_BACKGROUND_TEXT_PLATFORM: 'PLAYER_BACKGROUND_TEXT_PLATFORM',
+  LIBRARY_BACKGROUND_TEXT_PLATFORM: 'LIBRARY_BACKGROUND_TEXT_PLATFORM',
+  ANALYTICS_BACKGROUND_TEXT_PLATFORM: 'ANALYTICS_BACKGROUND_TEXT_PLATFORM',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -43,5 +43,13 @@
   "EMPTY_EMAIL_ERROR": "An email address is required, this field can not be empty",
   "PASSWORD_EMPTY_ERROR": "The password can not be empty",
   "PASSWORD_SUCCESS_ALERT": "You successfully signed in. You will be redirected soon.",
-  "PASSWORD_INPUT_PLACEHOLDER": "Password"
+  "PASSWORD_INPUT_PLACEHOLDER": "Password",
+  "BUILDER_BACKGROUND_TEXT": "Create your own learning activities with",
+  "BUILDER_BACKGROUND_TEXT_PLATFORM": "Graasp Builder",
+  "PLAYER_BACKGROUND_TEXT": "Learn with interactive content in",
+  "PLAYER_BACKGROUND_TEXT_PLATFORM": "Graasp Player",
+  "LIBRARY_BACKGROUND_TEXT": "Publish and Explore Open Educational Resources in",
+  "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Graasp Library",
+  "ANALYTICS_BACKGROUND_TEXT": "Get insights of the activity in your resources in",
+  "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Graasp Analytics"
 }
diff --git a/src/langs/fr.json b/src/langs/fr.json
@@ -27,7 +27,7 @@
   "API_UNAVAILABLE_TITLE": "Erreur de connexion au serveur",
   "API_UNAVAILABLE_EXPLANATION": "Le serveur Graasp semble injoignable pour le moment.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Veuillez réessayer plus tard.",
-  "API_UNAVAILABLE_BUTTON": "Recommencez",
+  "API_UNAVAILABLE_BUTTON": "Réessayer",
   "USER_AGREEMENTS_TERMS_OF_SERVICE": "conditions d'utilisation",
   "USER_AGREEMENTS_PRIVACY_POLICY": "politique de confidentialité",
   "USER_AGREEMENTS_CHECKBOX_LABEL": "En cliquant sur <0>{{sign_up_btn}}</0>, j'accepte les <1>{{terms_of_service}}</1> et la <2>{{privacy_policy}}</2>.",
@@ -38,5 +38,13 @@
   "USERNAME_TOO_LONG_ERROR": "Veuillez saisir un nom d'utilisateur de moins de {{max}} caractères",
   "INVALID_EMAIL_ERROR": "Cela ne ressemble pas à une adresse e-mail valide",
   "EMPTY_EMAIL_ERROR": "Une adresse email est obligatoire, ce champ ne peut pas être vide",
-  "PASSWORD_EMPTY_ERROR": "Le mot de passe ne peut pas être vide"
+  "PASSWORD_EMPTY_ERROR": "Le mot de passe ne peut pas être vide",
+  "BUILDER_BACKGROUND_TEXT": "Créez des activités éducatives avec",
+  "BUILDER_BACKGROUND_TEXT_PLATFORM": "Graasp Builder",
+  "PLAYER_BACKGROUND_TEXT": "Apprenez avec des contenus interactifs dans",
+  "PLAYER_BACKGROUND_TEXT_PLATFORM": "Graasp Player",
+  "LIBRARY_BACKGROUND_TEXT": "Publiez et Explorez des Ressources Educatives Libres dans",
+  "LIBRARY_BACKGROUND_TEXT_PLATFORM": "Graasp Library",
+  "ANALYTICS_BACKGROUND_TEXT": "Analysez l'activités de vos ressources dans",
+  "ANALYTICS_BACKGROUND_TEXT_PLATFORM": "Graasp Analytics"
 }