feat: fix styles, show logo, add footer content

cypress/support/commands.ts

@@ -26,7 +26,12 @@ import {
   submitSignUp,
 } from '../e2e/util';
 import MEMBERS from '../fixtures/members';
-import { mockGetCurrentMember, mockGetMember, mockGetMembers } from './server';
+import {
+  mockGetCurrentMember,
+  mockGetMember,
+  mockGetMembers,
+  mockGetStatus,
+} from './server';
 
 // cypress/support/index.ts
 declare global {
@@ -77,6 +82,7 @@ Cypress.Commands.add(
     mockGetMembers(cachedMembers);
 
     mockGetCurrentMember();
+    mockGetStatus();
   },
 );
 

cypress/support/server.ts

@@ -88,3 +88,17 @@ export const mockGetMembers = (members) => {
     },
   ).as('getMembers');
 };
+
+export const mockGetStatus = () => {
+  cy.intercept(
+    {
+      method: 'get',
+      url: `${API_HOST}/status`,
+    },
+    ({ url, reply }) => {
+      return reply({
+        statusCode: StatusCodes.OK,
+      });
+    },
+  ).as('getStatus');
+};

src/components/Footer.tsx

@@ -1,21 +1,22 @@
 import { useTheme } from '@graasp/ui';
 
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 const Footer = () => {
   const { languageSelect } = useTheme();
 
   return (
     <Box
-      position="absolute"
-      bottom={0}
       display="flex"
       justifyContent="end"
       alignItems="center"
       flexDirection="column"
       width="100%"
     >
       {languageSelect}
+      <Typography variant="caption" color="darkgrey">
+        © Graasp 2014 - {new Date().getFullYear()}
+      </Typography>
     </Box>
   );
 };

src/components/FullscreenContainer.tsx

@@ -12,26 +12,28 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
     direction="column"
     margin="auto"
     alignItems="center"
-    justifyContent="center"
+    justifyContent="space-between"
     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")`,
     }}
   >
     <APIChecker />
-    <Box
-      alignItems="center"
-      bgcolor="white"
-      border="1px solid #eaeaf7"
-      borderRadius={3}
-      px={{ xs: 2, sm: 8 }}
-      py={{ xs: 2, sm: 6 }}
-      m={4}
-      boxShadow="0px 0px 20px 5px rgba(44, 47, 240, 0.08)"
-    >
-      {children}
-    </Box>
+    <Stack flexGrow={1} justifyContent="center">
+      <Box
+        alignItems="center"
+        bgcolor="white"
+        border="1px solid #eaeaf7"
+        borderRadius={3}
+        px={{ xs: 2, sm: 8 }}
+        py={{ xs: 2, sm: 6 }}
+        m={4}
+        boxShadow="0px 0px 20px 5px rgba(44, 47, 240, 0.08)"
+      >
+        {children}
+      </Box>
+    </Stack>
     <Footer />
   </Stack>
 );

src/components/SignIn.tsx

@@ -2,9 +2,9 @@ import React, { FC, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { RecaptchaAction } from '@graasp/sdk';
-import { Button } from '@graasp/ui';
+import { Button, GraaspLogo } from '@graasp/ui';
 
-import { Stack } from '@mui/material';
+import { Stack, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
@@ -44,6 +44,7 @@ const {
 const SignIn: FC = () => {
   const { t } = useAuthTranslation();
   const { executeCaptcha } = useRecaptcha();
+  const theme = useTheme();
 
   const { isMobile, challenge } = useMobileAppLogin();
   const { search } = useLocation();
@@ -199,7 +200,7 @@ const SignIn: FC = () => {
                 onChange={handleOnChangePassword}
                 id={PASSWORD_SIGN_IN_FIELD_ID}
                 type="password"
-                onKeyPress={handleKeypress}
+                onKeyDown={handleKeypress}
               />
               <Button
                 variant="contained"
@@ -238,9 +239,15 @@ const SignIn: FC = () => {
           />
         ) : (
           <Stack direction="column" alignItems="center" spacing={2}>
-            <Typography variant="h2" component="h2" id={SIGN_IN_HEADER_ID}>
-              {t(SIGN_IN_HEADER)}
-            </Typography>
+            <Stack spacing={1}>
+              <GraaspLogo
+                height={90}
+                sx={{ fill: theme.palette.primary.main }}
+              />
+              <Typography variant="h4" component="h2" id={SIGN_IN_HEADER_ID}>
+                {t(SIGN_IN_HEADER)}
+              </Typography>
+            </Stack>
             {renderSignInForm()}
             <Box justifyContent="center">
               <Button

src/components/SignUp.tsx

@@ -2,9 +2,9 @@ import { ChangeEventHandler, useEffect, useState } from 'react';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
 
 import { RecaptchaAction } from '@graasp/sdk';
-import { Button, Loader } from '@graasp/ui';
+import { Button, GraaspLogo, Loader } from '@graasp/ui';
 
-import { Stack } from '@mui/material';
+import { Stack, useTheme } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 
@@ -33,6 +33,7 @@ const { SIGN_IN_LINK_TEXT, SIGN_UP_BUTTON, SIGN_UP_HEADER, NAME_FIELD_LABEL } =
 const SignUp = () => {
   const { t, i18n } = useAuthTranslation();
   const { executeCaptcha } = useRecaptcha();
+  const theme = useTheme();
 
   const { isMobile, challenge } = useMobileAppLogin();
   const redirect = useRedirection();
@@ -153,9 +154,17 @@ const SignUp = () => {
         />
       ) : (
         <Stack direction="column" spacing={2}>
-          <Typography variant="h2" component="h2" id={SIGN_UP_HEADER_ID}>
-            {t(SIGN_UP_HEADER)}
-          </Typography>
+          <Stack spacing={1}>
+            <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
+            <Typography
+              variant="h4"
+              component="h2"
+              id={SIGN_UP_HEADER_ID}
+              textAlign="center"
+            >
+              {t(SIGN_UP_HEADER)}
+            </Typography>
+          </Stack>
           {renderForm()}
         </Stack>
       )}

src/components/SuccessContent.tsx

@@ -66,15 +66,15 @@ const SuccessContent = ({
           <MailOutlineIcon fontSize="large" sx={{ marginRight: 1 }} />
           {title}
         </Typography>
-        <Typography variant="body1">
+        <Typography variant="body1" align="justify">
           <Trans
             ns={namespaces.auth}
             i18nKey={AUTH.SIGN_IN_SUCCESS_TEXT}
             values={{ email }}
             components={{ bold: <strong /> }}
           />
         </Typography>
-        <Typography variant="body1">
+        <Typography variant="body1" align="justify">
           {t(AUTH.SIGN_IN_SUCCESS_EMAIL_PROBLEM)}
         </Typography>
         <Stack direction="row" justifyContent="center" spacing={1}>

src/main.tsx

@@ -1,4 +1,8 @@
-import { BrowserTracing, Replay, init as SentryInit } from '@sentry/react';
+import {
+  init as SentryInit,
+  browserTracingIntegration,
+  replayIntegration,
+} from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import ReactGA from 'react-ga4';
@@ -23,8 +27,8 @@ if (GA_MEASUREMENT_ID && hasAcceptedCookies() && import.meta.env.PROD) {
 SentryInit({
   dsn: SENTRY_DSN,
   integrations: [
-    new BrowserTracing(),
-    new Replay({
+    browserTracingIntegration(),
+    replayIntegration({
       maskAllText: false,
       maskAllInputs: false,
       // allows to capture details for requests to the api