feat: warnings modal

italia · Dec 16, 2024 · 1951fb8 · 1951fb8
1 parent d94e06d
commit 1951fb8
Showing 1 changed file with 18 additions and 5 deletions.
diff --git 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>}