refactor: loader dialog, uploadrundialog update, touchups

3 files changed, 39 insertions, 7 deletions

diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index b9e071c..4a107ad 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -34,9 +34,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
 
   return (
   <div>
-        <div style={{position: "absolute", width: "100%", height: "100%", top: "0px", left: "-350px"}}>
-        {MessageDialogComponent}
-        </div>
+        {MessageDialogComponent}
     <section id='section6' className='summary2'>
 
       <div id='leaderboard-top'
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
new file mode 100644
index 0000000..381a4a4
--- /dev/null
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import "../css/Dialog.css"
+
+interface MessageDialogLoadProps {
+    title: string;    
+        onClose: () => void;
+};
+
+const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose }) => {
+    return (
+        <div className='dimmer'>
+            <div className='dialog'>
+                <div className='dialog-element dialog-header'>
+                    <span>{title}</span>
+                </div>
+                <div className='dialog-element dialog-description'>
+                                        <div style={{display: "flex", justifyContent: "center"}}>
+                        <span className="loader"></span>
+                                        </div>
+                </div>
+                <div className='dialog-element dialog-btns-container'>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MessageDialogLoad;
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 212a792..22b895c 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -9,6 +9,7 @@ import { API } from '../api/Api';
 import { useNavigate } from 'react-router-dom';
 import useMessage from '../hooks/UseMessage';
 import useConfirm from '../hooks/UseConfirm';
+import useMessageLoad from "../hooks/UseMessageLoad";
 
 interface UploadRunDialogProps {
   token?: string;
@@ -21,6 +22,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const { message, MessageDialogComponent } = useMessage();
   const { confirm, ConfirmDialogComponent } = useConfirm();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
 
   const navigate = useNavigate();
 
@@ -164,7 +166,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         return;
       }
 
+          messageLoad("Uploading...");
       const [ success, response ] = await API.post_record(token, uploadRunContent);
+          messageLoadClose();
       await message("Upload Record", response);
       onClose(success);
           navigate("/profile");
@@ -185,6 +189,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       <>
         <div id="upload-run-block" />
         {MessageDialogComponent}
+                {MessageDialogLoadComponent}
         {ConfirmDialogComponent}
         
         <div id='upload-run-menu'>
@@ -234,7 +239,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                                                 </div>
                                                 : null}
 
-                                                <span>{uploadRunContent.host_demo?.name}</span>
+                                                <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span>
                                           </div>
                       {
                         games[selectedGameID].is_coop &&
@@ -246,13 +251,13 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                                                         <div>
                                                         <span>Drag and drop</span>
                                                         <div>
-                                                                <span>Or click here</span><br/>
-                                                                <button>Upload</button>
+                                                                <span style={{fontFamily: "BarlowSemiCondensed-Regular"}}>Or click here</span><br/>
+                                                                <button style={{borderRadius: "24px", padding: "5px 8px", margin: "5px 0px"}}>Upload</button>
                                                         </div>
                                                         </div>
                                                         : null}
 
-                                                        <span>{uploadRunContent.partner_demo?.name}</span>
+                                                        <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
                                                         </div>
                           </>
                         )