From ac15d24634fb5d9f61609e6c7f5b94391c9397ed Mon Sep 17 00:00:00 2001
From: naheyansheikh <naheyan@students.cs.ubc.ca>
Date: Thu, 5 Dec 2024 21:08:43 -0800
Subject: [PATCH] Minor loading page css styling

---
 .../pages/loading_screen/LoadingScreen.css    | 45 +++++++++++++------
 .../pages/loading_screen/LoadingScreen.jsx    |  6 +--
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/loading_screen/LoadingScreen.css b/frontend/src/pages/loading_screen/LoadingScreen.css
index 7b39f5a1..ba5d19f8 100644
--- a/frontend/src/pages/loading_screen/LoadingScreen.css
+++ b/frontend/src/pages/loading_screen/LoadingScreen.css
@@ -6,19 +6,27 @@
     height: 100vh;
     text-align: center;
 }
-  
-.loading-screen h2, h3 {
-    margin: 5px 0;
-    color: #333;
+ 
+.loading-screen h2 {
+    margin: 0px;
+    color: #1E1E1E;
+    font-size: 2rem;
+}
+
+.loading-screen h3 {
+    margin: 0px;
+    color: #1E1E1E;
+    font-size: 1.7rem;
 }
   
 .progress-bar-container {
     width: 60%;
-    height: 20px;
+    height: 25px;
     border-radius: 30px;
     border: 1px solid #244B94;
     background-color: #FFFF;
-    margin: 40px 0;
+    margin-top: 40px;
+    margin-bottom: 80px;
     position: relative;
 }
   
@@ -31,16 +39,25 @@
   
 .progress-text {
     position: absolute;
-    right: -40px;
-    top: -2px;
+    right: -50px;
+    top: 1px;
     color: #000000;
 }
-  
+
+.custom-button {
+    border: 1px solid #BAC1D0; 
+    border-radius: 30px;
+    color: #244B94; 
+    background-color: transparent;
+    padding: 10px 20px;
+    font-size: 15px;
+    font-weight: bold;
+    display: flex; 
+    align-items: center; 
+    cursor: pointer;
+}
+
 .cancel-icon {
     margin-right: 8px;
     font-size: 18px;
-}
-  
-.cancel-button:hover {
-    background: #f5f5f5;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/loading_screen/LoadingScreen.jsx b/frontend/src/pages/loading_screen/LoadingScreen.jsx
index ae48ce89..1c2062c9 100644
--- a/frontend/src/pages/loading_screen/LoadingScreen.jsx
+++ b/frontend/src/pages/loading_screen/LoadingScreen.jsx
@@ -73,13 +73,13 @@ export default function LoadingScreen() {
         <span className="progress-text">{progress}%</span>
       </div>
 
-      <CLButtonSecondary
+      <button
         onClick={() => navigate("/upload-photo")}
-        width={"250px"}
+        className={"custom-button"}
       >
         <span className="cancel-icon">×</span>
         Cancel Transcription
-      </CLButtonSecondary>
+      </button>
     </div>
   );
 }