From 4d842995f4067058b21729aab6139cd388c36353 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Tue, 29 Oct 2024 11:45:00 +0100
Subject: refactor: loader dialog, uploadrundialog update, touchups

---
 frontend/src/components/Leaderboards.tsx      |  4 +---
 frontend/src/components/MessageDialogLoad.tsx | 29 +++++++++++++++++++++++++++
 frontend/src/components/UploadRunDialog.tsx   | 13 ++++++++----
 3 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/MessageDialogLoad.tsx

(limited to 'frontend/src/components')

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>
                           </>
                         )
-- 
cgit v1.2.3