From 5ab639e8c22331cc86e5317aefd64c470581e458 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 30 Oct 2023 21:07:21 +0700
Subject: [PATCH] modal update

---
 .../src/components/common/Modal/Modal.tsx     | 20 +++++++++++--------
 .../fakeyou.com/src/scss/site-refresh.scss    |  6 +++++-
 .../voice_designer/VoiceDesignerMainPage.tsx  | 10 ++++++++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
index dca971d30a..fc0dc7f255 100644
--- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
+++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
@@ -1,4 +1,7 @@
 import React, { useRef, useEffect } from "react";
+import Button from "../Button";
+import { faTrash, faTrashAlt } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface ModalProps {
   show: boolean;
@@ -44,7 +47,10 @@ const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
         <div className="modal-dialog modal-dialog-centered">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">{title}</h5>
+              <h5 className="modal-title">
+                <FontAwesomeIcon icon={faTrashAlt} className="me-3" />
+                {title}
+              </h5>
               <button
                 type="button"
                 className="btn-close"
@@ -54,14 +60,12 @@ const Modal: React.FC<ModalProps> = ({ show, handleClose, title, content }) => {
             </div>
             <div className="modal-body">{content}</div>
             <div className="modal-footer">
-              <button
-                type="button"
-                className="btn btn-secondary"
-                data-dismiss="modal"
+              <Button
+                variant="secondary"
+                label="Cancel"
                 onClick={handleClose}
-              >
-                Close
-              </button>
+              />
+              <Button variant="danger" label="Delete" onClick={handleClose} />
             </div>
           </div>
         </div>
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index e6fad548b9..7a6f936ce9 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -848,7 +848,7 @@ styles with important tags:
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Translucent black */
+    background-color: rgba(darken($panel, 8%), 0.8); /* Translucent black */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -876,6 +876,10 @@ styles with important tags:
     filter: brightness(0) invert(1);
   }
 
+  .modal-footer {
+    border-top: 1px solid lighten($panel, 8%);
+  }
+
   .rounded-top-0 {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
index 9ae88ad6fe..33b4ca06c4 100644
--- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx
@@ -115,8 +115,14 @@ function VoiceDesignerMainPage() {
       <Modal
         show={isModalOpen}
         handleClose={closeModal}
-        title="My Modal"
-        content={<p>This is a Bootstrap modal.</p>}
+        title="Delete Voice"
+        content={
+          <p>
+            Are you sure you want to delete "[Voice Name]"?
+            <br />
+            This cannot be undone.
+          </p>
+        }
       />
     </>
   );