feat(web-office): correcting design for delete modal users

ref:MANAGER-16817 Signed-off-by: stif59100 <[email protected]>
ovh · Jan 24, 2025 · aded104 · aded104
1 parent 732e6d1
commit aded104
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/...es/manager/apps/web-office/public/translations/dashboard/users/delete/Messages_fr_FR.json b/...es/manager/apps/web-office/public/translations/dashboard/users/delete/Messages_fr_FR.json
@@ -4,7 +4,7 @@
   "dashboard_users_delete_info1": "L'utilisateur sera supprimé immédiatement après confirmation.",
   "dashboard_users_delete_info2": "La facturation de nos produits Office 365 étant basée sur la consommation du mois précédent, vous recevrez une dernière facture pour ce compte.",
   "dashboard_users_delete_cta_cancel": "Annuler",
-  "dashboard_users_delete_cta_confirm": "Valider",
+  "dashboard_users_delete_cta_confirm": "Supprimer",
   "dashboard_users_delete_message_error": "Une erreur est survenue lors de la suppression de l'utilisateur. {{ error }}",
   "dashboard_users_delete_message_success": "Utilisateur en cours de suppression."
 }
diff --git a/packages/manager/apps/web-office/src/pages/dashboard/users/ModalDeleteUsers.component.tsx b/packages/manager/apps/web-office/src/pages/dashboard/users/ModalDeleteUsers.component.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useSearchParams, useNavigate, useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { OdsText } from '@ovhcloud/ods-components/react';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { ApiError } from '@ovh-ux/manager-core-api';
 import { useMutation } from '@tanstack/react-query';
 import {
   ODS_BUTTON_VARIANT,
+  ODS_MESSAGE_COLOR,
   ODS_MODAL_COLOR,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
@@ -92,19 +93,23 @@ export default function ModalDeleteUsers() {
         testid: 'delete-btn',
       }}
     >
-      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-        <p>
+      <>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           <Trans
             t={t}
             i18nKey="dashboard_users_delete_confirm"
             values={{ t0: activationEmail }}
           />
-        </p>
-        <ul>
-          <li>{t('dashboard_users_delete_info1')}</li>
-          <li>{t('dashboard_users_delete_info2')}</li>
-        </ul>
-      </OdsText>
+        </OdsText>
+        <OdsMessage color={ODS_MESSAGE_COLOR.critical} className="mt-6">
+          <div>
+            <span className="block font-bold">
+              {t('dashboard_users_delete_info1')}
+            </span>
+            <p>{t('dashboard_users_delete_info2')}</p>
+          </div>
+        </OdsMessage>
+      </>
     </Modal>
   );
 }