From f62f93408ad544aab5571b1202f9c384b4d6ee1a Mon Sep 17 00:00:00 2001
From: stif59100 <steeve.vanderstocken@ovhcloud.com>
Date: Thu, 23 Jan 2025 16:15:03 +0100
Subject: [PATCH] feat(web-office): correcting design for delete modal users

ref:MANAGER-16817

Signed-off-by: stif59100 <steeve.vanderstocken@ovhcloud.com>
---
 .../users/ModalDeleteUsers.component.tsx      | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 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
index d7513a7cfd6f..f58fdc98fe2a 100644
--- 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';
@@ -93,18 +94,20 @@ export default function ModalDeleteUsers() {
       }}
     >
       <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>
+        <Trans
+          t={t}
+          i18nKey="dashboard_users_delete_confirm"
+          values={{ t0: activationEmail }}
+        />
       </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>
   );
 }