6 update layout - update colors, change logos (#7)

* feat: updates to layout for lnco graasp and prettier run * fix: update colors in fullscreen container * fix: update some wording on data-driven content and error messages * fix: remove references to Graasp from translations * fix: remove unnecessary style tag * fix: update package version and add color constant
lnco-epfl · Sep 24, 2024 · 2e34629 · 2e34629
1 parent bac130a
commit 2e34629
Show file tree

Hide file tree

Showing 19 changed files with 2,643 additions and 4,853 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -4,7 +4,7 @@ name: Release new app version
 on:
   push:
     branches:
-      - "main"
+      - 'main'
 
 permissions:
   contents: write

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -2,7 +2,7 @@ checksumBehavior: update
 
 compressionLevel: mixed
 
-defaultSemverRangePrefix: ""
+defaultSemverRangePrefix: ''
 
 enableGlobalCache: false
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/index.html b/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
+    <link rel="icon" type="image/png" href="/lnco-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Authentication portal for the Graasp ecosystem."
+      content="Authentication portal for the LNCO.ai ecosystem."
     />
     <meta name="version-info" content="%VITE_VERSION%" />
 
@@ -21,7 +21,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
     />
-    <title>Graasp Auth</title>
+    <title>LNCO.ai Auth</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -15,14 +15,16 @@
     "@emotion/styled": "11.11.5",
     "@graasp/query-client": "3.15.0",
     "@graasp/sdk": "4.17.0",
+    "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.32.0",
-    "@graasp/ui": "4.21.0",
+    "@graasp/ui": "https://github.com/lnco-epfl/graasp-ui#1-update-ui-for-lnco-graasp",
     "@mui/icons-material": "5.16.1",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.16.1",
     "@sentry/react": "7.118.0",
     "http-status-codes": "2.3.0",
     "i18next": "23.12.1",
+    "lucide-react": "0.441.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-ga4": "2.1.0",

diff --git a/public/epfl-logo.svg b/public/epfl-logo.svg
diff --git a/public/lnco-logo.png b/public/lnco-logo.png
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -19,15 +19,10 @@ import { RecaptchaProvider } from './context/RecaptchaContext';
 
 const Content = () => {
   const { i18n } = useCommonTranslation();
-
+  // The Graasp SDK has the Language Selector hidden in the code of the MUI ThemeProvider, which has a hard-coded style. To continue to use Graasp SDK with a custom style, but retain the Language Selector, I first use the Graasp Theme Provider to create the standard Graasp Theme with Language Selector and then override the Theme using the MUI Themeprovider
   return (
-    <ThemeProvider
-      i18n={i18n}
-      langs={langs}
-      languageSelectSx={{ mb: 2, mr: 2 }}
-      languageSelectLabel={null}
-    >
-      <CssBaseline />
+    <ThemeProvider langs={langs} i18n={i18n} languageSelectSx={{}}>
+      <CssBaseline enableColorScheme={false} />
       {SHOW_NOTIFICATIONS && <ToastContainer stacked />}
       <RecaptchaProvider siteKey={RECAPTCHA_SITE_KEY}>
         <App />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -15,7 +15,7 @@ const Footer = () => {
     >
       {languageSelect}
       <Typography variant="caption" color="darkgrey">
-        © Graasp 2014 - {new Date().getFullYear()}
+        © LNCO 2024 - {new Date().getFullYear()}
       </Typography>
     </Box>
   );

diff --git a/src/components/FullscreenContainer.tsx b/src/components/FullscreenContainer.tsx
@@ -1,5 +1,6 @@
 import { Box, Stack } from '@mui/material';
 
+import { AUTH_BOX_BORDER_AND_SHADOW_COLOR } from '../config/constants';
 import APIChecker from './APIChecker';
 import Footer from './Footer';
 
@@ -13,7 +14,7 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
     margin="auto"
     alignItems="center"
     justifyContent="space-between"
-    bgcolor="#f6f7fb"
+    bgcolor="rgba(0,0,0,0.08)"
     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")`,
@@ -25,12 +26,12 @@ const FullscreenContainer = ({ children }: Props): JSX.Element => (
       <Box
         alignItems="center"
         bgcolor="white"
-        border="1px solid #eaeaf7"
+        border={`1px solid ${AUTH_BOX_BORDER_AND_SHADOW_COLOR}`}
         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)"
+        boxShadow={`0px 0px 20px 5px ${AUTH_BOX_BORDER_AND_SHADOW_COLOR}`}
       >
         {children}
       </Box>

diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
@@ -2,10 +2,10 @@ import React, { FC, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { RecaptchaAction } from '@graasp/sdk';
-import { Button, GraaspLogo } from '@graasp/ui';
+import { Button } from '@graasp/ui';
 
 import { LoadingButton } from '@mui/lab';
-import { Stack, useTheme } from '@mui/material';
+import { Stack } from '@mui/material';
 import Box from '@mui/material/Box';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
@@ -46,7 +46,6 @@ const {
 const SignIn: FC = () => {
   const { t } = useAuthTranslation();
   const { executeCaptcha } = useRecaptcha();
-  const theme = useTheme();
 
   const { isMobile, challenge } = useMobileAppLogin();
   const { search } = useLocation();
@@ -270,11 +269,13 @@ const SignIn: FC = () => {
         ) : (
           <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}>
+              <img alt="LNCO Logo" height="200" src="/lnco-logo.png" />
+              <Typography
+                variant="h4"
+                component="h2"
+                id={SIGN_IN_HEADER_ID}
+                sx={{ textAlign: 'center' }}
+              >
                 {t(SIGN_IN_HEADER)}
               </Typography>
             </Stack>
@@ -285,6 +286,7 @@ const SignIn: FC = () => {
                 disabled={signInMethod === SIGN_IN_METHODS.EMAIL}
                 onClick={handleSignInMethod}
                 id={EMAIL_SIGN_IN_METHOD_BUTTON_ID}
+                color={'primary'}
               >
                 {t(EMAIL_SIGN_IN_METHOD)}
               </Button>
@@ -293,6 +295,7 @@ const SignIn: FC = () => {
                 disabled={signInMethod === SIGN_IN_METHODS.PASSWORD}
                 onClick={handleSignInMethod}
                 id={PASSWORD_SIGN_IN_METHOD_BUTTON_ID}
+                color={'primary'}
               >
                 {t(PASSWORD_SIGN_IN_METHOD)}
               </Button>

diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
@@ -6,10 +6,9 @@ import {
   MIN_USERNAME_LENGTH,
   RecaptchaAction,
 } from '@graasp/sdk';
-import { GraaspLogo } from '@graasp/ui';
 
 import { LoadingButton } from '@mui/lab';
-import { FormControl, LinearProgress, Stack, useTheme } from '@mui/material';
+import { FormControl, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 import { useAuthTranslation } from '../config/i18n';
@@ -46,7 +45,6 @@ const {
 const SignUp = () => {
   const { t, i18n } = useAuthTranslation();
   const { executeCaptcha } = useRecaptcha();
-  const theme = useTheme();
 
   const { isMobile, challenge } = useMobileAppLogin();
   const redirect = useRedirection();
@@ -160,9 +158,9 @@ const SignUp = () => {
   }
 
   return (
-    <Stack direction="column" spacing={2}>
+    <Stack direction="column" alignItems="center" spacing={2}>
       <Stack spacing={1}>
-        <GraaspLogo height={90} sx={{ fill: theme.palette.primary.main }} />
+        <img alt="LNCO Logo" height="200" src="/lnco-logo.png" />
         <Typography
           variant="h4"
           component="h2"

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -1 +1,2 @@
 export const MAX_CHECKBOX_LABEL_WITH_PX_SIGN_UP = 330;
+export const AUTH_BOX_BORDER_AND_SHADOW_COLOR = 'rgba(40,40,40,0.4)';
diff --git a/src/langs/de.json b/src/langs/de.json
@@ -15,17 +15,17 @@
   "SIGN_IN_HEADER": "Einloggen",
   "SIGN_IN_LINK_TEXT": "Sie haben bereits ein Konto? Klicken Sie hier, um sich anzumelden",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Wenn Sie keine E-Mail erhalten haben, überprüfen Sie Ihren Spam-Ordner. Wenn Sie eine institutionelle E-Mail (z. B. eine Schule oder ein Unternehmen) verwendet haben, wurde diese möglicherweise blockiert und Sie müssen warten, bis die E-Mail von Ihrem Spam-System freigegeben wird.",
-  "SIGN_IN_SUCCESS_TEXT": "Bitte überprüfen Sie Ihren Emails <bold>{{email}}</bold>, um Ihren persönlichen Login-Link für den Zugriff auf Graasp abzurufen. Dies kann mehrere Minuten dauern.",
+  "SIGN_IN_SUCCESS_TEXT": "Bitte überprüfen Sie Ihren Emails <bold>{{email}}</bold>, um Ihren persönlichen Login-Link für den Zugriff auf LNCO.ai abzurufen. Dies kann mehrere Minuten dauern.",
   "SIGN_IN_SUCCESS_TITLE": "Willkommen zurück!",
   "SIGN_UP_BUTTON": "Anmelden",
   "SIGN_UP_HEADER": "Anmelden",
   "SIGN_UP_LINK_TEXT": "Nicht registriert? Klicken Sie hier, um sich zu registrieren",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Aktivieren Sie die Speicherung datengesteuerter Erkenntnisse für erweiterte Analyse-Dashboards",
-  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Wir sammeln Analysedaten, um Ihre Benutzererfahrung beim Surfen auf Graasp zu verbessern.",
+  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Wir sammeln Analysedaten, um Ihre Benutzererfahrung beim Surfen auf LNCO.ai zu verbessern.",
   "SIGN_UP_SUCCESS_TITLE": "Willkommen!",
   "SWITCH_ACCOUNT_TEXT": "Auf ein anderes Konto wechseln",
   "API_UNAVAILABLE_TITLE": "Serververbindungsfehler",
-  "API_UNAVAILABLE_EXPLANATION": "Der Graasp-Server scheint momentan nicht erreichbar.",
+  "API_UNAVAILABLE_EXPLANATION": "Der LNCO.ai-Server scheint momentan nicht erreichbar.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Bitte versuchen Sie es später erneut.",
   "API_UNAVAILABLE_BUTTON": "Wiederholen",
   "USER_AGREEMENTS_TERMS_OF_SERVICE": "Nutzungsbedingungen",

diff --git a/src/langs/en.json b/src/langs/en.json
@@ -15,17 +15,17 @@
   "SIGN_IN_HEADER": "Sign In",
   "SIGN_IN_LINK_TEXT": "Already have an account? Click here to sign in",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "If you did not receive any email, check your spam. If you used an institutional email (ie. school, company), it might have been blocked and will have to wait until the email is released by your spam system.",
-  "SIGN_IN_SUCCESS_TEXT": "Please check your inbox <bold>{{email}}</bold> to retrieve your personal login link to access Graasp. This can take several minutes.",
+  "SIGN_IN_SUCCESS_TEXT": "Please check your inbox <bold>{{email}}</bold> to retrieve your personal login link to access LNCO.ai. This can take several minutes.",
   "SIGN_IN_SUCCESS_TITLE": "Welcome back!",
   "SIGN_UP_BUTTON": "Sign Up",
   "SIGN_UP_HEADER": "Sign Up",
   "SIGN_UP_LINK_TEXT": "Not registered? Click here to register",
-  "SIGN_UP_SAVE_ACTIONS_LABEL": "Activate data-driven insights saving for enhanced analytics dashboards",
+  "SIGN_UP_SAVE_ACTIONS_LABEL": "Activate the storage of data-driven insights to enable enhanced analytics dashboards",
   "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "We collect analytic data to improve your user experience while browsing Graasp.",
   "SIGN_UP_SUCCESS_TITLE": "Welcome!",
   "SWITCH_ACCOUNT_TEXT": "Switch to another account",
   "API_UNAVAILABLE_TITLE": "Server Connection Error",
-  "API_UNAVAILABLE_EXPLANATION": "The Graasp server seems unreachable for the moment.",
+  "API_UNAVAILABLE_EXPLANATION": "The LNCO.ai server seems unreachable for the moment.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Please try again later.",
   "API_UNAVAILABLE_BUTTON": "Retry",
   "USER_AGREEMENTS_TERMS_OF_SERVICE": "terms of service",

diff --git a/src/langs/es.json b/src/langs/es.json
@@ -15,17 +15,17 @@
   "SIGN_IN_HEADER": "Iniciar sesión",
   "SIGN_IN_LINK_TEXT": "¿Ya tienes una cuenta? Clic aquí para ingresar",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Si no recibiste ningún correo electrónico, revisa tu spam. Si utilizó un correo electrónico institucional (es decir, escuela, empresa), es posible que haya sido bloqueado y tendrá que esperar hasta que su sistema de spam libere el correo electrónico.",
-  "SIGN_IN_SUCCESS_TEXT": "Revise su bandeja de entrada <bold>{{email}}</bold> para recuperar su enlace de inicio de sesión personal para acceder a Graasp. Esto puede tardar varios minutos.",
+  "SIGN_IN_SUCCESS_TEXT": "Revise su bandeja de entrada <bold>{{email}}</bold> para recuperar su enlace de inicio de sesión personal para acceder a LNCO.ai. Esto puede tardar varios minutos.",
   "SIGN_IN_SUCCESS_TITLE": "¡Bienvenido de nuevo!",
   "SIGN_UP_BUTTON": "Inscribirse",
   "SIGN_UP_HEADER": "Inscribirse",
   "SIGN_UP_LINK_TEXT": "¿No registrado? Pulse aquí para registrarse",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Activar el ahorro de información basada en datos para mejorar los paneles de análisis",
-  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Recopilamos datos analíticos para mejorar su experiencia de usuario mientras navega por Graasp.",
+  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Recopilamos datos analíticos para mejorar su experiencia de usuario mientras navega por LNCO.ai.",
   "SIGN_UP_SUCCESS_TITLE": "¡Bienvenido!",
   "SWITCH_ACCOUNT_TEXT": "Cambiar a otra cuenta",
   "API_UNAVAILABLE_TITLE": "Error de conexión del servidor",
-  "API_UNAVAILABLE_EXPLANATION": "El servidor Graasp parece inaccesible por el momento.",
+  "API_UNAVAILABLE_EXPLANATION": "El servidor LNCO.ai parece inaccesible por el momento.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Por favor, inténtelo de nuevo más tarde.",
   "API_UNAVAILABLE_BUTTON": "Rever",
   "USER_AGREEMENTS_TERMS_OF_SERVICE": "términos de servicio",

diff --git a/src/langs/fr.json b/src/langs/fr.json
@@ -15,17 +15,17 @@
   "SIGN_IN_HEADER": "Se connecter",
   "SIGN_IN_LINK_TEXT": "Déjà un compte? Cliquez ici pour vous connecter",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Si vous ne recevez aucun email, vérifiez vos spams. Si vous avez utilisé un email d'une institution, celle-ci peut avoir bloqué l'email de connexion. Cet email sera disponible dans une plus longue période de temps.",
-  "SIGN_IN_SUCCESS_TEXT": "Vous trouverez dans votre boîte mail <bold>{{email}}</bold> votre lien de connexion personnel pour accéder à Graasp. L'email peut prendre quelques minutes à arriver.",
+  "SIGN_IN_SUCCESS_TEXT": "Vous trouverez dans votre boîte mail <bold>{{email}}</bold> votre lien de connexion personnel pour accéder à LNCO.ai. L'email peut prendre quelques minutes à arriver.",
   "SIGN_IN_SUCCESS_TITLE": "Bon retour !",
   "SIGN_UP_BUTTON": "S'enregistrer",
   "SIGN_UP_HEADER": "S'enregistrer",
   "SIGN_UP_LINK_TEXT": "Pas encore enregistré ? Cliquez ici pour vous enregistrer",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Activer l'enregistrement des données pour améliorer les tableaux de bord analytiques",
-  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Nous recueillons des données analytiques afin d'améliorer votre expérience utilisateur lorsque vous naviguez sur Graasp.",
+  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Nous recueillons des données analytiques afin d'améliorer votre expérience utilisateur lorsque vous naviguez sur LNCO.ai.",
   "SIGN_UP_SUCCESS_TITLE": "Bienvenue !",
   "SWITCH_ACCOUNT_TEXT": "Utiliser un autre compte",
   "API_UNAVAILABLE_TITLE": "Erreur de connexion au serveur",
-  "API_UNAVAILABLE_EXPLANATION": "Le serveur Graasp semble injoignable pour le moment.",
+  "API_UNAVAILABLE_EXPLANATION": "Le serveur LNCO.ai semble injoignable pour le moment.",
   "API_UNAVAILABLE_INSTRUCTIONS": "Veuillez réessayer plus tard.",
   "API_UNAVAILABLE_BUTTON": "Recommencez",
   "USER_AGREEMENTS_TERMS_OF_SERVICE": "conditions d'utilisation",

diff --git a/src/langs/it.json b/src/langs/it.json
@@ -15,13 +15,13 @@
   "SIGN_IN_HEADER": "Registrazione",
   "SIGN_IN_LINK_TEXT": "Hai già un account? Clicca qui per accedere",
   "SIGN_IN_SUCCESS_EMAIL_PROBLEM": "Se non hai ricevuto nessuna email, controlla lo spam. Se hai utilizzato un'e-mail istituzionale (es. scuola, azienda), potrebbe essere stata bloccata e dovrai attendere fino a quando l'e-mail non verrà rilasciata dal tuo sistema antispam.",
-  "SIGN_IN_SUCCESS_TEXT": "Controlla la tua casella di posta <bold>{{email}}</bold> per recuperare il tuo link di accesso personale per accedere a Graasp. L'operazione può richiedere diversi minuti.",
+  "SIGN_IN_SUCCESS_TEXT": "Controlla la tua casella di posta <bold>{{email}}</bold> per recuperare il tuo link di accesso personale per accedere a LNCO.ai. L'operazione può richiedere diversi minuti.",
   "SIGN_IN_SUCCESS_TITLE": "Bentornato!",
   "SIGN_UP_BUTTON": "Iscrizione",
   "SIGN_UP_HEADER": "Iscrizione",
   "SIGN_UP_LINK_TEXT": "Non registrato? Clicca qui per registrarti",
   "SIGN_UP_SAVE_ACTIONS_LABEL": "Attivare il salvataggio degli insight guidati dai dati per migliorare i cruscotti analitici",
-  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Raccogliamo dati analitici per migliorare l'esperienza dell'utente durante la navigazione su Graasp.",
+  "SIGN_UP_SAVE_ACTIONS_TOOLTIP": "Raccogliamo dati analitici per migliorare l'esperienza dell'utente durante la navigazione su LNCO.ai.",
   "SIGN_UP_SUCCESS_TITLE": "Benvenuto!",
   "SWITCH_ACCOUNT_TEXT": "Passa a un altro account"
 }