Migrate deprecated components from cozy-ui

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'

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 }

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

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')}
             />
           }
         />

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"

src/modules/drive/DeleteConfirm.jsx

@@ -3,11 +3,11 @@ 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 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,21 @@ import { trashFiles } from 'modules/actions/utils'
 import { buildAlbumByIdQuery } from 'queries'
 
 const Message = ({ type, fileCount }) => {
-  const ico =
-    type === 'referenced' ? 'album' : type === 'shared' ? 'share' : type
+  const icon =
+    type === 'referenced' ? 'album' : type.includes('share') ? 'people' : 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}
+        className="u-flex-shrink-0"
+        color="var(--iconTextColor)"
+      />
+      <Typography className="u-pl-1-half">
+        {t(`DeleteConfirm.${type}`, fileCount)}
+      </Typography>
+    </div>
   )
 }
 
@@ -107,15 +111,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}
           />
         </>
       }
@@ -152,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>
         )

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}
           />

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>

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}
               />

src/modules/navigation/duck/actions.jsx

@@ -2,15 +2,14 @@ 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'
 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({

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}
           />
         </>
       }