♻️(frontend) change the closing buttons of the modals

We changed the closing buttons
of the modals to be consistent with the new design
system. We adapted the modals to fit the new design
and ensure a better user experience.

src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx

@@ -8,13 +8,14 @@ export const ButtonCloseModal = (props: ButtonProps) => {
     <Button
       type="button"
       size="small"
-      color="brand"
+      color="neutral"
       variant="tertiary"
       icon={
         <Icon
-          $withThemeInherited
           iconName="close"
           className="material-icons-filled"
+          $size="24px!important"
+          $color="var(--c--contextuals--content--semantic--neutral--secondary)"
         />
       }
       {...props}

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -64,6 +64,18 @@
   z-index: 1000;
 }
 
+.c__modal__scroller {
+  padding: var(--c--globals--font--sizes--md);
+}
+
+.c__modal__title {
+  padding: 0;
+}
+
+.c__modal__footer {
+  background-color: transparent;
+}
+
 /**
  * Tooltip
 */

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -223,12 +223,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       }
       size={ModalSize.MEDIUM}
       title={
-        <Box
-          $direction="row"
-          $justify="space-between"
-          $align="center"
-          $width="100%"
-        >
+        <>
           <Text
             as="h1"
             $margin="0"
@@ -239,12 +234,14 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
           >
             {t('Export')}
           </Text>
-          <ButtonCloseModal
-            aria-label={t('Close the download modal')}
-            onClick={() => onClose()}
-            disabled={isExporting}
-          />
-        </Box>
+          <Box $position="absolute" $css="top: 4px; right: 4px;">
+            <ButtonCloseModal
+              aria-label={t('Close the download modal')}
+              onClick={() => onClose()}
+              disabled={isExporting}
+            />
+          </Box>
+        </>
       }
     >
       <Box

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -118,12 +118,7 @@ export const ModalRemoveDoc = ({
       }
       size={ModalSize.MEDIUM}
       title={
-        <Box
-          $direction="row"
-          $justify="space-between"
-          $align="center"
-          $width="100%"
-        >
+        <>
           <Text
             $size="h6"
             as="h1"
@@ -133,12 +128,14 @@ export const ModalRemoveDoc = ({
           >
             {t('Delete a doc')}
           </Text>
-          <ButtonCloseModal
-            aria-label={t('Close the delete modal')}
-            onClick={handleClose}
-            onKeyDown={handleCloseKeyDown}
-          />
-        </Box>
+          <Box $position="absolute" $css="top: 4px; right: 4px;">
+            <ButtonCloseModal
+              aria-label={t('Close the delete modal')}
+              onClick={handleClose}
+              onKeyDown={handleCloseKeyDown}
+            />
+          </Box>
+        </>
       }
     >
       <Box className="--docs--modal-remove-doc">

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -71,6 +71,7 @@ const DocSearchModalGlobal = ({
         $direction="column"
         $justify="space-between"
         className="--docs--doc-search-modal"
+        $padding={{ vertical: 'base' }}
       >
         <Text
           as="h1"
@@ -80,7 +81,7 @@ const DocSearchModalGlobal = ({
         >
           {t('Search docs')}
         </Text>
-        <Box $position="absolute" $css="top: 12px; right: 12px;">
+        <Box $position="absolute" $css="top: 4px; right: 4px;">
           <ButtonCloseModal
             aria-label={t('Close the search modal')}
             onClick={modalProps.onClose}
@@ -95,7 +96,7 @@ const DocSearchModalGlobal = ({
           onFilter={handleInputSearch}
         >
           <Box
-            $padding={{ horizontal: '10px' }}
+            $padding={{ horizontal: '10px', vertical: 'base' }}
             $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}
           >
             {showFilters && (
@@ -123,8 +124,8 @@ const DocSearchModalGlobal = ({
               <>
                 {target === DocSearchTarget.ALL && (
                   <DocSearchContent
+                    groupName={t('Select a document')}
                     search={search}
-                    filters={filters}
                     onSelect={handleSelect}
                     onLoadingChange={setLoading}
                   />