From 466e1fecb442261ee6d9d6aef3f29c81e2373bd7 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 10 Nov 2024 18:42:52 -0800
Subject: [PATCH] refac: styling

---
 .../workspace/Models/ModelEditor.svelte       |   4 +-
 .../workspace/Prompts/PromptEditor.svelte     | 216 +++++++++---------
 .../workspace/prompts/create/+page.svelte     |   8 +-
 .../(app)/workspace/prompts/edit/+page.svelte |   8 +-
 4 files changed, 117 insertions(+), 119 deletions(-)

diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 3071d7d97..c163c9dbf 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -218,7 +218,7 @@
 	});
 </script>
 
-<div class="w-full max-h-full">
+<div class="w-full max-h-full flex justify-center">
 	<input
 		bind:this={filesInputElement}
 		bind:files={inputFiles}
@@ -657,7 +657,7 @@
 					{/if}
 				</div>
 
-				<div class="my-2 flex justify-end mb-20">
+				<div class="my-2 flex justify-end pb-20">
 					<button
 						class=" text-sm px-3 py-2 transition rounded-lg {loading
 							? ' cursor-not-allowed bg-white hover:bg-gray-100 text-black'
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 25920800a..150440104 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -58,119 +58,121 @@
 	});
 </script>
 
-<form
-	class="flex flex-col max-w-4xl mx-auto mt-4 mb-10 pb-10"
-	on:submit|preventDefault={() => {
-		submitHandler();
-	}}
->
-	<div class="my-2">
-		<Tooltip
-			content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t(
-				'Activate this command by typing "/{{COMMAND}}" to chat input.',
-				{
-					COMMAND: command
-				}
-			)}`}
-			placement="bottom-start"
-		>
-			<div class="flex flex-col w-full">
+<div class="w-full max-h-full flex justify-center">
+	<form
+		class="flex flex-col max-w-4xl mx-auto mb-10 py-4"
+		on:submit|preventDefault={() => {
+			submitHandler();
+		}}
+	>
+		<div class="my-2">
+			<Tooltip
+				content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t(
+					'Activate this command by typing "/{{COMMAND}}" to chat input.',
+					{
+						COMMAND: command
+					}
+				)}`}
+				placement="bottom-start"
+			>
+				<div class="flex flex-col w-full">
+					<div>
+						<input
+							class="text-2xl font-semibold w-full bg-transparent outline-none"
+							placeholder={$i18n.t('Title')}
+							bind:value={title}
+							required
+						/>
+					</div>
+
+					<div class="flex gap-0.5 items-center text-xs text-gray-500">
+						<div class="">/</div>
+						<input
+							class=" w-full bg-transparent outline-none"
+							placeholder={$i18n.t('Command')}
+							bind:value={command}
+							required
+							disabled={edit}
+						/>
+					</div>
+				</div>
+			</Tooltip>
+		</div>
+
+		<div class="my-2">
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}</div>
+			</div>
+
+			<div class="mt-2">
 				<div>
-					<input
-						class="text-2xl font-semibold w-full bg-transparent outline-none"
-						placeholder={$i18n.t('Title')}
-						bind:value={title}
+					<Textarea
+						className="text-sm w-full bg-transparent outline-none overflow-y-hidden resize-none"
+						placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
+						bind:value={content}
+						rows={6}
 						required
 					/>
 				</div>
 
