From c0d919ae525d0eadd4d5076783da3fbc8550e557 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 14 May 2024 10:07:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-impress)=20re-design=20icon=20?=
 =?UTF-8?q?close=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We deleted the menu, so we have to retouch
a bit the icon close panel to fit the new design.
We change the icon to have something more
intuitive by using material icons.
---
 .../pads-panel/assets/icon-open-close.svg     | 14 -------------
 .../pads/pads-panel/components/Panel.tsx      | 20 ++++++++++++-------
 2 files changed, 13 insertions(+), 21 deletions(-)
 delete mode 100644 src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-open-close.svg

diff --git a/src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-open-close.svg b/src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-open-close.svg
deleted file mode 100644
index b894e495..00000000
--- a/src/frontend/apps/impress/src/features/pads/pads-panel/assets/icon-open-close.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle
-    cx="12"
-    cy="12"
-    r="11.5"
-    transform="rotate(-180 12 12)"
-    fill="white"
-    stroke="currentColor"
-  />
-  <path
-    d="M14.1683 16.232C14.4803 15.92 14.4803 15.416 14.1683 15.104L11.0643 12L14.1683 8.896C14.4803 8.584 14.4803 8.08 14.1683 7.768C13.8563 7.456 13.3523 7.456 13.0403 7.768L9.36834 11.44C9.05634 11.752 9.05634 12.256 9.36834 12.568L13.0403 16.24C13.3443 16.544 13.8563 16.544 14.1683 16.232Z"
-    fill="currentColor"
-  />
-</svg>
diff --git a/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx b/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx
index cdc1c009..c2199793 100644
--- a/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx
@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { Box, BoxButton, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
-import IconOpenClose from '../assets/icon-open-close.svg';
-
 import { PadList } from './PadList';
 import { PanelActions } from './PanelActions';
 
@@ -38,20 +36,28 @@ export const Panel = () => {
       {...closedOverridingStyles}
     >
       <BoxButton
+        className="material-icons"
         aria-label={
           isOpen ? t('Close the pads panel') : t('Open the pads panel')
         }
+        $background="white"
         $color={colorsTokens()['primary-600']}
+        $radius="100%"
+        $padding="0.3rem"
+        $position="absolute"
+        onClick={() => setIsOpen(!isOpen)}
         $css={`
-          position: absolute;
-          right: -1.2rem;
-          top: 1.03rem;
+          right: ${isOpen ? '-1.3' : '-2.8'}rem;
+          top: ${isOpen ? '0.7' : '0.25'}rem;
           transform: rotate(${isOpen ? '0' : '180'}deg);
           transition: ${transition};
+          font-size: 1.8rem;
+          border: 1px solid #fafafa;
+          box-shadow: ${isOpen ? '1px 1px' : '-1px -1px'} 3px #dfdfdf;
+          z-index: 1;
         `}
-        onClick={() => setIsOpen(!isOpen)}
       >
-        <IconOpenClose width={24} height={24} />
+        menu_open
       </BoxButton>
       <Box
         $css={`