From 6a6154659f19514a81751b7c0539194c6579bb15 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 7 Jul 2026 10:14:20 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20improve=20ui/ux=20befo?=
 =?UTF-8?q?re=20release?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following the recommendations of the design team,
we lightly improved some UI/UX elements to be
more consistent and user-friendly before the
next release.

It includes the following changes:
- add a background to the grid
- add a fadein to the header buttons
- reduce the generic size icon
- add a title to the doc item
---
 .../impress/configuration/theme/default.json  |  2 +-
 .../apps/impress/src/components/Effect.tsx    | 56 +++++++++++++++++++
 .../components/SimpleDocItem.tsx              |  1 +
 .../docs/docs-grid/components/DocsGrid.tsx    |  3 +-
 .../header/components/HeaderFloatingBar.tsx   | 19 ++++---
 .../components/LeftPanelCollapseButton.tsx    |  6 +-
 .../apps/impress/src/layouts/MainLayout.tsx   | 28 +++++++---
 .../apps/impress/src/pages/docs/index.tsx     | 10 +++-
 8 files changed, 103 insertions(+), 22 deletions(-)

diff --git a/src/backend/impress/configuration/theme/default.json b/src/backend/impress/configuration/theme/default.json
index 3f87d89c7..4c752dd48 100644
--- a/src/backend/impress/configuration/theme/default.json
+++ b/src/backend/impress/configuration/theme/default.json
@@ -142,7 +142,7 @@
     "icon": {
       "src": "/assets/icon-docs.svg",
       "style": {
-        "width": "40px",
+        "width": "36px",
         "height": "auto"
       },
       "alt": "",
diff --git a/src/frontend/apps/impress/src/components/Effect.tsx b/src/frontend/apps/impress/src/components/Effect.tsx
index 53cffc2a4..5d79c8c2f 100644
--- a/src/frontend/apps/impress/src/components/Effect.tsx
+++ b/src/frontend/apps/impress/src/components/Effect.tsx
@@ -1,3 +1,6 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
 export const showEffect = `
   transform: scaleY(1);
   opacity: 1;
@@ -9,3 +12,56 @@ export const hideEffect = `
   opacity: 0;
   max-height: 0;
 `;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+
+const FadeItem = styled.div<{ $isVisible: boolean }>`
+  display: flex;
+  animation: ${({ $isVisible }) => ($isVisible ? fadeIn : fadeOut)} 0.2s ease
+    forwards;
+`;
+
+export const FadeComponent = ({
+  children,
+  isVisible,
+}: PropsWithChildren<{ isVisible: boolean }>) => {
+  const [isGroupMounted, setIsGroupMounted] = useState(isVisible);
+
+  useEffect(() => {
+    if (isVisible) {
+      setIsGroupMounted(true);
+    }
+  }, [isVisible]);
+
+  const handleFadeOutEnd = () => {
+    if (!isVisible) {
+      setIsGroupMounted(false);
+    }
+  };
+
+  if (!isGroupMounted) {
+    return null;
+  }
+
+  return (
+    <FadeItem $isVisible={isVisible} onAnimationEnd={handleFadeOutEnd}>
+      {children}
+    </FadeItem>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index ce0c88fe8..1dc0c2e0b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -100,6 +100,7 @@ export const SimpleDocItem = ({
           $weight="500"
           $css={ItemTextCss}
           data-testid="doc-title"
+          title={docTitle}
         >
           {docTitle}
         </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index d32e97407..1f0747162 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -90,10 +90,9 @@ export const DocsGrid = ({
       <DocsGridLoader isLoading={isRefetching || loading || isImportPending} />
       <Card
         data-testid="docs-grid"
-        $height="100%"
         $width="100%"
         $css={css`
-          border: none;
+          border: 1px solid var(--c--contextuals--border--surface--primary);
           ${isDragOver
             ? `
               border: 2px dashed var(--c--contextuals--border--semantic--brand--primary);
diff --git a/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx b/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
index 01726ee8f..c75930431 100644
--- a/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { FadeComponent } from '@/components/Effect';
 import { CardFloatingBar, FloatingBar } from '@/components/FloatingBar';
 import { DocSearchButtonModal } from '@/features/docs/doc-search/components/DocSearchButtonModal';
 import { LeftPanelCollapseButton } from '@/features/left-panel/components/LeftPanelCollapseButton';
@@ -13,19 +14,21 @@ export const HeaderFloatingBar = () => {
   const { t } = useTranslation();
   const { isPanelOpen } = useLeftPanelStore();
 
+  const isVisible = (isTablet && !isPanelOpen) || isMobile;
+
   return (
     <FloatingBar $align="center">
       {isTablet && (
         <LeftPanelCollapseButton ariaLabel={t('Toggle left panel')} />
       )}
-      {(isTablet && !isPanelOpen) || isMobile ? (
-        <>
-          <HeaderIcon />
-          <CardFloatingBar>
-            <DocSearchButtonModal size="small" color="neutral" />
-          </CardFloatingBar>
-        </>
-      ) : null}
+      <FadeComponent isVisible={isVisible}>
+        <HeaderIcon />
+      </FadeComponent>
+      <FadeComponent isVisible={isVisible}>
+        <CardFloatingBar>
+          <DocSearchButtonModal size="small" color="neutral" />
+        </CardFloatingBar>
+      </FadeComponent>
     </FloatingBar>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
index c0df08fe5..7ca7dea0f 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@gouvfr-lasuite/cunningham-react';
 
 import { Text } from '@/components';
+import { FadeComponent } from '@/components/Effect';
 import { CardFloatingBar } from '@/components/FloatingBar';
 
 import LeftPanelIcon from '../assets/left-panel.svg';
@@ -27,15 +28,16 @@ export const LeftPanelCollapseButton = ({
         icon={<LeftPanelIcon width={24} height={24} aria-hidden="true" />}
         data-testid="floating-bar-toggle-left-panel"
       ></Button>
-      {buttonTitle && (
+      <FadeComponent isVisible={!!buttonTitle}>
         <Text
           $size="sm"
           $weight={700}
           $color="var(--c--globals--colors--gray-1000)"
+          $padding={{ right: '2xs' }}
         >
           {buttonTitle}
         </Text>
-      )}
+      </FadeComponent>
     </CardFloatingBar>
   );
 };
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 9a19293c0..835bce5aa 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, BoxProps } from '@/components';
+import { Box, BoxType } from '@/components';
 import { LeftPanel, ResizableLeftPanel } from '@/features/left-panel';
 import { RightPanel } from '@/features/right-panel/components/RightPanel';
 import { DocEditorSkeleton, Skeleton } from '@/features/skeletons';
@@ -12,11 +12,15 @@ import { usePanelCoordination } from './usePanelCoordination';
 
 type MainLayoutProps = {
   enableResizablePanel?: boolean;
+  propsLayout?: BoxType;
+  propsContent?: BoxType;
 };
 
 export function MainLayout({
   children,
   enableResizablePanel = false,
+  propsLayout,
+  propsContent,
 }: PropsWithChildren<MainLayoutProps>) {
   return (
     <Box
@@ -24,42 +28,50 @@ export function MainLayout({
       $direction="row"
       $width="100%"
       $height="100dvh"
+      {...propsLayout}
     >
-      <MainLayoutContent enableResizablePanel={enableResizablePanel}>
+      <MainLayoutContent
+        enableResizablePanel={enableResizablePanel}
+        {...propsContent}
+      >
         {children}
       </MainLayoutContent>
     </Box>
   );
 }
 
-export interface MainLayoutContentProps {
+export interface MainLayoutContentProps extends BoxType {
   enableResizablePanel: boolean;
 }
 
 export function MainLayoutContent({
   children,
   enableResizablePanel,
+  ...props
 }: PropsWithChildren<MainLayoutContentProps>) {
   if (enableResizablePanel) {
-    return <MainResizableLayout>{children}</MainResizableLayout>;
+    return <MainResizableLayout {...props}>{children}</MainResizableLayout>;
   }
 
   return (
     <>
       <LeftPanel />
-      <MainContent>{children}</MainContent>
+      <MainContent {...props}>{children}</MainContent>
       <RightPanel />
     </>
   );
 }
 
-const MainResizableLayout = ({ children }: PropsWithChildren) => {
+const MainResizableLayout = ({
+  children,
+  ...props
+}: PropsWithChildren<BoxType>) => {
   usePanelCoordination();
 
   return (
     <ResizableLeftPanel>
       <Box $direction="row" $width="100%" $position="relative">
-        <MainContent $flex="auto" $padding="0">
+        <MainContent $flex="auto" $padding="0" {...props}>
           {children}
         </MainContent>
         <RightPanel />
@@ -71,7 +83,7 @@ const MainResizableLayout = ({ children }: PropsWithChildren) => {
 export const MainContent = ({
   children,
   ...props
-}: PropsWithChildren<BoxProps>) => {
+}: PropsWithChildren<BoxType>) => {
   const { t } = useTranslation();
 
   return (
diff --git a/src/frontend/apps/impress/src/pages/docs/index.tsx b/src/frontend/apps/impress/src/pages/docs/index.tsx
index a8afdc29d..cd594e263 100644
--- a/src/frontend/apps/impress/src/pages/docs/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/index.tsx
@@ -35,7 +35,15 @@ const Page: NextPageWithLayout = () => {
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {
-  return <MainLayout>{page}</MainLayout>;
+  return (
+    <MainLayout
+      propsContent={{
+        $background: 'var(--c--contextuals--background--surface--tertiary)',
+      }}
+    >
+      {page}
+    </MainLayout>
+  );
 };
 
 export default Page;