From d627db5ac0d08a488b0fb124ff8c6adad32bbeb0 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Mon, 2 Sep 2024 11:35:39 +0200
Subject: [PATCH] refactor(spinner): new default design

---
 src/components/LoadingSpinner/index.tsx       |  4 ++-
 .../LoadingSpinner/style.module.scss          | 26 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
index 4e2a0d9..0df8c25 100644
--- a/src/components/LoadingSpinner/index.tsx
+++ b/src/components/LoadingSpinner/index.tsx
@@ -23,7 +23,9 @@ 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 && (
+              <p className={styles.loadingSpinnerDesc}>{'Loading...'}</p>
+            )}
           </div>
         </div>
       )
diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss
index 00852c8..0697f6b 100644
--- a/src/components/LoadingSpinner/style.module.scss
+++ b/src/components/LoadingSpinner/style.module.scss
@@ -2,23 +2,29 @@
 
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
+  backdrop-filter: blur(10px);
 }
 
 .loadingSpinnerContainer {
+  width: 100%;
+  max-width: 500px;
+  margin: 25px 20px;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
+  background: $overlay-background-color;
+  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+  border-radius: 4px;
+
   &.withHeight {
     min-height: 250px;
   }
@@ -26,14 +32,18 @@
 
 .loadingSpinner {
   background: url('/favicon.png') no-repeat center / cover;
-  width: 40px;
-  height: 40px;
+  margin: 40px 25px;
+  width: 65px;
+  height: 65px;
   animation: spin 1s linear infinite;
 }
 
 .loadingSpinnerDesc {
-  color: white;
-  margin-top: 13px;
+  width: 100%;
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;