From d88f6a5a51eabe2206210b4017960cebdf7d6f2b Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 29 Apr 2024 14:21:36 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20replace=20classn?=
 =?UTF-8?q?ame=20spacings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the classname spacings with the new
spacing system based on props.
---
 .../apps/desk/src/components/TextErrors.tsx      |  4 ++--
 .../addMembers/components/ModalAddMembers.tsx    |  8 ++++----
 .../apps/desk/src/features/header/Header.tsx     |  4 ++--
 .../features/mails/components/MailContent.tsx    |  2 +-
 .../features/members/components/MemberGrid.tsx   |  6 +++---
 .../features/members/components/ModalDelete.tsx  | 11 +++++++----
 .../features/members/components/ModalRole.tsx    |  7 +++++--
 .../apps/desk/src/features/menu/Menu.tsx         |  5 +++--
 .../apps/desk/src/features/menu/MenuItems.tsx    |  3 ++-
 .../apps/desk/src/features/menu/Tooltip.tsx      |  3 ++-
 .../features/teams/components/CardCreateTeam.tsx |  2 +-
 .../teams/components/ModalRemoveTeam.tsx         | 15 ++++++++++-----
 .../teams/components/ModalUpdateTeam.tsx         |  9 ++++++---
 .../features/teams/components/Panel/Panel.tsx    |  2 +-
 .../features/teams/components/Panel/TeamItem.tsx |  2 +-
 .../features/teams/components/Panel/TeamList.tsx | 16 +++++++++++-----
 .../src/features/teams/components/TeamInfo.tsx   | 16 ++++++++++------
 src/frontend/apps/desk/src/pages/404.tsx         |  4 ++--
 .../apps/desk/src/pages/teams/create.tsx         |  2 +-
 19 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/src/frontend/apps/desk/src/components/TextErrors.tsx b/src/frontend/apps/desk/src/components/TextErrors.tsx
