From 6ad1e27acf5f7a63121110ccb8307504dac45805 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 23 Dec 2024 10:31:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20UI=20components?=
 =?UTF-8?q?=20and=20improve=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated DropdownMenu and ButtonLogin components for better
accessibility and visual consistency.
- Refactored Header and Title components to utilize new theming and
spacing tokens.
- Enhanced LanguagePicker styles for improved user experience.
- Introduced new utility functions in doc-management for better handling
of ProseMirror nodes and Yjs integration.
- Cleaned up unused imports and adjusted component styles for overall
code maintainability.
---
 .../impress/src/components/DropdownMenu.tsx   |  8 ++---
 .../impress/src/core/auth/ButtonLogin.tsx     | 15 ++------
 .../src/features/header/components/Header.tsx | 10 ++++--
 .../header/components/Title/Title.tsx         | 35 ++++++++++---------
 .../src/features/language/LanguagePicker.tsx  | 12 +++++--
 5 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
index 2f4196b5..82e80fc6 100644
--- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
@@ -50,6 +50,7 @@ export const DropdownMenu = ({
           <Box $direction="row" $align="center">
             <div>{children}</div>
             <Icon
+              $variation="600"
               $css={
                 arrowCss ??
                 css`
@@ -67,7 +68,7 @@ export const DropdownMenu = ({
       <Box $maxWidth="320px">
         {topMessage && (
           <Text
-            $variation="1000"
+            $variation="700"
             $wrap="wrap"
             $size="xs"
             $weight="bold"
@@ -123,10 +124,7 @@ export const DropdownMenu = ({
                     iconName={option.icon}
                   />
                 )}
-                <Text
-                  $margin={{ top: '-3px' }}
-                  $variation={isDisabled ? '400' : '1000'}
-                >
+                <Text $variation={isDisabled ? '400' : '1000'}>
                   {option.label}
                 </Text>
               </Box>
diff --git a/src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx b/src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx
index f54fab32..abbdc437 100644
--- a/src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx
+++ b/src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@openfun/cunningham-react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthStore } from '@/core/auth';
@@ -10,24 +9,14 @@ export const ButtonLogin = () => {
 
   if (!authenticated) {
     return (
-      <Button
-        onClick={login}
-        color="primary-text"
-        icon={<span className="material-icons">login</span>}
-        aria-label={t('Login')}
-      >
+      <Button onClick={login} color="primary-text" aria-label={t('Login')}>
         {t('Login')}
       </Button>
     );
   }
 
   return (
-    <Button
-      onClick={logout}
-      color="primary-text"
-      icon={<span className="material-icons">logout</span>}
-      aria-label={t('Logout')}
-    >
+    <Button onClick={logout} color="primary-text" aria-label={t('Logout')}>
       {t('Logout')}
     </Button>
   );
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index 53ec256a..de6eb6e6 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -50,8 +50,14 @@ export const Header = () => {
           size="medium"
           onClick={() => togglePanel()}
           aria-label={t('Open the header menu')}
-          color="primary-text"
-          icon={<Icon iconName={isPanelOpen ? 'close' : 'menu'} />}
+          color="tertiary-text"
+          icon={
+            <Icon
+              $variation="800"
+              $theme="primary"
+              iconName={isPanelOpen ? 'close' : 'menu'}
+            />
+          }
         />
       )}
       <StyledLink href="/">
diff --git a/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
index ae4b9874..afc16f01 100644
--- a/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
@@ -1,30 +1,31 @@
 import { useTranslation } from 'react-i18next';
 
-import { Text } from '@/components/';
+import { Box, Text } from '@/components/';
+import { useCunninghamTheme } from '@/cunningham';
 
 const Title = () => {
   const { t } = useTranslation();
+  const theme = useCunninghamTheme();
+  const spacings = theme.spacingsTokens();
+  const colors = theme.colorsTokens();
 
   return (
-    <>
-      <Text
-        $padding="2px 3px"
-        $size="8px"
-        $background="#368bd6"
-        $color="white"
-        $position="absolute"
-        $radius="5px"
-        $css={`
-          bottom: 13px;
-          right: -17px;
-        `}
-      >
-        BETA
-      </Text>
+    <Box $direction="row" $align="center" $gap={spacings['2xs']}>
       <Text $margin="none" as="h2" $color="#000091" $zIndex={1} $size="1.30rem">
         {t('Docs')}
       </Text>
-    </>
+      <Text
+        $padding={{ horizontal: 'xs', vertical: '1px' }}
+        $size="11px"
+        $theme="primary"
+        $variation="500"
+        $weight="bold"
+        $radius="12px"
+        $background={colors['primary-200']}
+      >
+        BETA
+      </Text>
+    </Box>
   );
 };
 
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index 6e618874..a9a4135e 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -27,7 +27,7 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
     }
 
     &:hover {
-      box-shadow: var(--c--theme--colors--primary-100) 0 0 0 2px !important;
+      box-shadow: none !important;
     }
   }
 `;
@@ -48,10 +48,16 @@ export const LanguagePicker = () => {
           $gap="0.7rem"
           $align="center"
         >
-          <Text $isMaterialIcon $size="1rem" $theme="primary" $variation="600">
+          <Text
+            $isMaterialIcon
+            $size="1rem"
+            $theme="primary"
+            $weight="bold"
+            $variation="800"
+          >
             translate
           </Text>
-          <Text $theme="primary" $variation="600">
+          <Text $theme="primary" $weight="500" $variation="800">
             {LANGUAGES_ALLOWED[lang]}
           </Text>
         </Box>