From 91e4a92b0281ff56eaf8ebeed62b383114fae53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Tue, 14 Jan 2025 11:07:17 +0100
Subject: [PATCH 1/5] feat: Migrate to new Buttons component from cozy-ui

ErrorComponent has been deleted because it is unused (probably a rest from cozy-photos)
---
 src/assets/icons/icon-image-broken.svg        | 10 -------
 src/components/Error/ErrorComponent.jsx       | 30 -------------------
 src/components/Error/Oops.jsx                 |  2 +-
 src/components/pushClient/Banner.jsx          | 17 +++++------
 src/modules/drive/DeleteConfirm.jsx           | 11 +++----
 .../components/ShortcutCreationModal.jsx      |  6 ++--
 src/modules/filelist/FileListHeaderMobile.jsx | 10 ++-----
 src/modules/filelist/FilenameInput.jsx        |  7 ++---
 .../trash/components/DestroyConfirm.tsx       |  9 +++---
 .../trash/components/EmptyTrashConfirm.tsx    |  9 +++---
 src/styles/filelist.styl                      |  8 +----
 11 files changed, 35 insertions(+), 84 deletions(-)
 delete mode 100644 src/assets/icons/icon-image-broken.svg
 delete mode 100644 src/components/Error/ErrorComponent.jsx

diff --git a/src/assets/icons/icon-image-broken.svg b/src/assets/icons/icon-image-broken.svg
deleted file mode 100644
index d014b37cf6..0000000000
--- a/src/assets/icons/icon-image-broken.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
-    <rect width="32" height="28" fill="#FDD5D5" rx="2"/>
-    <path fill="#F52D2D" d="M24,20 L13,15 L19.2902805,8.70971949 C19.6822478,8.31775224 20.3203148,8.32031476 20.7062149,8.7062149 L29,17 L24,20 Z"/>
-    <path fill="#F52D2D" d="M0,22 L6.29028051,15.7097195 C6.68224776,15.3177522 7.31387329,15.3138733 7.70591205,15.7059121 L11,19 L15.0233154,14.9766846 L24,19 L27.2486572,17.2486572 L32,22 L32,26.0020869 C32,27.1055038 31.1107383,28 29.9982567,28 L2.00174332,28 C0.89621101,28 0,27.1017394 0,26.0020869 L0,22 Z"/>
-    <circle cx="8" cy="7" r="3" fill="#FFFFFF"/>
-    <path stroke="#FDD5D5" d="M11,18.3000031 L5.5,23.8000031 L11,18.3000031 Z" stroke-linecap="round" stroke-linejoin="round"/>
-    <polyline stroke="#FFFFFF" stroke-width="2" points="0 17 8 13 24 20 32 16" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-</svg>
diff --git a/src/components/Error/ErrorComponent.jsx b/src/components/Error/ErrorComponent.jsx
deleted file mode 100644
index 79bc56bd1e..0000000000
--- a/src/components/Error/ErrorComponent.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import Empty from 'cozy-ui/transpiled/react/Empty'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
-
-import EmptyIcon from '../../photos/assets/icons/icon-image-broken.svg'
-
-export const ErrorComponent = ({ t, errorType }) => {
-  return (
-    <Empty title={t(`Error.${errorType}_title`)} icon={EmptyIcon}>
-      <Button
-        onClick={() => window.location.reload()}
-        label={t('Error.refresh')}
-      />
-    </Empty>
-  )
-}
-
-const TranslatedError = translate()(ErrorComponent)
-
-// eslint-disable-next-line
-export const withError = (onError, type, BaseComponent) => props =>
-  onError(props) ? (
-    <TranslatedError errorType={type} />
-  ) : (
-    <BaseComponent {...props} />
-  )
-
-export default TranslatedError
diff --git a/src/components/Error/Oops.jsx b/src/components/Error/Oops.jsx
index 4e78ce55f8..7adc757018 100644
--- a/src/components/Error/Oops.jsx
+++ b/src/components/Error/Oops.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Empty from 'cozy-ui/transpiled/react/Empty'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from './oops.styl'
diff --git a/src/components/pushClient/Banner.jsx b/src/components/pushClient/Banner.jsx
index f48bd5c2ea..a1ba51fccc 100644
--- a/src/components/pushClient/Banner.jsx
+++ b/src/components/pushClient/Banner.jsx
@@ -7,11 +7,11 @@ import React, { Component } from 'react'
 
 import { withClient } from 'cozy-client'
 import Banner from 'cozy-ui/transpiled/react/Banner'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DevicePhoneIcon from 'cozy-ui/transpiled/react/Icons/DevicePhone'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import {
@@ -82,21 +82,20 @@ class BannerClient extends Component {
           text={t(text)}
           bgcolor="var(--contrastBackgroundColor)"
           buttonOne={
-            <ButtonLink
-              href={t(link)}
-              theme="text"
-              icon={DownloadIcon}
+            <Button
+              component="a"
+              variant="text"
               label={t('Nav.banner-btn-client')}
               onClick={() => this.markAsSeen('banner')}
+              startIcon={<Icon icon={DownloadIcon} />}
+              href={t(link)}
             />
           }
           buttonTwo={
             <Button
-              theme="text"
+              variant="text"
               label={t('SelectionBar.close')}
-              onClick={() => {
-                this.markAsSeen('close')
-              }}
+              onClick={() => this.markAsSeen('close')}
             />
           }
         />
diff --git a/src/modules/drive/DeleteConfirm.jsx b/src/modules/drive/DeleteConfirm.jsx
index e29b32a258..1278ac3e25 100644
--- a/src/modules/drive/DeleteConfirm.jsx
+++ b/src/modules/drive/DeleteConfirm.jsx
@@ -3,10 +3,10 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useClient } from 'cozy-client'
 import { splitFilename } from 'cozy-client/dist/models/file'
 import { SharedDocument, SharedRecipientsList } from 'cozy-sharing'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -107,15 +107,16 @@ export const DeleteConfirm = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('DeleteConfirm.cancel')}
           />
           <Button
