feat: add graasp branding and show all platforms

cypress/e2e/SignUp.cy.ts

@@ -9,7 +9,7 @@ import {
   SUCCESS_CONTENT_ID,
 } from '../../src/config/selectors';
 import { MEMBERS } from '../fixtures/members';
-import { checkInvitationFields } from './util';
+import { checkInvitationFields, fillSignUpLayout } from './util';
 
 describe('SignUp', () => {
   describe('Must Accept All Terms To Sign Up', () => {
@@ -26,6 +26,9 @@ describe('SignUp', () => {
       cy.get(`#${SIGN_UP_BUTTON_ID}`).should('be.disabled');
     });
     it('Sign Up Is Available When Accepting All Terms', () => {
+      fillSignUpLayout({ name: 'name', email: 'email' });
+      cy.get(`#${SIGN_UP_BUTTON_ID}`).should('be.disabled');
+
       cy.agreeWithAllTerms();
       cy.get(`#${SIGN_UP_BUTTON_ID}`).should('not.be.disabled');
     });

src/components/BrandingLogo.tsx

@@ -0,0 +1,18 @@
+import { GraaspLogo } from '@graasp/ui';
+
+import { Stack, Typography, useTheme } from '@mui/material';
+
+export const BrandingLogo = () => {
+  const theme = useTheme();
+
+  return (
+    <div style={{ position: 'absolute', top: 10, left: 10 }}>
+      <Stack m={1} direction="row" justifyContent="center" alignItems="center">
+        <GraaspLogo height={50} sx={{ fill: theme.palette.primary.main }} />
+        <Typography variant="h2" color="primary">
+          Graasp
+        </Typography>
+      </Stack>
+    </div>
+  );
+};

src/components/LeftContentContainer.tsx

@@ -1,67 +1,108 @@
-import { Stack } from '@mui/material';
+import {
+  AccentColors,
+  AnalyticsIcon,
+  BuildIcon,
+  LibraryIcon,
+  PlayIcon,
+} from '@graasp/ui';
 
+import { Box, Stack } from '@mui/material';
+
+import { BACKGROUND_PATTERN } from '../config/constants';
+import { useAuthTranslation } from '../config/i18n';
+import { AUTH } from '../langs/constants';
 import APIChecker from './APIChecker';
+import { BrandingLogo } from './BrandingLogo';
 import Footer from './Footer';
-import { AnalyticsContent } from './leftContent/AnalyticsContent';
-import { BuilderContent } from './leftContent/BuilderContent';
-import { LibraryContent } from './leftContent/LibraryContent';
-import { PlayerContent } from './leftContent/PlayerContent';
+import { PlatformContent } from './leftContent/PlatformContent';
 
 type Props = {
   children: JSX.Element | JSX.Element[];
 };
 
-const PLATFORMS = [
-  { content: <BuilderContent /> },
-  { content: <PlayerContent /> },
-  { content: <LibraryContent /> },
-  { content: <AnalyticsContent /> },
-];
-
 const LeftContentContainer = ({ children }: Props): JSX.Element => {
-  const platform = PLATFORMS[Math.floor(Math.random() * PLATFORMS.length)];
+  const { t } = useAuthTranslation();
 
   return (
-    <Stack direction="row" margin="auto" minHeight="100svh">
-      <Stack
+    <>
+      <Box
         display={{
           xs: 'none',
-          sm: 'none',
-          md: 'flex',
-        }}
-        width="100%"
-        justifyContent="center"
-        alignItems="center"
-        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")`,
+          sm: 'block',
+          md: 'block',
         }}
       >
-        <APIChecker />
-        {platform.content}
-      </Stack>
+        <BrandingLogo />
+      </Box>
       <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)"
+        direction="row"
+        margin="auto"
+        minHeight="100svh"
+        sx={{
+          backgroundImage: BACKGROUND_PATTERN,
+        }}
       >
         <Stack
-          alignItems="center"
-          justifyContent="center"
-          height="100%"
+          display={{
+            xs: 'none',
+            sm: 'none',
+            md: 'flex',
+          }}
           width="100%"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <APIChecker />
+          <Stack spacing={3}>
+            <PlatformContent
+              Icon={BuildIcon}
+              text={t(AUTH.BUILDER_BACKGROUND_TEXT)}
+              name={t(AUTH.BUILDER_BACKGROUND_TEXT_PLATFORM)}
+              color={AccentColors.builder}
+            />
+            <PlatformContent
+              Icon={PlayIcon}
+              text={t(AUTH.PLAYER_BACKGROUND_TEXT)}
+              name={t(AUTH.PLAYER_BACKGROUND_TEXT_PLATFORM)}
+              color={AccentColors.player}
+            />
+            <PlatformContent
+              Icon={LibraryIcon}
+              text={t(AUTH.LIBRARY_BACKGROUND_TEXT)}
+              name={t(AUTH.LIBRARY_BACKGROUND_TEXT_PLATFORM)}
+              color={AccentColors.library}
+            />
+            <PlatformContent
+              Icon={AnalyticsIcon}
+              text={t(AUTH.ANALYTICS_BACKGROUND_TEXT)}
+              name={t(AUTH.ANALYTICS_BACKGROUND_TEXT_PLATFORM)}
+              color={AccentColors.analytics}
+            />
+          </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)"
         >
-          {children}
+          <Stack
+            alignItems="center"
+            justifyContent="center"
+            height="100%"
+            width="100%"
+          >
+            {children}
+          </Stack>
+          <Footer />
         </Stack>
-        <Footer />
       </Stack>
-    </Stack>
+    </>
   );
 };
 

