From e5de5a43457897f65d44ae7a0caf6e329fe2ddb7 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 11 Jul 2024 15:06:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20create=20IconBG=20comp?=
 =?UTF-8?q?onent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create IconBG component, a premade Icon component
with a background color.
---
 .../apps/impress/src/components/Icon.tsx      | 46 +++++++++++++++++++
 .../impress/src/components/IconOptions.tsx    | 21 ---------
 .../apps/impress/src/components/index.ts      |  3 +-
 .../members-add/components/AddMembers.tsx     | 19 ++------
 4 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/components/Icon.tsx
 delete mode 100644 src/frontend/apps/impress/src/components/IconOptions.tsx

diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
new file mode 100644
index 00000000..ba9719bc
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -0,0 +1,46 @@
+import { Text, TextType } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+interface IconBGProps extends TextType {
+  iconName: string;
+}
+
+export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Text
+      $isMaterialIcon
+      $size="36px"
+      $theme="primary"
+      $background={colorsTokens()['primary-bg']}
+      $css={`border: 1px solid ${colorsTokens()['primary-200']}`}
+      $radius="12px"
+      $padding="4px"
+      $margin="auto"
+      {...textProps}
+    >
+      {iconName}
+    </Text>
+  );
+};
+
+interface IconOptionsProps {
+  isOpen: boolean;
+  'aria-label': string;
+}
+
+export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
+  return (
+    <Text
+      aria-label={props['aria-label']}
+      $isMaterialIcon
+      $css={`
+        transition: all 0.3s ease-in-out;
+        transform: rotate(${isOpen ? '90' : '0'}deg);
+      `}
+    >
+      more_vert
+    </Text>
+  );
+};
diff --git a/src/frontend/apps/impress/src/components/IconOptions.tsx b/src/frontend/apps/impress/src/components/IconOptions.tsx
deleted file mode 100644
index 293f1b8c..00000000
--- a/src/frontend/apps/impress/src/components/IconOptions.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Text } from '@/components';
-
-interface IconOptionsProps {
-  isOpen: boolean;
-  'aria-label': string;
-}
-
-export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
-  return (
-    <Text
-      aria-label={props['aria-label']}
-      className="material-icons"
-      $css={`
-        transition: all 0.3s ease-in-out;
-        transform: rotate(${isOpen ? '90' : '0'}deg);
-      `}
-    >
-      more_vert
-    </Text>
-  );
-};
diff --git a/src/frontend/apps/impress/src/components/index.ts b/src/frontend/apps/impress/src/components/index.ts
index fa6ac7b1..12e38318 100644
--- a/src/frontend/apps/impress/src/components/index.ts
+++ b/src/frontend/apps/impress/src/components/index.ts
@@ -2,7 +2,8 @@ export * from './Box';
 export * from './BoxButton';
 export * from './Card';
 export * from './DropButton';
-export * from './IconOptions';
+export * from './Icon';
+export * from './InfiniteScroll';
 export * from './Link';
 export * from './Text';
 export * from './TextErrors';
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx b/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
index b30f1298..2dd6448d 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
+++ b/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
@@ -7,8 +7,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
-import { Box, Card, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
+import { Box, Card, IconBG } from '@/components';
 import { Doc, Role } from '@/features/docs/doc-management';
 
 import { useCreateDocAccess, useCreateInvitation } from '../api';
@@ -35,7 +34,6 @@ interface ModalAddMembersProps {
 
 export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
   const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
   const [selectedUsers, setSelectedUsers] = useState<OptionsSelect>([]);
   const [selectedRole, setSelectedRole] = useState<Role>();
   const { toast } = useToastProvider();
@@ -126,23 +124,12 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
     <Card
       $gap="1rem"
       $padding="1rem"
-      $margin="1rem 0.7rem"
+      $margin="tiny"
       $direction="row"
       $align="center"
       $wrap="wrap"
     >
-      <Text
-        $isMaterialIcon
-        $size="44px"
-        $theme="primary"
-        $background={colorsTokens()['primary-bg']}
-        $css={`border: 1px solid ${colorsTokens()['primary-200']}`}
-        $radius="12px"
-        $padding="4px"
-        $margin="auto"
-      >
-        group_add
-      </Text>
+      <IconBG iconName="group_add" />
       <Box $gap="0.7rem" $direction="row" $wrap="wrap" $css="flex: 70%;">
         <Box $gap="0.7rem" $direction="row" $wrap="wrap" $css="flex: 80%;">
           <Box $css="flex: auto;">