-            busy={isDeleting}
-            theme="danger"
-            label={t('DeleteConfirm.delete')}
+            variant="primary"
             onClick={onDelete}
+            label={t('DeleteConfirm.delete')}
+            color="error"
+            busy={isDeleting}
           />
         </>
       }
diff --git a/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx b/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
index 3f61fe51f8..facddbff07 100644
--- a/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
+++ b/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
@@ -3,11 +3,11 @@ import React, { useCallback, useEffect, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import { isIOS } from 'cozy-device-helper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import TextField from 'cozy-ui/transpiled/react/TextField'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import useBrowserOffline from 'cozy-ui/transpiled/react/hooks/useBrowserOffline'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -162,12 +162,12 @@ const ShortcutCreationModal = ({ onClose, onCreated }) => {
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('Shortcut.cancel')}
           />
           <Button
-            theme="primary"
+            variant="primary"
             label={t('Shortcut.create')}
             onClick={createShortcut}
           />
diff --git a/src/modules/filelist/FileListHeaderMobile.jsx b/src/modules/filelist/FileListHeaderMobile.jsx
index d1a76c3008..bc0a436fff 100644
--- a/src/modules/filelist/FileListHeaderMobile.jsx
+++ b/src/modules/filelist/FileListHeaderMobile.jsx
@@ -1,8 +1,8 @@
 import cx from 'classnames'
 import React, { useState, useCallback } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import {
   TableHead,
   TableHeader,
@@ -66,20 +66,16 @@ const FileListHeaderMobile = ({
           )}
         >
           <Button
-            theme="action"
+            variant="text"
             onClick={() => {
               toggleThumbnailSize()
             }}
-            label={t('table.head_thumbnail_size')}
-            extension="narrow"
-            icon={
+            label={
               <Icon
                 icon={thumbnailSizeBig ? iconListMin : iconList}
                 size={17}
-                label={t('table.head_thumbnail_size')}
               />
             }
-            iconOnly
           />
         </TableHeader>
       </TableRow>
diff --git a/src/modules/filelist/FilenameInput.jsx b/src/modules/filelist/FilenameInput.jsx
index 5043b12fd3..8e0bc66b50 100644
--- a/src/modules/filelist/FilenameInput.jsx
+++ b/src/modules/filelist/FilenameInput.jsx
@@ -3,9 +3,9 @@ import { CozyFile } from 'models'
 import React, { Component } from 'react'
 
 import { isDirectory } from 'cozy-client/dist/models/file'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from 'styles/filenameinput.styl'
@@ -157,14 +157,13 @@ class FilenameInput extends Component {
           content={t('RenameModal.description')}
           actions={
             <>
-              {' '}
               <Button
-                theme="secondary"
+                variant="secondary"
                 onClick={this.abort}
                 label={t('RenameModal.cancel')}
               />
               <Button
-                theme="primary"
+                variant="primary"
                 label={t('RenameModal.continue')}
                 onClick={this.save}
               />
diff --git a/src/modules/trash/components/DestroyConfirm.tsx b/src/modules/trash/components/DestroyConfirm.tsx
index bfc95fc28a..6ccaf4bda4 100644
--- a/src/modules/trash/components/DestroyConfirm.tsx
+++ b/src/modules/trash/components/DestroyConfirm.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
@@ -9,7 +10,6 @@ import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -95,15 +95,16 @@ const DestroyConfirm: React.FC<DestroyConfirmProps> = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('DestroyConfirm.cancel')}
           />
           <Button
-            theme="danger"
+            variant="primary"
+            onClick={handleDestroy}
             label={t('DestroyConfirm.delete')}
+            color="error"
             busy={isBusy}
-            onClick={handleDestroy}
           />
         </>
       }
diff --git a/src/modules/trash/components/EmptyTrashConfirm.tsx b/src/modules/trash/components/EmptyTrashConfirm.tsx
index 744ecb913f..c292fcb4d0 100644
--- a/src/modules/trash/components/EmptyTrashConfirm.tsx
+++ b/src/modules/trash/components/EmptyTrashConfirm.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
@@ -8,7 +9,6 @@ import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -73,15 +73,16 @@ const EmptyTrashConfirm: React.FC<EmptyTrashConfirmProps> = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('EmptyTrashConfirm.cancel')}
           />
           <Button
-            theme="danger"
+            variant="primary"
+            onClick={handleConfirm}
             label={t('EmptyTrashConfirm.delete')}
+            color="error"
             busy={isBusy}
-            onClick={handleConfirm}
           />
         </>
       }
