💄(frontend) create IconBG component

Create IconBG component, a premade Icon component
with a background color.

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>
+  );
+};

src/frontend/apps/impress/src/components/IconOptions.tsx

@@ -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>
-  );
-};

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';

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 { Box, Card, IconBG } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
 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
+      <IconBG iconName="group_add" />
-        $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>
       <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;">