Minor loading page css styling

ubclaunchpad · Dec 6, 2024 · ac15d24 · ac15d24
1 parent e1acb37
commit ac15d24
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git 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;
-}
+}
diff --git 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>
   );
 }