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

ref:MANAGER-16817 Signed-off-by: stif59100 <[email protected]>
ovh · Jan 23, 2025 · a1276b3 · a1276b3
1 parent 9af141d
commit a1276b3
Showing 1 changed file with 21 additions and 14 deletions.
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,25 @@ export default function ModalDeleteUsers() {
         testid: 'delete-btn',
       }}
     >
-      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-        <p>
-          <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 preset={ODS_TEXT_PRESET.paragraph}>
+          <p>
+            <Trans
+              t={t}
+              i18nKey="dashboard_users_delete_confirm"
+              values={{ t0: activationEmail }}
+            />
+          </p>
+        </OdsText>
+        <OdsMessage color={ODS_MESSAGE_COLOR.critical}>
+          <div className="flex-col">
+            <span className="block mb-4 font-bold">
+              {t('dashboard_users_delete_info1')}
+            </span>
+            <span className="block">{t('dashboard_users_delete_info2')}</span>
+          </div>
+        </OdsMessage>
+      </>
     </Modal>
   );
 }