From b2480eea74bd210e5e67103afb12f0cc70fe2bff Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 30 Sep 2024 15:57:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20minor=20componen?=
 =?UTF-8?q?ts=20refacto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve some props in different components.
---
 src/frontend/apps/impress/src/components/Box.tsx       | 8 ++++++--
 src/frontend/apps/impress/src/components/BoxButton.tsx | 2 ++
 src/frontend/apps/impress/src/components/Icon.tsx      | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 59140357..2ff2adae 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -21,7 +21,7 @@ export interface BoxProps {
   $effect?: 'show' | 'hide';
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
-  $hasTransition?: boolean;
+  $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
@@ -53,7 +53,11 @@ export const Box = styled('div')<BoxProps>`
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
-    $hasTransition && `transition: all 0.3s ease-in-out;`}
+    $hasTransition && $hasTransition === 'slow'
+      ? `transition: all 0.5s ease-in-out;`
+      : $hasTransition
+        ? `transition: all 0.3s ease-in-out;`
+        : ''}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $margin }) => $margin && stylesMargin($margin)}
   ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight};`}
diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index c64143f8..cb41ebd0 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -24,6 +24,8 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
         ref={ref}
         as="button"
         $background="none"
+        $margin="none"
+        $padding="none"
         $css={`
           cursor: pointer;
           border: none;
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index ba9719bc..163cf344 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -14,7 +14,10 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $size="36px"
       $theme="primary"
       $background={colorsTokens()['primary-bg']}
-      $css={`border: 1px solid ${colorsTokens()['primary-200']}`}
+      $css={`
+        border: 1px solid ${colorsTokens()['primary-200']}; 
+        user-select: none;
+      `}
       $radius="12px"
       $padding="4px"
       $margin="auto"
@@ -38,6 +41,7 @@ export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
       $css={`
         transition: all 0.3s ease-in-out;
         transform: rotate(${isOpen ? '90' : '0'}deg);
+        user-select: none;
       `}
     >
       more_vert