fix: loading spinner, improve desc readability, use favicon instead of circle

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>{desc}</span>}
+        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
       </div>
     </div>
   )

src/components/LoadingSpinner/style.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/colors.scss';
+
 .loadingSpinnerOverlay {
   position: fixed;
   top: 0;
@@ -18,15 +20,21 @@
   }
 
   .loadingSpinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
+    background: url('/favicon.png') no-repeat center / cover;
     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,6 +163,15 @@ 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}>
@@ -209,14 +218,6 @@ 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>
   )
 }