📱(frontend) improve mobile design left panel

Improve the onboarding modal design for
mobile devices.
Improve as well the left panel on mobile devices
to fit more with the Figma design.

Author: AntoLC

src/frontend/apps/impress/src/features/help/components/HelpMenu.tsx

@@ -1,4 +1,8 @@
-import { Button, useModal } from '@gouvfr-lasuite/cunningham-react';
+import {
+  Button,
+  ButtonProps,
+  useModal,
+} from '@gouvfr-lasuite/cunningham-react';
 import { DropdownMenu } from '@gouvfr-lasuite/ui-kit';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +16,11 @@ import WandAndStarsIcon from '../assets/wand-and-stars.svg';
 
 import { OnBoarding } from './OnBoarding';
 
-export const HelpMenu = () => {
+export const HelpMenu = ({
+  colorButton,
+}: {
+  colorButton?: ButtonProps['color'];
+}) => {
   const { t } = useTranslation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const modalOnbording = useModal();
@@ -53,7 +61,7 @@ export const HelpMenu = () => {
           <Box $direction="row" $align="center">
             <Button
               aria-label={t('Open onboarding menu')}
-              color="neutral"
+              color={colorButton || 'neutral'}
               variant="tertiary"
               iconPosition="left"
               icon={<HelpOutlineIcon aria-hidden="true" />}

src/frontend/apps/impress/src/features/help/components/OnBoarding.tsx

@@ -50,6 +50,20 @@ const OnBoardingStyle = createGlobalStyle`
     background-color: var(--c--contextuals--border--surface--primary);
   }
 
+  @media (max-width: 768px) {
+    .c__modal__scroller {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+
+      & .c__onboarding-modal__body{
+        justify-content: center;
+      }
+      & .c__onboarding-modal__content {
+        height:auto;
+      }
+    }
+  }
 `;
 
 type OnBoardingProps = {

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
 
-import { Box, SeparatedSection } from '@/components';
+import { Box, HorizontalSeparator, SeparatedSection } from '@/components';
 import { useConfig } from '@/core/config/api/useConfig';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
@@ -74,6 +74,7 @@ export const LeftPanel = () => {
       {isPanelOpenState && <MobileLeftPanelStyle />}
       <Box
         $hasTransition
+        $height="100vh"
         $css={css`
           z-index: 999;
           width: 100dvw;
@@ -97,25 +98,26 @@ export const LeftPanel = () => {
             align-items: center;
             gap: ${spacingsTokens['base']};
           `}
+          $height="inherit"
         >
           <LeftPanelHeader />
           <LeftPanelContent />
-          {showHelpMenu && (
+          <Box $width="100%">
+            <HorizontalSeparator $margin="none" />
             <SeparatedSection showSeparator={false}>
               <Box
-                $padding={{ horizontal: 'sm', vertical: 'xs' }}
-                $justify="flex-start"
+                $justify="end"
+                $align="center"
+                $gap={spacingsTokens['xs']}
+                $direction="row"
+                $padding={{ horizontal: 'sm' }}
               >
-                <HelpMenu />
+                <HelpMenu colorButton="brand" />
+                <ButtonLogin />
+                <LanguagePicker />
               </Box>
             </SeparatedSection>
-          )}
-          <SeparatedSection showSeparator={false}>
-            <Box $justify="center" $align="center" $gap={spacingsTokens['sm']}>
-              <ButtonLogin />
-              <LanguagePicker />
-            </Box>
-          </SeparatedSection>
+          </Box>
         </Box>
       </Box>
     </>