modal update

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>

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;

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>
+        }
       />
     </>
   );