From 1951fb86f2a072da662926b2928816a956c62216 Mon Sep 17 00:00:00 2001
From: Valerio Como <v.como@innovazione.gov.it>
Date: Mon, 16 Dec 2024 17:00:10 +0000
Subject: [PATCH] feat: warnings modal

---
 src/app/components/WarningModal.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/components/WarningModal.tsx b/src/app/components/WarningModal.tsx
index 61213a9..8b8a560 100644
--- a/src/app/components/WarningModal.tsx
+++ b/src/app/components/WarningModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, ModalBody } from "design-react-kit";
+import { Icon, Modal, ModalBody } from "design-react-kit";
 import { useTranslation } from "react-i18next";
 
 interface Props {
@@ -15,12 +15,25 @@ export const WarningModal = ({ display, toggle, warnings = [] }: Props): JSX.Ele
             isOpen={display}
             toggle={toggle}>
             <ModalBody>
-                <h2>{t("editor.warnings")}</h2>
-                <div>
+                <h3><Icon icon="it-warning-circle" color="warning" title={t("editor.warnings")} />&nbsp;{t("editor.warnings")}</h3>
+                <div className="it-list-wrapper">
                     {warnings.length
                         ?
-                        <ul>
-                            {warnings.map(({ key, message }) => <li key={key}><b>{key}:</b> {message}</li>)}
+                        <ul className="it-list">
+                            <li>
+                                {warnings.map(({ key, message }) =>
+                                    <li key={key}>
+                                        <div className="list-item">
+                                            <div className="it-right-zone">
+                                                <div>
+                                                    <h4 className="text m-0">{key}</h4>
+                                                    <p className="small m-0">{message}</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                )}
+                            </li>
                         </ul>
                         : <p>Non ci sono warning</p>}