-				<div class="flex gap-0.5 items-center text-xs text-gray-500">
-					<div class="">/</div>
-					<input
-						class=" w-full bg-transparent outline-none"
-						placeholder={$i18n.t('Command')}
-						bind:value={command}
-						required
-						disabled={edit}
-					/>
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					ⓘ {$i18n.t('Format your variables using brackets like this:')}&nbsp;<span
+						class=" text-gray-600 dark:text-gray-300 font-medium"
+						>{'{{'}{$i18n.t('variable')}{'}}'}</span
+					>.
+					{$i18n.t('Make sure to enclose them with')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">{'{{'}</span>
+					{$i18n.t('and')}
+					<span class=" text-gray-600 dark:text-gray-300 font-medium">{'}}'}</span>.
 				</div>
-			</div>
-		</Tooltip>
-	</div>
 
-	<div class="my-2">
-		<div class="flex w-full justify-between">
-			<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}</div>
-		</div>
-
-		<div class="mt-2">
-			<div>
-				<Textarea
-					className="text-sm w-full bg-transparent outline-none overflow-y-hidden resize-none"
-					placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
-					bind:value={content}
-					rows={6}
-					required
-				/>
-			</div>
-
-			<div class="text-xs text-gray-400 dark:text-gray-500">
-				ⓘ {$i18n.t('Format your variables using brackets like this:')}&nbsp;<span
-					class=" text-gray-600 dark:text-gray-300 font-medium"
-					>{'{{'}{$i18n.t('variable')}{'}}'}</span
-				>.
-				{$i18n.t('Make sure to enclose them with')}
-				<span class=" text-gray-600 dark:text-gray-300 font-medium">{'{{'}</span>
-				{$i18n.t('and')}
-				<span class=" text-gray-600 dark:text-gray-300 font-medium">{'}}'}</span>.
-			</div>
-
-			<div class="text-xs text-gray-400 dark:text-gray-500">
-				{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
-					{` {{CLIPBOARD}}`}</span
-				>
-				{$i18n.t('variable to have them replaced with clipboard content.')}
-			</div>
-		</div>
-	</div>
-
-	<div class="my-4 flex justify-end">
-		<button
-			class=" text-sm px-3 py-2 transition rounded-lg {loading
-				? ' cursor-not-allowed bg-white hover:bg-gray-100 text-black'
-				: ' bg-white hover:bg-gray-100 text-black'} flex w-full justify-center"
-			type="submit"
-			disabled={loading}
-		>
-			<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
-
-			{#if loading}
-				<div class="ml-1.5 self-center">
-					<svg
-						class=" w-4 h-4"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						xmlns="http://www.w3.org/2000/svg"
-						><style>
-							.spinner_ajPY {
-								transform-origin: center;
-								animation: spinner_AtaB 0.75s infinite linear;
-							}
-							@keyframes spinner_AtaB {
-								100% {
-									transform: rotate(360deg);
-								}
-							}
-						</style><path
-							d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-							opacity=".25"
-						/><path
-							d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-							class="spinner_ajPY"
-						/></svg
+				<div class="text-xs text-gray-400 dark:text-gray-500">
+					{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
+						{` {{CLIPBOARD}}`}</span
 					>
+					{$i18n.t('variable to have them replaced with clipboard content.')}
 				</div>
-			{/if}
-		</button>
-	</div>
-</form>
+			</div>
+		</div>
+
+		<div class="my-4 flex justify-end pb-20">
+			<button
+				class=" text-sm px-3 py-2 transition rounded-lg {loading
+					? ' cursor-not-allowed bg-white hover:bg-gray-100 text-black'
+					: ' bg-white hover:bg-gray-100 text-black'} flex w-full justify-center"
+				type="submit"
+				disabled={loading}
+			>
+				<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
+
+				{#if loading}
+					<div class="ml-1.5 self-center">
+						<svg
+							class=" w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							><style>
+								.spinner_ajPY {
+									transform-origin: center;
+									animation: spinner_AtaB 0.75s infinite linear;
+								}
+								@keyframes spinner_AtaB {
+									100% {
+										transform: rotate(360deg);
+									}
+								}
+							</style><path
+								d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+								opacity=".25"
+							/><path
+								d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+								class="spinner_ajPY"
+							/></svg
+						>
+					</div>
+				{/if}
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/routes/(app)/workspace/prompts/create/+page.svelte b/src/routes/(app)/workspace/prompts/create/+page.svelte
index f94b773d6..cd061477e 100644
--- a/src/routes/(app)/workspace/prompts/create/+page.svelte
+++ b/src/routes/(app)/workspace/prompts/create/+page.svelte
@@ -58,8 +58,6 @@
 	});
 </script>
 
-<div class="w-full max-h-full">
-	{#key prompt}
-		<PromptEditor {prompt} {onSubmit} />
-	{/key}
-</div>
+{#key prompt}
+	<PromptEditor {prompt} {onSubmit} />
+{/key}
diff --git a/src/routes/(app)/workspace/prompts/edit/+page.svelte b/src/routes/(app)/workspace/prompts/edit/+page.svelte
index d1ffec463..c5ff521fe 100644
--- a/src/routes/(app)/workspace/prompts/edit/+page.svelte
+++ b/src/routes/(app)/workspace/prompts/edit/+page.svelte
@@ -44,8 +44,6 @@
 	});
 </script>
 
-<div class="w-full max-h-full">
-	{#if prompt}
-		<PromptEditor {prompt} {onSubmit} edit />
-	{/if}
-</div>
+{#if prompt}
+	<PromptEditor {prompt} {onSubmit} edit />
+{/if}