From e9decf2dda19b391eb0ece547e8977f1d91e9ee8 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 14 May 2024 20:31:22 -1000
Subject: [PATCH] refac: styling
---
src/lib/components/workspace/Documents.svelte | 2 +-
.../components/workspace/Modelfiles.svelte | 2 +-
.../components/workspace/Playground.svelte | 2 +-
src/lib/components/workspace/Prompts.svelte | 2 +-
src/routes/(app)/workspace/+page.svelte | 162 ++++++++----------
5 files changed, 79 insertions(+), 91 deletions(-)
diff --git a/src/lib/components/workspace/Documents.svelte b/src/lib/components/workspace/Documents.svelte
index 8f48ab85e..72bacb785 100644
--- a/src/lib/components/workspace/Documents.svelte
+++ b/src/lib/components/workspace/Documents.svelte
@@ -277,7 +277,7 @@
</div>
</div> -->
-<hr class=" dark:border-gray-700 my-2.5" />
+<hr class=" dark:border-gray-850 my-2.5" />
{#if tags.length > 0}
<div class="px-2.5 pt-1 flex gap-1 flex-wrap">
diff --git a/src/lib/components/workspace/Modelfiles.svelte b/src/lib/components/workspace/Modelfiles.svelte
index ac3de1682..6a38d94b2 100644
--- a/src/lib/components/workspace/Modelfiles.svelte
+++ b/src/lib/components/workspace/Modelfiles.svelte
@@ -103,7 +103,7 @@
</div>
</a>
-<hr class=" dark:border-gray-700" />
+<hr class=" dark:border-gray-850" />
<div class=" my-2 mb-5">
{#each $modelfiles as modelfile}
diff --git a/src/lib/components/workspace/Playground.svelte b/src/lib/components/workspace/Playground.svelte
index 8f25ca4d6..a69144e7d 100644
--- a/src/lib/components/workspace/Playground.svelte
+++ b/src/lib/components/workspace/Playground.svelte
@@ -400,7 +400,7 @@
</div>
</div>
- <div class="pb-2">
+ <div class="pb-3">
{#if !loading}
<button
class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 9561e1cb5..4f88d3c13 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -89,7 +89,7 @@
</a>
</div>
</div>
-<hr class=" dark:border-gray-700 my-2.5" />
+<hr class=" dark:border-gray-850 my-2.5" />
<div class="my-3 mb-5">
{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}
diff --git a/src/routes/(app)/workspace/+page.svelte b/src/routes/(app)/workspace/+page.svelte
index 19079a7c7..7415a6c69 100644
--- a/src/routes/(app)/workspace/+page.svelte
+++ b/src/routes/(app)/workspace/+page.svelte
@@ -89,95 +89,83 @@
</title>
</svelte:head>
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
- <div class=" flex flex-col justify-between w-full overflow-y-auto">
- <div class=" mx-auto w-full h-full">
- <div class="w-full h-full">
- <div class=" flex flex-col justify-center">
- <div class=" px-4 pt-3 mb-1.5">
- <div class=" flex items-center">
- <div
- class="{$showSidebar
- ? 'md:hidden'
- : ''} mr-1 self-start flex flex-none items-center"
- >
- <button
- id="sidebar-toggle-button"
- class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
- on:click={() => {
- showSidebar.set(!$showSidebar);
- }}
- >
- <div class=" m-auto self-center">
- <MenuLines />
- </div>
- </button>
- </div>
- <div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
- </div>
+<div class=" flex flex-col w-full min-h-screen">
+ <div class=" px-4 pt-3 mb-1.5">
+ <div class=" flex items-center">
+ <div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
+ <button
+ id="sidebar-toggle-button"
+ class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+ on:click={() => {
+ showSidebar.set(!$showSidebar);
+ }}
+ >
+ <div class=" m-auto self-center">
+ <MenuLines />
</div>
-
- <div class="px-4 mb-1">
- <div
- class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
- >
- <button
- class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
- ? 'bg-gray-50 dark:bg-gray-850'
- : ''} transition"
- type="button"
- on:click={() => {
- tab = '';
- }}>Modelfiles</button
- >
-
- <button
- class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
- ? 'bg-gray-50 dark:bg-gray-850'
- : ''} transition"
- type="button"
- on:click={() => {
- tab = 'prompts';
- }}>Prompts</button
- >
-
- <button
- class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
- ? 'bg-gray-50 dark:bg-gray-850'
- : ''} transition"
- type="button"
- on:click={() => {
- tab = 'documents';
- }}>Documents</button
- >
-
- <button
- class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
- ? 'bg-gray-50 dark:bg-gray-850'
- : ''} transition"
- type="button"
- on:click={() => {
- tab = 'playground';
- }}>Playground</button
- >
- </div>
- </div>
-
- <hr class=" my-2 dark:border-gray-850" />
-
- <div class=" py-1 px-5 min-h-full">
- {#if tab === ''}
- <Modelfiles />
- {:else if tab === 'prompts'}
- <Prompts />
- {:else if tab === 'documents'}
- <Documents />
- {:else if tab === 'playground'}
- <Playground />
- {/if}
- </div>
- </div>
+ </button>
</div>
+ <div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
</div>
</div>
+
+ <div class="px-4 mb-1">
+ <div
+ class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
+ >
+ <button
+ class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
+ ? 'bg-gray-50 dark:bg-gray-850'
+ : ''} transition"
+ type="button"
+ on:click={() => {
+ tab = '';
+ }}>Modelfiles</button
+ >
+
+ <button
+ class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
+ ? 'bg-gray-50 dark:bg-gray-850'
+ : ''} transition"
+ type="button"
+ on:click={() => {
+ tab = 'prompts';
+ }}>Prompts</button
+ >
+
+ <button
+ class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
+ ? 'bg-gray-50 dark:bg-gray-850'
+ : ''} transition"
+ type="button"
+ on:click={() => {
+ tab = 'documents';
+ }}>Documents</button
+ >
+
+ <button
+ class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
+ ? 'bg-gray-50 dark:bg-gray-850'
+ : ''} transition"
+ type="button"
+ on:click={() => {
+ tab = 'playground';
+ }}>Playground</button
+ >
+ </div>
+ </div>
+
+ <hr class=" my-2 dark:border-gray-850" />
+
+ <div class=" py-1 px-5 h-full">
+ {#if tab === ''}
+ <Modelfiles />
+ {:else if tab === 'prompts'}
+ <Prompts />
+ {:else if tab === 'documents'}
+ <Documents />
+ {:else if tab === 'playground'}
+ <Playground />
+ {/if}
+ </div>
</div>