🎨(front) fix mail domain list display

The first implementation was using `div` instead of the proper
components.

src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx

@@ -40,7 +40,7 @@ export const MailDomainView = ({
 
   return (
     <>
-      <div aria-label="Mail Domains panel" className="container">
+      <Box aria-label="Mail Domains panel" className="container">
         <Box
           $padding={{ horizontal: 'md' }}
           $background="white"
@@ -120,7 +120,7 @@ export const MailDomainView = ({
         >
           <MailBoxesView mailDomain={mailDomain} />
         </Box>
-      </div>
+      </Box>
     </>
   );
 };

src/frontend/apps/desk/src/pages/mail-domains/index.tsx

@@ -2,6 +2,7 @@ import { Button, Input, Tooltip } from '@openfun/cunningham-react';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Box, Text } from '@/components';
 import { useAuthStore } from '@/core/auth';
 import { useCunninghamTheme } from '@/cunningham';
 import { ModalAddMailDomain } from '@/features/mail-domains/domains/components/ModalAddMailDomain';
@@ -35,41 +36,37 @@ const Page: NextPageWithLayout = () => {
   };
 
   return (
-    <div aria-label="Mail Domains panel" className="container">
-      <div
+    <Box aria-label="Mail Domains panel" className="container">
+      <Box
         data-testid="regie-grid"
-        style={{
-          height: '100%',
-          justifyContent: 'center',
-          width: '100%',
-          padding: '16px',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          background: 'white',
-          borderRadius: '4px',
-          border: `1px solid ${colorsTokens()['greyscale-200']}`,
-        }}
+        $background="white"
+        $radius="4px"
+        $direction="column"
+        $css={`
+          height: 100%;
+          width: 100%;
+          padding: 16px;
+          overflow-x: hidden;
+          overflow-y: auto;
+          border: 1px solid ${colorsTokens()['greyscale-200']};
+        `}
       >
-        <h2
-          style={{ fontWeight: 700, fontSize: '1.5rem', marginBottom: '20px' }}
+        <Text
+          as="h2"
+          $css="font-weight: 700; font-size: 1.5rem; margin-bottom: 20px;"
         >
           {t('Areas of the organization')}
-        </h2>
+        </Text>
 
-        <div
+        <Box
           className="sm:block md:flex"
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '20px',
-            gap: '1em',
-          }}
+          $direction="row"
+          $justify="space-between"
+          $align="center"
+          $gap="1em"
+          $css="margin-bottom: 20px;"
         >
-          <div
-            style={{ width: 'calc(100% - 245px)' }}
-            className="c__input__wrapper__mobile"
-          >
+          <Box $css="width: calc(100% - 245px);" $flex="1">
             <Input
               style={{ width: '100%' }}
               label={t('Search a mail domain')}
@@ -95,23 +92,20 @@ const Page: NextPageWithLayout = () => {
               value={searchValue}
               onChange={handleInputChange}
             />
-          </div>
+          </Box>
 
-          <div
+          <Box
             className="hidden md:flex"
-            style={{
-              background: colors['greyscale-200'],
-              height: '32px',
-              width: '1px',
-            }}
-          ></div>
+            $css={`
+              background: ${colors['greyscale-200']};
+              height: 32px;
+              width: 1px;
+            `}
+          ></Box>
 
-          <div
-            className="block md:hidden"
-            style={{ marginBottom: '10px' }}
-          ></div>
+          <Box className="block md:hidden" $css="margin-bottom: 10px;"></Box>
 
-          <div>
+          <Box>
             {can_create ? (
               <Button data-testid="button-new-domain" onClick={openModal}>
                 {t('Add a mail domain')}
@@ -129,8 +123,8 @@ const Page: NextPageWithLayout = () => {
                 </div>
               </Tooltip>
             )}
-          </div>
-        </div>
+          </Box>
+        </Box>
 
         {!can_create && (
           <p style={{ textAlign: 'center' }}>
@@ -140,8 +134,8 @@ const Page: NextPageWithLayout = () => {
 
         <MailDomainsListView querySearch={searchValue} />
         {isModalOpen && <ModalAddMailDomain closeModal={closeModal} />}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };