src/components/LoadingSpinner/index.tsx

@@ -11,7 +11,7 @@ export const LoadingSpinner = (props: Props) => {
     <div className={styles.loadingSpinnerOverlay}>
       <div className={styles.loadingSpinnerContainer}>
         <div className={styles.loadingSpinner}></div>
-        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+        {desc && <span>{desc}</span>}
       </div>
     </div>
   )

src/components/LoadingSpinner/style.module.scss

@@ -1,5 +1,3 @@
-@import '../../styles/colors.scss';
-
 .loadingSpinnerOverlay {
   position: fixed;
   top: 0;
@@ -20,21 +18,15 @@
   }
 
   .loadingSpinner {
-    background: url('/favicon.png') no-repeat center / cover;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
   }
 }
 
-.loadingSpinnerDesc {
-  color: white;
-  margin-top: 13px;
-
-  font-size: 16px;
-  font-weight: 400;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

src/pages/landing/index.tsx

@@ -163,15 +163,6 @@ export const LandingPage = () => {
 
   return (
     <div className={styles.background}>
-      <div
-        className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
-        style={{ backgroundImage: `url(${bg_l})` }}
-      ></div>
-      <div
-        className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
-        style={{ backgroundImage: `url(${bg_r})` }}
-      ></div>
-
       <Container className={styles.container}>
         <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
         <div className={styles.titleSection}>
@@ -218,6 +209,14 @@ export const LandingPage = () => {
 
         <Outlet />
       </Container>
+      <div
+        className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
+        style={{ backgroundImage: `url(${bg_l})` }}
+      ></div>
+      <div
+        className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
+        style={{ backgroundImage: `url(${bg_r})` }}
+      ></div>
     </div>
   )
 }