From 26e2fec4e2307607f50cc3f5143f2929dbdadbbe Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 2 Nov 2023 14:01:06 +0100
Subject: [PATCH] feat(frontend): fix sidebar color (#2541)

* feat(frontend): fix sidebar color

* feat(frontend): fix sidebar color

* feat(frontend): fix sidebar theme switch
---
 .../lib/components/sidebar/UserMenu.svelte    | 53 ++++++++++---------
 .../src/routes/(root)/(logged)/+layout.svelte |  8 +--
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index bcd8c82f78..c76edacfc1 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -95,34 +95,35 @@
 					<Icon class="pr-0.5" data={faCog} /> Superadmin workspace
 				</button>
 			</div>
-			<div class="py-1" role="none">
-				<button
-					on:click={() => {
-						if (!document.documentElement.classList.contains('dark')) {
-							document.documentElement.classList.add('dark')
-							window.localStorage.setItem('dark-mode', 'dark')
-						} else {
-							document.documentElement.classList.remove('dark')
-							window.localStorage.setItem('dark-mode', 'light')
-						}
-					}}
-					class={twMerge(
-						'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
-						'flex flex-row items-center gap-1'
-					)}
-					role="menuitem"
-					tabindex="-1"
-				>
-					{#if darkMode}
-						<Sun class="w-4 h-4" />
-					{:else}
-						<Moon class="w-4 h-4" />
-					{/if}
-					Switch theme
-				</button>
-			</div>
 		{/if}
 
+		<div class="py-1" role="none">
+			<button
+				on:click={() => {
+					if (!document.documentElement.classList.contains('dark')) {
+						document.documentElement.classList.add('dark')
+						window.localStorage.setItem('dark-mode', 'dark')
+					} else {
+						document.documentElement.classList.remove('dark')
+						window.localStorage.setItem('dark-mode', 'light')
+					}
+				}}
+				class={twMerge(
+					'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
+					'flex flex-row items-center gap-1'
+				)}
+				role="menuitem"
+				tabindex="-1"
+			>
+				{#if darkMode}
+					<Sun class="w-4 h-4" />
+				{:else}
+					<Moon class="w-4 h-4" />
+				{/if}
+				Switch theme
+			</button>
+		</div>
+
 		<div class="py-1" role="none">
 			<MenuItem>
 				<button
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 4ebf57d353..c0967f12f6 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -173,7 +173,7 @@
 		>
 			<div
 				class={classNames(
-					'fixed inset-0 bg-[#202125] bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
+					'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
 					menuOpen ? 'opacity-100' : 'opacity-0'
 				)}
 			/>
@@ -211,7 +211,7 @@
 							</svg>
 						</button>
 					</div>
-					<div class="bg-[#202125] h-full !dark">
+					<div class="dark:bg-[#1e232e] bg-[#202125] h-full !dark">
 						<div
 							class="flex gap-x-2 flex-shrink-0 p-4 font-semibold text-gray-200 w-10"
 							class:w-40={!isCollapsed}
@@ -239,7 +239,9 @@
 				devOnly ? '!hidden' : ''
 			)}
 		>
-			<div class="flex-1 flex flex-col min-h-0 h-screen shadow-lg bg-[#202125] !dark">
+			<div
+				class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
+			>
 				<button
 					on:click={() => {
 						goto('/')