From 985a2cd950ad941921ff1bdd7464e8e2a49cd9d8 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 6 Oct 2024 19:11:26 +0100
Subject: [PATCH] chore: sidebar and brand color styling improvements

---
 .../Org/Settings/OrgSettings.svelte           | 31 +++++++++++++------
 .../src/lib/components/Org/SideBar.svelte     |  4 ++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte b/apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte
index fe4c778a..9d2598c9 100644
--- a/apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte
+++ b/apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte
@@ -230,15 +230,18 @@
         </button>
 
         <div
-          class="w-fit h-auto border-2 {isCustomTheme &&
-            'border-primary-700'} rounded-full relative group"
+          class="w-fit h-auto border-2 {isCustomTheme
+            ? 'border-primary-700'
+            : 'dark:border-neutral-700'} rounded-full relative group"
         >
           <!-- plus icon positioned over the color picker -->
           <div
             class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-200"
           >
             <svg
-              class="w-6 h-6 text-{isCustomTheme ? 'white' : 'black'} z-10 opacity-100"
+              class="w-6 h-6 text-{isCustomTheme
+                ? 'white'
+                : 'black'} dark:text-white z-10 opacity-100"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
@@ -248,13 +251,7 @@
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
             </svg>
           </div>
-          <ColorPicker
-            position="responsive"
-            label=""
-            bind:hex
-            on:input={handleCustomTheme}
-            nullable
-          />
+          <ColorPicker position="responsive" label="" bind:hex on:input={handleCustomTheme} />
         </div>
       </div>
     </Column>
@@ -332,3 +329,17 @@
     </Column>
   </Row>
 </Grid>
+
+<style>
+  :global(.dark) {
+    --cp-text-color: #fff;
+    --cp-border-color: white;
+    --cp-text-color: white;
+    --cp-input-color: #555;
+    --cp-button-hover-color: #777;
+  }
+
+  :global(.dark .alpha) {
+    background: #333 !important;
+  }
+</style>
diff --git a/apps/dashboard/src/lib/components/Org/SideBar.svelte b/apps/dashboard/src/lib/components/Org/SideBar.svelte
index 30fe3d5e..61fd1b12 100644
--- a/apps/dashboard/src/lib/components/Org/SideBar.svelte
+++ b/apps/dashboard/src/lib/components/Org/SideBar.svelte
@@ -170,7 +170,9 @@
                 width="w-[1.2rem]"
                 height="h-[1.2rem]"
               />
-              <p class="text-sm font-medium truncate max-w-full">{$profile.fullname}</p>
+              <p class="text-sm dark:text-white font-medium truncate max-w-full">
+                {$profile.fullname}
+              </p>
             </div>
             <div>
               <ChevronRight />