♻️(frontend) minor components refacto

Improve some props in different components.
numerique-gouv · Sep 30, 2024 · d389028 · d389028
1 parent 9f56d9d
commit d389028
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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