index 6c1d0c1..7419b99 100644
--- a/src/frontend/apps/desk/src/components/TextErrors.tsx
+++ b/src/frontend/apps/desk/src/components/TextErrors.tsx
@@ -20,7 +20,7 @@ export const TextErrors = ({
         causes.map((cause, i) => (
           <Text
             key={`causes-${i}`}
-            className="mt-s"
+            $margin={{ top: 'small' }}
             $theme="danger"
             $textAlign="center"
             {...textProps}
@@ -31,7 +31,7 @@ export const TextErrors = ({
 
       {!causes && (
         <Text
-          className="mt-s"
+          $margin={{ top: 'small' }}
           $theme="danger"
           $textAlign="center"
           {...textProps}
diff --git a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
index 355dfc8..e0ed942 100644
--- a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
+++ b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
@@ -165,14 +165,14 @@ export const ModalAddMembers = ({
       title={
         <Box $align="center" $gap="1rem">
           <IconAddMember width={48} color={colorsTokens()['primary-text']} />
-          <Text $size="h3" className="m-0">
+          <Text $size="h3" $margin="none">
             {t('Add a member')}
           </Text>
         </Box>
       }
     >
       <GlobalStyle />
-      <Box className="mb-xl mt-l">
+      <Box $margin={{ bottom: 'xl', top: 'large' }}>
         <SearchMembers
           team={team}
           setSelectedMembers={setSelectedMembers}
@@ -180,8 +180,8 @@ export const ModalAddMembers = ({
           disabled={isPending}
         />
         {selectedMembers.length > 0 && (
-          <Box className="mt-s">
-            <Text as="h4" $textAlign="left" className="mb-t">
+          <Box $margin={{ top: 'small' }}>
+            <Text as="h4" $textAlign="left" $margin={{ bottom: 'tiny' }}>
               {t('Choose a role')}
             </Text>
             <ChooseRole
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 5f13419..b73809a 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -41,7 +41,7 @@ export const Header = () => {
     <StyledHeader>
       <RedStripe />
       <Box
-        className="ml-bx mr-bx"
+        $margin={{ horizontal: 'xbig' }}
         $align="center"
         $justify="space-between"
         $direction="row"
@@ -56,7 +56,7 @@ export const Header = () => {
             />
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconApplication} alt={t('Equipes Logo')} />
-              <Text className="m-0" as="h2" $theme="primary">
+              <Text $margin="none" as="h2" $theme="primary">
                 {t('Equipes')}
               </Text>
             </Box>
diff --git a/src/frontend/apps/desk/src/features/mails/components/MailContent.tsx b/src/frontend/apps/desk/src/features/mails/components/MailContent.tsx
index 4551e75..ac8f3f0 100644
--- a/src/frontend/apps/desk/src/features/mails/components/MailContent.tsx
+++ b/src/frontend/apps/desk/src/features/mails/components/MailContent.tsx
@@ -24,7 +24,7 @@ export function MailContent() {
   ];
 
   return (
-    <Card className="m-l p-s">
+    <Card $padding="small" $margin="large">
       <DataGrid
         columns={[
           {
diff --git a/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx b/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx
index 2baea30..8679cad 100644
--- a/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx
+++ b/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx
@@ -96,7 +96,7 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
   return (
     <>
       {currentRole !== Role.MEMBER && (
-        <Box className="m-b mb-s" $align="flex-end">
+        <Box $margin={{ all: 'big', bottom: 'small' }} $align="flex-end">
           <Button
             aria-label={t('Add members to the team')}
             style={{
@@ -111,10 +111,10 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
         </Box>
       )}
       <Card
-        className="m-b pb-s"
+        $padding={{ bottom: 'small' }}
+        $margin={{ all: 'big', top: 'none' }}
         $overflow="auto"
         $css={`
-          margin-top:0;
           & .c__pagination__goto {
             display: none;
           }
diff --git a/src/frontend/apps/desk/src/features/members/components/ModalDelete.tsx b/src/frontend/apps/desk/src/features/members/components/ModalDelete.tsx
index bd8954a..b0aaca9 100644
--- a/src/frontend/apps/desk/src/features/members/components/ModalDelete.tsx
+++ b/src/frontend/apps/desk/src/features/members/components/ModalDelete.tsx
@@ -83,7 +83,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
       title={
         <Box $align="center" $gap="1rem">
           <IconRemoveMember width={48} color={colorsTokens()['primary-text']} />
-          <Text $size="h3" className="m-0">
+          <Text $size="h3" $margin="none">
             {t('Remove the member')}
           </Text>
         </Box>
@@ -98,7 +98,10 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
         </Text>
 
         {isErrorUpdate && (
-          <TextErrors className="mb-s" causes={errorUpdate.cause} />
+          <TextErrors
+            $margin={{ bottom: 'small' }}
+            causes={errorUpdate.cause}
+          />
         )}
 
         {(isLastOwner || isOtherOwner) && (
@@ -107,7 +110,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
             $direction="row"
             $align="center"
             $gap="0.5rem"
-            className="m-t"
+            $margin="tiny"
             $justify="center"
           >
             <span className="material-icons">warning</span>
@@ -121,7 +124,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
 
         <Text
           as="p"
-          className="p-b"
+          $padding="big"
           $direction="row"
           $gap="0.5rem"
           $background={colorsTokens()['primary-150']}
diff --git a/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx b/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
index 47e898f..d25c8da 100644
--- a/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
+++ b/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
@@ -87,7 +87,10 @@ export const ModalRole = ({
     >
       <Box aria-label={t('Radio buttons to update the roles')}>
         {isErrorUpdate && (
-          <TextErrors className="mb-s" causes={errorUpdate.cause} />
+          <TextErrors
+            $margin={{ bottom: 'small' }}
+            causes={errorUpdate.cause}
+          />
         )}
 
         {(isLastOwner || isOtherOwner) && (
@@ -96,7 +99,7 @@ export const ModalRole = ({
             $direction="row"
             $align="center"
             $gap="0.5rem"
-            className="mb-t"
+            $margin={{ bottom: 'tiny' }}
             $justify="center"
           >
             <span className="material-icons">warning</span>
diff --git a/src/frontend/apps/desk/src/features/menu/Menu.tsx b/src/frontend/apps/desk/src/features/menu/Menu.tsx
index 884ce95..7fdd1d9 100644
--- a/src/frontend/apps/desk/src/features/menu/Menu.tsx
+++ b/src/frontend/apps/desk/src/features/menu/Menu.tsx
@@ -19,12 +19,13 @@ export const Menu = () => {
   return (
     <Box
       as="menu"
-      className="m-0 p-0"
       $background={colorsTokens()['primary-800']}
       $height="100%"
       $justify="space-between"
+      $padding="none"
+      $margin="none"
     >
-      <Box className="pt-l" $direction="column" $gap="0.8rem">
+      <Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
         <MenuItem Icon={IconSearch} label={t('Search')} href="/" />
         <MenuItem Icon={IconMail} label={t('Mails')} href="/mails" />
         <MenuItem Icon={IconFavorite} label={t('Favorite')} href="/favorite" />
diff --git a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
index 4a0ac05..47404cd 100644
--- a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
+++ b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
@@ -46,7 +46,8 @@ const MenuItem = ({ Icon, label, href }: MenuItemProps) => {
       style={{ display: 'block' }}
     >
       <Box
-        className="m-st p-t"
+        $margin="xtiny"
+        $padding="tiny"
         as="li"
         $justify="center"
         $css={`
diff --git a/src/frontend/apps/desk/src/features/menu/Tooltip.tsx b/src/frontend/apps/desk/src/features/menu/Tooltip.tsx
index bca5282..77da07f 100644
--- a/src/frontend/apps/desk/src/features/menu/Tooltip.tsx
+++ b/src/frontend/apps/desk/src/features/menu/Tooltip.tsx
@@ -26,7 +26,8 @@ export const Tooltip = ({
     <Popover parentRef={parentRef} onClickOutside={() => ''} borderless>
       <Box
         aria-label="tooltip"
-        className="ml-t p-t"
+        $padding="tiny"
+        $margin={{ left: 'tiny' }}
         $background={backgroundColor}
         $radius="4px"
         $css={`
diff --git a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
index b9ae887..4058318 100644
--- a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
@@ -29,7 +29,7 @@ export const CardCreateTeam = () => {
 
   return (
     <Card
-      className="p-b"
+      $padding="big"
       $height="70%"
       $justify="space-between"
       $width="100%"
diff --git a/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx
index 04d2d82..d50224d 100644
--- a/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/ModalRemoveTeam.tsx
@@ -73,24 +73,29 @@ export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
       title={
         <Box $align="center" $gap="1rem">
           <IconRemove width={48} color={colorsTokens()['primary-text']} />
-          <Text $size="h3" className="m-0">
+          <Text $size="h3" $margin="none">
             {t('Deleting the {{teamName}} team', { teamName: team.name })}
           </Text>
         </Box>
       }
     >
-      <Box className="mb-xl" aria-label={t('Content modal to delete the team')}>
-        <Text as="p" className="mb-b">
+      <Box
+        $margin={{ bottom: 'xl' }}
+        aria-label={t('Content modal to delete the team')}
+      >
+        <Text as="p" $margin={{ bottom: 'big' }}>
           {t('Are you sure you want to delete {{teamName}} team?', {
             teamName: team.name,
           })}
         </Text>
 
-        {isError && <TextErrors className="mb-s" causes={error.cause} />}
+        {isError && (
+          <TextErrors $margin={{ bottom: 'small' }} causes={error.cause} />
+        )}
 
         <Text
           as="p"
-          className="p-s"
+          $padding="small"
           $direction="row"
           $gap="0.5rem"
           $background={colorsTokens()['primary-150']}
diff --git a/src/frontend/apps/desk/src/features/teams/components/ModalUpdateTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/ModalUpdateTeam.tsx
index 60d0fc6..bfd83ef 100644
--- a/src/frontend/apps/desk/src/features/teams/components/ModalUpdateTeam.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/ModalUpdateTeam.tsx
@@ -76,14 +76,17 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
       title={
         <Box $align="center" $gap="1rem">
           <IconEdit width={48} color={colorsTokens()['primary-text']} />
-          <Text $size="h3" className="m-0">
+          <Text $size="h3" $margin="none">
             {t('Update team {{teamName}}', { teamName: team.name })}
           </Text>
         </Box>
       }
     >
-      <Box className="mb-xl" aria-label={t('Content modal to update the team')}>
-        <Text as="p" className="mb-b">
+      <Box
+        $margin={{ bottom: 'xl' }}
+        aria-label={t('Content modal to update the team')}
+      >
+        <Text as="p" $margin={{ bottom: 'big' }}>
           {t('Enter the new name of the selected team')}
         </Text>
 
diff --git a/src/frontend/apps/desk/src/features/teams/components/Panel/Panel.tsx b/src/frontend/apps/desk/src/features/teams/components/Panel/Panel.tsx
index f519cfe..4457ce5 100644
--- a/src/frontend/apps/desk/src/features/teams/components/Panel/Panel.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/Panel/Panel.tsx
@@ -60,7 +60,7 @@ export const Panel = () => {
         `}
       >
         <Box
-          className="pr-l pl-s pt-s pb-s"
+          $padding={{ all: 'small', right: 'large' }}
           $direction="row"
           $align="center"
           $justify="space-between"
diff --git a/src/frontend/apps/desk/src/features/teams/components/Panel/TeamItem.tsx b/src/frontend/apps/desk/src/features/teams/components/Panel/TeamItem.tsx
index 81c3dfc..6746914 100644
--- a/src/frontend/apps/desk/src/features/teams/components/Panel/TeamItem.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/Panel/TeamItem.tsx
@@ -54,7 +54,7 @@ export const TeamItem = ({ team }: TeamProps) => {
 
   return (
     <Box
-      className="m-0"
+      $margin="none"
       as="li"
       $css={`
         transition: all 0.2s ease-in; 
diff --git a/src/frontend/apps/desk/src/features/teams/components/Panel/TeamList.tsx b/src/frontend/apps/desk/src/features/teams/components/Panel/TeamList.tsx
index c042b08..439609a 100644
--- a/src/frontend/apps/desk/src/features/teams/components/Panel/TeamList.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/Panel/TeamList.tsx
@@ -19,7 +19,7 @@ const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
 
   if (isError) {
     return (
-      <Box $justify="center" className="mb-b">
+      <Box $justify="center" $margin={{ bottom: 'big' }}>
         <Text $theme="danger" $align="center" $textAlign="center">
           {t('Something bad happens, please refresh the page.')}
         </Text>
@@ -29,7 +29,7 @@ const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
 
   if (isLoading) {
     return (
-      <Box $align="center" className="m-l">
+      <Box $align="center" $margin="large">
         <Loader />
       </Box>
     );
@@ -37,8 +37,13 @@ const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
 
   if (!teams?.length) {
     return (
-      <Box $justify="center" className="m-s">
-        <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
+      <Box $justify="center" $margin="small">
+        <Text
+          as="p"
+          $margin={{ vertical: 'none' }}
+          $theme="greyscale"
+          $variation="500"
+        >
           {t('0 group to display.')}
         </Text>
         <Text as="p" $theme="greyscale" $variation="500">
@@ -82,7 +87,8 @@ export const TeamList = () => {
         }}
         scrollContainer={containerRef.current}
         as="ul"
-        className="p-0 mt-0"
+        $margin={{ top: 'none' }}
+        $padding="none"
         role="listbox"
       >
         <TeamListState isLoading={isLoading} isError={isError} teams={teams} />
diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
index 823874a..877bf01 100644
--- a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
@@ -38,11 +38,11 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
 
   return (
     <>
-      <Card className="m-b" style={{ paddingBottom: 0 }}>
-        <Box $css="align-self: flex-end;" className="m-t" $position="absolute">
+      <Card $margin="big" $padding={{ bottom: 'none' }}>
+        <Box $css="align-self: flex-end;" $margin="tiny" $position="absolute">
           <TeamActions currentRole={currentRole} team={team} />
         </Box>
-        <Box className="m-b" $direction="row" $align="center" $gap="1.5rem">
+        <Box $margin="big" $direction="row" $align="center" $gap="1.5rem">
           <IconGroup
             width={44}
             color={colorsTokens()['primary-text']}
@@ -53,7 +53,12 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
             }}
           />
           <Box>
-            <Text as="h3" $weight="bold" $size="1.25rem" className="mt-0">
+            <Text
+              as="h3"
+              $weight="bold"
+              $size="1.25rem"
+              $margin={{ top: 'none' }}
+            >
               {t('Members of “{{teamName}}“', {
                 teamName: team.name,
               })}
@@ -66,13 +71,12 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
           </Box>
         </Box>
         <Box
-          className="p-s"
+          $padding={{ all: 'small', left: '1.5rem' }}
           $gap="3rem"
           $direction="row"
           $justify="start"
           $css={`
             border-top: 1px solid ${colorsTokens()['card-border']};
-            padding-left: 1.5rem;
           `}
         >
           <Text $size="s" as="p">
diff --git a/src/frontend/apps/desk/src/pages/404.tsx b/src/frontend/apps/desk/src/pages/404.tsx
index d1d44fd..ac2e61e 100644
--- a/src/frontend/apps/desk/src/pages/404.tsx
+++ b/src/frontend/apps/desk/src/pages/404.tsx
@@ -18,7 +18,7 @@ const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   return (
-    <Box $align="center" className="m-auto" $height="70vh" $gap="2rem">
+    <Box $align="center" $margin="auto" $height="70vh" $gap="2rem">
       <Icon404 aria-label="Image 404" role="img" />
 
       <Text $size="h2" $weight="700" $theme="greyscale" $variation="900">
@@ -31,7 +31,7 @@ const Page: NextPageWithLayout = () => {
         )}
       </Text>
 
-      <Box className="mt-l">
+      <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
           <StyledButton>{t('Back to home page')}</StyledButton>
         </StyledLink>
diff --git a/src/frontend/apps/desk/src/pages/teams/create.tsx b/src/frontend/apps/desk/src/pages/teams/create.tsx
index 1ce18ac..84d60ed 100644
--- a/src/frontend/apps/desk/src/pages/teams/create.tsx
+++ b/src/frontend/apps/desk/src/pages/teams/create.tsx
@@ -6,7 +6,7 @@ import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   return (
-    <Box className="p-l" $justify="center" $align="start" $height="inherit">
+    <Box $padding="large" $justify="center" $align="start" $height="inherit">
       <CardCreateTeam />
     </Box>
   );