From d961e8943e119caa1b5ab06ee8d11c65bfbdac2d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 6 Nov 2024 21:13:37 -0800
Subject: [PATCH] refac: styling

---
 src/lib/components/playground/Notes.svelte |  2 +-
 src/routes/(app)/admin/+layout.svelte      | 29 ++++++--------
 src/routes/(app)/playground/+layout.svelte | 29 +++++++-------
 src/routes/(app)/workspace/+layout.svelte  | 44 +++++++++-------------
 4 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/src/lib/components/playground/Notes.svelte b/src/lib/components/playground/Notes.svelte
index 6b616cf46..9b549e474 100644
--- a/src/lib/components/playground/Notes.svelte
+++ b/src/lib/components/playground/Notes.svelte
@@ -18,7 +18,7 @@
 	let loading = false;
 </script>
 
-<div class="relative flex-1 w-full h-full flex justify-center overflow-auto px-5 py-1">
+<div class="relative flex-1 w-full h-full flex justify-center overflow-auto px-5">
 	{#if loading}
 		<div class=" absolute top-0 bottom-0 left-0 right-0 flex">
 			<div class="m-auto">
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index d7311c917..5219f1c6c 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -30,9 +30,9 @@
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''}"
 	>
-		<div class=" px-3.5 py-2">
+		<div class=" px-3.5 pt-1.5">
 			<div class=" flex items-center gap-1">
-				<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 flex flex-none items-center">
+				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
 					<button
 						id="sidebar-toggle-button"
 						class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@@ -46,36 +46,31 @@
 						</div>
 					</button>
 				</div>
-				<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Admin Panel')}</div> -->
 
 				<div class=" flex w-full">
 					<div
-						class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 p-1"
+						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1"
 					>
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {['/admin', '/admin/'].includes(
+							class="min-w-fit rounded-full p-1.5 {['/admin', '/admin/'].includes(
 								$page.url.pathname
 							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/admin">{$i18n.t('Dashboard')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-								'/admin/evaluations'
-							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/evaluations')
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/admin/evaluations">{$i18n.t('Evaluations')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-								'/admin/settings'
-							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/settings')
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/admin/settings">{$i18n.t('Settings')}</a
 						>
 					</div>
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index 7a17241ba..ba14cf0df 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -20,9 +20,9 @@
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''}"
 >
-	<div class=" px-3.5 py-2">
-		<div class=" flex items-center gap-1">
-			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 flex flex-none items-center">
+	<div class=" px-3.5 mt-1.5">
+		<div class=" flex items-center">
+			<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
 				<button
 					id="sidebar-toggle-button"
 					class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@@ -36,36 +36,33 @@
 					</div>
 				</button>
 			</div>
-			<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Admin Panel')}</div> -->
 
 			<div class=" flex w-full">
 				<div
-					class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 p-1"
+					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1"
 				>
 					<a
-						class="min-w-fit rounded-full p-1.5 px-3 {['/playground', '/playground/'].includes(
+						class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes(
 							$page.url.pathname
 						)
-							? 'bg-gray-50 dark:bg-gray-850'
-							: ''} transition"
+							? ''
+							: 'text-gray-300 dark:text-gray-600'} transition"
 						href="/playground">{$i18n.t('Chat')}</a
 					>
 
 					<a
-						class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-							'/playground/notes'
-						)
-							? 'bg-gray-50 dark:bg-gray-850'
-							: ''} transition"
+						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/playground/notes')
+							? ''
+							: 'text-gray-300 dark:text-gray-600'} transition"
 						href="/playground/notes">{$i18n.t('Notes')}</a
 					>
 
 					<a
-						class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
+						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
 							'/playground/completions'
 						)
-							? 'bg-gray-50 dark:bg-gray-850'
-							: ''} transition"
+							? ''
+							: 'text-gray-300 dark:text-gray-600'} transition"
 						href="/playground/completions">{$i18n.t('Completions')}</a
 					>
 				</div>
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index a9db5bbaf..f73d731fd 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -30,9 +30,9 @@
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''}"
 	>
-		<div class="   px-3.5 my-2 bg-transparent backdrop-blur-xl">
+		<div class="   px-3.5 mt-1.5 bg-transparent backdrop-blur-xl">
 			<div class=" flex items-center gap-1">
-				<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-center flex flex-none items-center">
+				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<button
 						id="sidebar-toggle-button"
 						class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
@@ -47,58 +47,50 @@
 					</button>
 				</div>
 
-				<!-- <div class="flex items-center text-xl font-semibold mr-3">{$i18n.t('Workspace')}</div> -->
-
 				<div class="">
 					<div
-						class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 backdrop-blur-2xl p-1 touch-auto pointer-events-auto"
+						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1 touch-auto pointer-events-auto"
 					>
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-								'/workspace/models'
-							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/models')
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/workspace/models">{$i18n.t('Models')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
 								'/workspace/knowledge'
 							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/workspace/knowledge"
 						>
 							{$i18n.t('Knowledge')}
 						</a>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-								'/workspace/prompts'
-							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/prompts')
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/workspace/prompts">{$i18n.t('Prompts')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
-								'/workspace/tools'
-							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/workspace/tools"
 						>
 							{$i18n.t('Tools')}
 						</a>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
+							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
 								'/workspace/functions'
 							)
-								? 'bg-gray-50 dark:bg-gray-850'
-								: ''} transition"
+								? ''
+								: 'text-gray-300 dark:text-gray-600'} transition"
 							href="/workspace/functions"
 						>
 							{$i18n.t('Functions')}