diff --git a/src/styles/filelist.styl b/src/styles/filelist.styl
index a1152d2b4a..5b4945cd75 100644
--- a/src/styles/filelist.styl
+++ b/src/styles/filelist.styl
@@ -364,15 +364,9 @@ column-width-thumbnail-bigger = 7rem
         flex 1 1 auto
 
     .fil-content-header-action
-        padding 0
-        margin-right 1em
-
     .fil-content-file-action
         padding-right .2rem
-        margin-right 1em
-
-    .fil-content-header-action
-    .fil-content-file-action
+        margin-right 1rem
         flex 0
         box-sizing content-box
         width 100%

From ed850ad2aeeb23428dc17c38f458a06a0dc97723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Tue, 14 Jan 2025 11:50:15 +0100
Subject: [PATCH 2/5] feat: Migrate to new QuotaPaywall component from cozy-ui

---
 src/modules/navigation/duck/actions.jsx | 5 ++---
 src/modules/upload/QuotaAlert.jsx       | 9 ---------
 2 files changed, 2 insertions(+), 12 deletions(-)
 delete mode 100644 src/modules/upload/QuotaAlert.jsx

diff --git a/src/modules/navigation/duck/actions.jsx b/src/modules/navigation/duck/actions.jsx
index e46c12ff7e..402dd92e8d 100644
--- a/src/modules/navigation/duck/actions.jsx
+++ b/src/modules/navigation/duck/actions.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { showModal } from 'react-cozy-helpers'
 
 import { isDirectory } from 'cozy-client/dist/models/file'
+import { QuotaPaywall } from 'cozy-ui/transpiled/react/Paywall'
 
 import { MAX_PAYLOAD_SIZE_IN_GB } from 'constants/config'
 import { createEncryptedDir } from 'lib/encryption'
@@ -9,8 +10,6 @@ import { getEntriesTypeTranslated } from 'lib/entries'
 import logger from 'lib/logger'
 import { getFolderContent } from 'modules/selectors'
 import { addToUploadQueue } from 'modules/upload'
