8 files changed, 44 insertions, 19 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 41e426c..d1d501d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,6 +25,8 @@ const App: React.FC = () => {
   const [profile, setProfile] = React.useState<UserProfile | undefined>(undefined);
   const [isModerator, setIsModerator] = React.useState<boolean>(false);
 
+  const [msgIsOpen, setMsgIsOpen] = React.useState<boolean>(false);
+
   const [games, setGames] = React.useState<Game[]>([]);
 
   const [uploadRunDialog, setUploadRunDialog] = React.useState<boolean>(false);
diff --git a/frontend/src/api/Maps.tsx b/frontend/src/api/Maps.tsx
index 8295cf2..b6a6bad 100644
--- a/frontend/src/api/Maps.tsx
+++ b/frontend/src/api/Maps.tsx
@@ -75,7 +75,7 @@ export const delete_map_discussion = async (token: string, map_id: string, discu
   return response.data.success;
 };
 
-export const post_record = async (token: string, run: UploadRunContent): Promise<[string]> => {
+export const post_record = async (token: string, run: UploadRunContent): Promise<string> => {
   if (run.partner_demo && run.partner_id) {
     const response = await axios.postForm(url(`maps/${run.map_id}/record`), {
       "host_demo": run.host_demo,
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index b26bbe6..f3258e8 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -7,6 +7,8 @@ import { Game } from '../types/Game';
 import { Map } from '../types/Map';
 import { API } from '../api/Api';
 import { useNavigate } from 'react-router-dom';
+import useMessage from '../hooks/UseMessage';
+import useConfirm from '../hooks/UseConfirm';
 
 interface UploadRunDialogProps {
   token?: string;
@@ -16,6 +18,8 @@ interface UploadRunDialogProps {
 }
 
 const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, games }) => {
+  const { message, MessageDialogComponent } = useMessage();
+  const { confirm, ConfirmDialogComponent } = useConfirm("Upload demo?", "Are you sure you want to upload this demo?");
 
   const navigate = useNavigate();
 
@@ -89,18 +93,18 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     if (token) {
       if (games[selectedGameID].is_coop) {
         if (uploadRunContent.host_demo === null) {
-          alert("You must select a host demo to upload.")
+          message("Error", "You must select a host demo to upload.")
           return
         } else if (uploadRunContent.partner_demo === null) {
-          alert("You must select a partner demo to upload.")
+          message("Error", "You must select a partner demo to upload.")
           return
         } else if (uploadRunContent.partner_id === undefined) {
-          alert("You must specify your partner.")
+          message("Error", "You must specify your partner.")
           return
         }
       } else {
         if (uploadRunContent.host_demo === null) {
-          alert("You must select a demo to upload.")
+          message("Error", "You must select a demo to upload.")
           return
         }
       }
@@ -112,17 +116,22 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       })
 
       if (!scoreboard) {
-        alert("Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?")
+        message("Error", "Error while processing demo: Unable to get scoreboard result. Is this not a CM demo?")
         return
       }
       const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
       console.log(`Portal count: ${portalScore}. Ticks: ${timeScore}.`);
-      if (window.confirm("Are you sure you want to submit this run to LPHUB?")) {
-        const message = await API.post_record(token, uploadRunContent);
-        alert(message);
-        navigate(0);
-        onClose();
+      
+      const userConfirmed = await confirm();
+
+      if (!userConfirmed) {
+        return;
       }
+
+      const response = await API.post_record(token, uploadRunContent);
+      message("Message", response);
+      // navigate(0);
+      onClose();
     }
   };
 
@@ -136,6 +145,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     return (
       <>
         <div id="upload-run-block" />
+        {MessageDialogComponent}
+        {ConfirmDialogComponent}
+        
         <div id='upload-run-menu'>
           <div id='upload-run-menu-add'>
             <div id='upload-run-route-category'>
diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css
index c25a755..f16425d 100644
--- a/frontend/src/css/Dialog.css
+++ b/frontend/src/css/Dialog.css
@@ -1,13 +1,15 @@
 .dimmer {
-    position: absolute;
+    position: fixed;
     width: calc(100%);
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 4;
+    left: 0px;
 }
 
 .dialog {
-    position: absolute;
-    z-index: 10000;
+    position: fixed;
+    z-index: 4;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -17,6 +19,12 @@
     min-width: 350px;
     border: 0.1em solid #272831;
     animation: dialog_in 0.2s cubic-bezier(0.075, 0.82, 0.165, 1.1);
+    color: white;
+    font-family: BarlowSemiCondensed-Regular;
+}
+
+.dialog-header {
+    font-size: 24px;
 }
 
 .dialog-element {
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index e85f206..6ea9884 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -95,9 +95,12 @@ button, input {
     transition: all 0.2s ease;
 }
 
+.upload-run-buttons-container button {
+    border-radius: 32px;
+}
+
 button:hover {
     background-color: #222538;
-    border-radius: 32px;
 }
 
 .upload-run-map-container {
diff --git a/frontend/src/components/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx
index 2fe0e12..6de7b10 100644
--- a/frontend/src/components/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ConfirmDialog from './ConfirmDialog';
+import ConfirmDialog from '../components/ConfirmDialog';
 
 const useConfirm = ( title: string, subtitle: string ) => {
     const [isOpen, setIsOpen] = useState(false);
diff --git a/frontend/src/components/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index fbd3c82..249a3bf 100644
--- a/frontend/src/components/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import MessageDialog from "./MessageDialog";
+import MessageDialog from "../components/MessageDialog";
 
 const useMessage = () => {
     const [isOpen, setIsOpen] = useState(false);
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index bf79a65..b486ee5 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -8,8 +8,8 @@ import { Map } from '../types/Map';
 import { ticks_to_time } from '../utils/Time';
 import "../css/Profile.css";
 import { API } from '../api/Api';
-import useConfirm from '../components/UseConfirm';
-import useMessage from '../components/UseMessage';
+import useConfirm from '../hooks/UseConfirm';
+import useMessage from '../hooks/UseMessage';
 
 interface ProfileProps {
   profile?: UserProfile;