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() { {progress}% - navigate("/upload-photo")} - width={"250px"} + className={"custom-button"} > × Cancel Transcription - + ); }