-import QuotaAlert from 'modules/upload/QuotaAlert'
-
 export const SORT_FOLDER = 'SORT_FOLDER'
 
 const HTTP_CODE_CONFLICT = 409
@@ -99,7 +98,7 @@ const uploadQueueProcessed =
     if (quotas.length > 0) {
       logger.warn(`Upload module triggers a quota alert: ${quotas}`)
       // quota errors have their own modal instead of a notification
-      dispatch(showModal(<QuotaAlert />))
+      dispatch(showModal(<QuotaPaywall />))
     } else if (networkErrors.length > 0) {
       logger.warn(`Upload module triggers a network error: ${networkErrors}`)
       showAlert({
diff --git a/src/modules/upload/QuotaAlert.jsx b/src/modules/upload/QuotaAlert.jsx
deleted file mode 100644
index 56bb8af610..0000000000
--- a/src/modules/upload/QuotaAlert.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-import { default as UIQuotaAlert } from 'cozy-ui/transpiled/react/deprecated/QuotaAlert'
-
-const QuotaAlert = ({ onClose }) => {
-  return <UIQuotaAlert onClose={onClose} />
-}
-
-export default QuotaAlert

From 859edbbda60e2f223dbf623dcfa3f97dddc865e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Tue, 14 Jan 2025 15:01:01 +0100
Subject: [PATCH 3/5] feat: Migrate from Media components from cozy-ui

---
 .../FolderPicker/FolderPickerHeader.tsx       | 28 +++++++++----------
 src/modules/drive/DeleteConfirm.jsx           | 16 +++++------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/FolderPicker/FolderPickerHeader.tsx b/src/components/FolderPicker/FolderPickerHeader.tsx
index 081ab0804d..a0d5e2cc80 100644
--- a/src/components/FolderPicker/FolderPickerHeader.tsx
+++ b/src/components/FolderPicker/FolderPickerHeader.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 
 import Card from 'cozy-ui/transpiled/react/Card'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { FolderPickerHeaderIllustration } from 'components/FolderPicker/FolderPickerHeaderIllustration'
@@ -19,7 +18,10 @@ const specificCardStyle: React.CSSProperties = {
   marginRight: '4rem',
   marginTop: '1rem',
   marginBottom: '1rem',
-  background: 'var(--contrastBackgroundColor)'
+  background: 'var(--contrastBackgroundColor)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1rem'
 }
 
 const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
@@ -35,19 +37,15 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
 
   return (
     <Card inset style={specificCardStyle}>
-      <Media>
-        <Img className="u-mr-1">
-          <FolderPickerHeaderIllustration entries={entries} />
-        </Img>
-        <Bd>
-          <Typography variant="h6" noWrap>
-            {entries.length !== 1 ? titleToUse : entries[0].name}
-          </Typography>
-          <Typography variant="caption" color="textSecondary" noWrap>
-            {subTitleToUse}
-          </Typography>
-        </Bd>
-      </Media>
+      <FolderPickerHeaderIllustration entries={entries} />
+      <div>
+        <Typography variant="h6" noWrap>
+          {entries.length !== 1 ? titleToUse : entries[0].name}
+        </Typography>
+        <Typography variant="caption" color="textSecondary" noWrap>
+          {subTitleToUse}
+        </Typography>
+      </div>
     </Card>
   )
 }
diff --git a/src/modules/drive/DeleteConfirm.jsx b/src/modules/drive/DeleteConfirm.jsx
index 1278ac3e25..9ec9e78ba5 100644
--- a/src/modules/drive/DeleteConfirm.jsx
+++ b/src/modules/drive/DeleteConfirm.jsx
@@ -7,7 +7,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -17,17 +17,17 @@ import { trashFiles } from 'modules/actions/utils'
 import { buildAlbumByIdQuery } from 'queries'
 
 const Message = ({ type, fileCount }) => {
-  const ico =
+  const icon =
     type === 'referenced' ? 'album' : type === 'shared' ? 'share' : type
 
   const { t } = useI18n()
   return (
-    <Media>
-      <Img>
-        <Icon icon={ico} color="var(--iconTextColor)" />
-      </Img>
-      <Bd className="u-pl-1-half">{t(`DeleteConfirm.${type}`, fileCount)}</Bd>
-    </Media>
+    <div className="u-flex u-flex-items-center">
+      <Icon icon={icon} color="var(--iconTextColor)" />
+      <Typography className="u-pl-1-half">
+        {t(`DeleteConfirm.${type}`, fileCount)}
+      </Typography>
+    </div>
   )
 }
 

From eef12932882b17db26ddfebc1ead67cae3fb8fa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Tue, 14 Jan 2025 15:23:14 +0100
Subject: [PATCH 4/5] fix: Delete confirmation icon and spacing

Icon was not displayed in a Cozy to Cozy share (it was the only
deletion text without icon) because we tried to pass to Icon
component an icon that does not exist. And when the deletion text
was too long, the icon was shrink to a very small icon.

I also adjusted spacing to have better result.
---
 src/locales/fr.json                 |  2 +-
 src/modules/drive/DeleteConfirm.jsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/locales/fr.json b/src/locales/fr.json
index 59b5a9c861..14c8ff38dd 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -221,7 +221,7 @@
     "share_accepted": "Le partage sera arrêté. Ainsi, les contacts suivant conserveront une copie mais vos changements ne seront plus synchronisés :",
     "share_waiting": "Le partage sera arrêté. Ainsi, les contacts suivant ne pourront donc plus accepter le partage et ne pourront plus accéder aux contenus partagés :",
     "share_both": "Le partage sera arrêté. Ainsi, les contacts ayant stocké les fichiers dans leur Cozy conserveront une copie, les autres contacts ne pourront plus accéder aux contenus partagés :",
-    "link": "Le partage par lien ne sera plus actif",
+    "link": "Le partage par lien ne sera plus actif.",
     "referenced": "Des photos de la sélection sont dans un album. Elles seront retirées de l'album si vous confirmez.",
     "cancel": "Annuler",
     "delete": "Supprimer"
diff --git a/src/modules/drive/DeleteConfirm.jsx b/src/modules/drive/DeleteConfirm.jsx
index 9ec9e78ba5..a449730fe2 100644
--- a/src/modules/drive/DeleteConfirm.jsx
+++ b/src/modules/drive/DeleteConfirm.jsx
@@ -18,12 +18,16 @@ import { buildAlbumByIdQuery } from 'queries'
 
 const Message = ({ type, fileCount }) => {
   const icon =
-    type === 'referenced' ? 'album' : type === 'shared' ? 'share' : type
+    type === 'referenced' ? 'album' : type.includes('share') ? 'people' : type
 
   const { t } = useI18n()
   return (
     <div className="u-flex u-flex-items-center">
-      <Icon icon={icon} color="var(--iconTextColor)" />
+      <Icon
+        icon={icon}
+        className="u-flex-shrink-0"
+        color="var(--iconTextColor)"
+      />
       <Typography className="u-pl-1-half">
         {t(`DeleteConfirm.${type}`, fileCount)}
       </Typography>
@@ -153,7 +157,10 @@ const DeleteConfirmWithSharingContext = ({ files, ...rest }) =>
               <Message type={shareMessageType} fileCount={files.length} />
             ) : null}
             {isSharedByMe && recipients.length > 0 ? (
-              <SharedRecipientsList className="u-ml-1" docId={files[0].id} />
+              <SharedRecipientsList
+                className="u-ml-2-half"
+                docId={files[0].id}
+              />
             ) : null}
           </DeleteConfirm>
         )

From 6d0de1981d20fb80c53ef4adc55f2b4726242ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Tue, 14 Jan 2025 15:29:00 +0100
Subject: [PATCH 5/5] feat: Migrate from Overlay components from cozy-ui

---
 src/components/FilesViewerLoading.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FilesViewerLoading.jsx b/src/components/FilesViewerLoading.jsx
index cdbc8dcb1b..02419f8c42 100644
--- a/src/components/FilesViewerLoading.jsx
+++ b/src/components/FilesViewerLoading.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Overlay from 'cozy-ui/transpiled/react/deprecated/Overlay'
 
 const FilesViewerLoading = () => (
-  <Overlay>
+  <Backdrop isOver open>
     <Spinner size="xxlarge" middle noMargin color="var(--white)" />
-  </Overlay>
+  </Backdrop>
 )
 
 export { FilesViewerLoading }