From 47c2d94154dff7502531b50f314094845af803ae Mon Sep 17 00:00:00 2001
From: Isaac <git@eartharoid.me>
Date: Sat, 15 Jun 2024 00:55:10 +0100
Subject: [PATCH] style: modal loader, sidebar colours

---
 src/components/Elements/MainModal/Main.jsx        | 14 ++++----------
 src/components/Elements/MainModal/scss/index.scss |  4 ++--
 src/scss/_variables.scss                          |  9 +++++++--
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx
index f8f2e953..5c87c658 100644
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@@ -10,16 +10,10 @@ const Addons = lazy(() => import('../../../features/misc/views/Addons'));
 const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
 
 const renderLoader = () => (
-  <div className="flex w-full min-h-full">
-    <div className="modalTabContent">
-      <div className="emptyItems">
-        <div className="emptyMessage">
-          <div className="loaderHolder">
-            <div id="loader"></div>
-            <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
-          </div>
-        </div>
-      </div>
+  <div className="flex flex-col w-full h-[65vh] justify-center items-center">
+    <div className="loaderHolder">
+      <div id="loader"></div>
+      <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
     </div>
   </div>
 );
diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss
index 72c65913..76e9265c 100644
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -130,9 +130,9 @@ h5 {
   height: 50px;
 
   @include themed {
-    border: 3px solid t($modal-sidebar);
+    border: 3px solid t($btn-background);
     border-radius: 50%;
-    border-top-color: t($modal-sidebarActive);
+    border-top-color: t($brand-accent);
   }
 
   animation: spin 1s ease-in-out infinite;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index aba3abce..229378dd 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -18,8 +18,11 @@ $link: 'link';
 $weather: 'weather';
 $modal-secondaryColour: 'modal-secondaryColour';
 $slightGradient: 'slightGradient';
+$orange: #ffb032;
+$pink: #dd3b67;
+$brand-accent: 'brand-accent';
 $theme-colours: (
-  'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
+  'gradient': linear-gradient(90deg, $orange 0%, $pink 100%),
   'main': rgb(242 243 244 / 100%),
   'secondary': rgb(0 0 0 / 100%),
   'main-text-color': rgb(242 243 244 / 100%),
@@ -54,6 +57,7 @@ $ui-elements: (
 );
 $themes: (
   light: (
+    'brand-accent': $pink,
     'weather': #333,
     'background': rgb(255 255 255 / 70%),
     'backgroundBlur': 15px,
@@ -71,6 +75,7 @@ $themes: (
     'slightGradient': linear-gradient(#fff, #ddd),
   ),
   dark: (
+    'brand-accent': $orange,
     'weather': #e7e7e7,
     'background': rgb(0 0 0 / 70%),
     'backgroundBlur': 15px,
@@ -82,7 +87,7 @@ $themes: (
     'btn-backgroundHover': #565656,
     'modal-background': #0a0a0a,
     'modal-sidebar': rgb(14, 16, 19),
-    'modal-sidebarActive': #333,
+    'modal-sidebarActive': rgba(0, 0, 0, 0.4),
     'modal-secondaryColour': #111,
     'link': rgb(115 115 255),
     'slightGradient': linear-gradient(#0e1013, #322a2a),