src/components/SignIn.tsx

@@ -27,7 +27,12 @@ const SignIn = () => {
         <Stack direction="column" alignItems="center" spacing={2}>
           <Stack spacing={1}>
             <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
-            <Typography variant="h4" component="h2" id={SIGN_IN_HEADER_ID}>
+            <Typography
+              textAlign="center"
+              variant="h4"
+              component="h2"
+              id={SIGN_IN_HEADER_ID}
+            >
               {t(SIGN_IN_HEADER)}
             </Typography>
           </Stack>

src/components/SignUp.tsx

@@ -214,7 +214,7 @@ const SignUp = () => {
             loading={isLoadingSignUp || isLoadingMobileSignUp}
             onClick={handleRegister}
             fullWidth
-            disabled={!userHasAcceptedAllTerms}
+            disabled={!userHasAcceptedAllTerms || !email.length || !name.length}
           >
             {t(SIGN_UP_BUTTON)}
           </LoadingButton>

src/components/leftContent/PlatformContent.tsx

@@ -0,0 +1,25 @@
+import { Stack, Typography } from '@mui/material';
+
+type Props = {
+  Icon: (args: { size: number; primaryColor: string }) => JSX.Element;
+  name: string;
+  text: string;
+  color: string;
+};
+
+export const PlatformContent = ({ Icon, name, text, color }: Props) => {
+  return (
+    <Stack width="100%" direction="row" alignItems="center">
+      <Icon primaryColor={color} size={110} />
+      <p>
+        <Typography variant="h5" textAlign="left">
+          {text}
+        </Typography>
+
+        <Typography variant="h2" component="h2" color={color} width="100%">
+          {name}
+        </Typography>
+      </p>
+    </Stack>
+  );
+};

src/config/constants.ts

@@ -1 +1,3 @@
 export const MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP = 330;
+
+export const BACKGROUND_PATTERN = `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")`;

src/langs/ar.json

@@ -1,12 +1,10 @@
 {
   "BACK_BUTTON": "إلى الخلف",
-  "EMAIL_FIELD_TEXT": "بريد إلكتروني",
   "EMAIL_SIGN_IN_METHOD": "تسجيل الدخول عبر البريد الإلكتروني",
   "MOBILE_APP_NOT_INSTALLED_MESSAGE": "يبدو أنك طلبت رابطًا للهاتف المحمول ولكن لم يتم تثبيت تطبيقنا على هذا الجهاز.",
   "MOBILE_BACK_TO_LOGIN": "العودة لتسجيل الدخول",
   "MOBILE_GET_APP_FROM_APPLE_STORE": "احصل عليه من متجر تطبيقات أبل",
   "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "احصل عليه من متجر Google Play",
-  "NAME_FIELD_LABEL": "الأسم",
   "NOT_SIGNED_IN_TOOLTIP": "أنت غير مسجل الدخول.",
   "PASSWORD_FIELD_LABEL": "كلمة المرور",
   "PASSWORD_SIGN_IN_METHOD": "تسجيل الدخول عبر كلمة المرور",

src/langs/de.json

@@ -1,12 +1,11 @@
 {
   "BACK_BUTTON": "Zurück",
-  "EMAIL_FIELD_TEXT": "Email",
   "EMAIL_SIGN_IN_METHOD": "E-Mail Anmeldung",
   "MOBILE_APP_NOT_INSTALLED_MESSAGE": "Sie haben einen mobilen Link angefordert, aber unsere App ist auf diesem Gerät nicht installiert.",
   "MOBILE_BACK_TO_LOGIN": "Zurück zur Anmeldung",
   "MOBILE_GET_APP_FROM_APPLE_STORE": "Im Apple App Store herunterladen",
   "MOBILE_GET_APP_FROM_GOOGLE_PLAY_STORE": "Im Google Play Store herunterladen",
-  "NAME_FIELD_LABEL": "Name",
+  "NAME_FIELD_LABEL": "Name*",
   "NOT_SIGNED_IN_TOOLTIP": "Sie sind nicht eingeloggt.",
   "PASSWORD_FIELD_LABEL": "Passwort",
   "PASSWORD_SIGN_IN_METHOD": "Passwort Anmeldung",