From 9737ef120dfe563d0c0138df95894b96c34d7b64 Mon Sep 17 00:00:00 2001
From: KartikGS <starkartik9@gmail.com>
Date: Tue, 6 Feb 2024 10:11:29 +0530
Subject: [PATCH] Fixes #746: dark mode - formatting

---
 src/lib/components/AssistantSettings.svelte   | 26 ++++++++----
 src/routes/settings/+layout.svelte            | 27 ++++++++----
 src/routes/settings/+page.svelte              | 12 ++++--
 .../assistants/[assistantId]/+page.svelte     | 41 ++++++++++++++-----
 4 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/AssistantSettings.svelte b/src/lib/components/AssistantSettings.svelte
index 40c606939a5..88eef554b39 100644
--- a/src/lib/components/AssistantSettings.svelte
+++ b/src/lib/components/AssistantSettings.svelte
@@ -110,7 +110,9 @@
 	}}
 >
 	{#if assistant}
-		<h2 class="text-xl font-semibold dark:text-gray-300">Edit assistant ({assistant?.name ?? ""})</h2>
+		<h2 class="text-xl font-semibold dark:text-gray-300">
+			Edit assistant ({assistant?.name ?? ""})
+		</h2>
 		<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
 			Modifying an existing assistant will propagate those changes to all users.
 		</p>
@@ -208,7 +210,10 @@
 
 			<label>
 				<span class="mb-1 text-sm font-semibold dark:text-gray-300">Model</span>
-				<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+				<select
+					name="modelId"
+					class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+				>
 					{#each models.filter((model) => !model.unlisted) as model}
 						<option
 							value={model.id}
@@ -227,27 +232,27 @@
 					<input
 						name="exampleInput1"
 						bind:value={inputMessage1}
-						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 					/>
 					{#if !!inputMessage1 || !!inputMessage2}
 						<input
 							name="exampleInput2"
 							bind:value={inputMessage2}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 					{#if !!inputMessage2 || !!inputMessage3}
 						<input
 							name="exampleInput3"
 							bind:value={inputMessage3}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 					{#if !!inputMessage3 || !!inputMessage4}
 						<input
 							name="exampleInput4"
 							bind:value={inputMessage4}
-							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+							class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 						/>
 					{/if}
 				</div>
@@ -256,10 +261,12 @@
 		</div>
 
 		<label class="flex flex-col">
-			<span class="mb-1 text-sm font-semibold dark:text-gray-300"> Instructions (system prompt) </span>
+			<span class="mb-1 text-sm font-semibold dark:text-gray-300">
+				Instructions (system prompt)
+			</span>
 			<textarea
 				name="preprompt"
-				class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm  dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
+				class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
 				placeholder="You'll act as..."
 				value={assistant?.preprompt ?? ""}
 			/>
@@ -270,7 +277,8 @@
 	<div class="mt-5 flex justify-end gap-2">
 		<a
 			href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
-			class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:text-gray-300 dark:bg-gray-700">Cancel</a
+			class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+			>Cancel</a
 		>
 		<button
 			type="submit"
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index 2719d3745b1..ffbc0cccdf9 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -52,7 +52,9 @@
 					goto(previousPage);
 				}}
 			>
-				<CarbonClose class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200" />
+				<CarbonClose
+					class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200"
+				/>
 			</button>
 		</div>
 		<div
@@ -64,7 +66,9 @@
 				<a
 					href="{base}/settings/{model.id}"
 					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
-					{model.id === $page.params.model ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
+					{model.id === $page.params.model
+						? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
+						: 'text-gray-500 dark:text-gray-400'}"
 				>
 					<div class="truncate">{model.displayName}</div>
 					{#if model.id === $settings.activeModel}
@@ -78,14 +82,19 @@
 			{/each}
 			<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
 			{#if data.enableAssistants}
-				<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">
+				<h3
+					bind:this={assistantsSection}
+					class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300"
+				>
 					Assistants
 				</h3>
 				{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
 					<a
 						href="{base}/settings/assistants/new"
 						class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
-					{$page.url.pathname === `${base}/settings/assistants/new` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
+					{$page.url.pathname === `${base}/settings/assistants/new`
+							? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
+							: 'text-gray-500 dark:text-gray-400'}"
 					>
 						<CarbonAdd />
 						<div class="truncate">Create new assistant</div>
@@ -95,7 +104,9 @@
 					<a
 						href="{base}/settings/assistants/{assistant._id.toString()}"
 						class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
-					{assistant._id.toString() === $page.params.assistantId ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
+					{assistant._id.toString() === $page.params.assistantId
+							? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
+							: 'text-gray-500 dark:text-gray-400'}"
 					>
 						{#if assistant.avatar}
 							<img
@@ -122,7 +133,7 @@
 				{/each}
 				<a
 					href="{base}/assistants"
-					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800 dark:text-gray-400"
+					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl dark:text-gray-400 dark:hover:bg-gray-800"
 					><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
 					<div class="truncate">Browse Assistants</div>
 				</a>
@@ -131,7 +142,9 @@
 			<a
 				href="{base}/settings"
 				class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 max-md:order-first md:rounded-xl dark:hover:bg-gray-800
-				{$page.url.pathname === `${base}/settings` ? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'}"
+				{$page.url.pathname === `${base}/settings`
+					? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
+					: 'text-gray-500 dark:text-gray-400'}"
 			>
 				<UserIcon class="text-sm" />
 				Application Settings
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 2dce519d128..464afe22382 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -21,7 +21,9 @@
 </script>
 
 <div class="flex w-full flex-col gap-5">
-	<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
+	<div
+		class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
+	>
 		<h2>Application Settings</h2>
 	</div>
 
@@ -77,14 +79,18 @@
 				action="{base}/conversations?/delete"
 				class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
 			>
-				<div class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300">
+				<div
+					class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
+				>
 					<h2>Are you sure?</h2>
 					<button
 						type="button"
 						class="group"
 						on:click|stopPropagation={() => (isConfirmingDeletion = false)}
 					>
-						<CarbonClose class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200" />
+						<CarbonClose
+							class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200"
+						/>
 					</button>
 				</div>
 				<p class="text-gray-800 dark:text-gray-300">
diff --git a/src/routes/settings/assistants/[assistantId]/+page.svelte b/src/routes/settings/assistants/[assistantId]/+page.svelte
index d8067a17420..6384b868275 100644
--- a/src/routes/settings/assistants/[assistantId]/+page.svelte
+++ b/src/routes/settings/assistants/[assistantId]/+page.svelte
@@ -48,7 +48,8 @@
 				<h1 class="mr-2 inline text-xl font-semibold dark:text-gray-300">
 					{assistant?.name}
 				</h1>
-				<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
+				<span
+					class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500 dark:text-gray-400"
 					>public</span
 				>
 			</div>
@@ -66,9 +67,7 @@
 					{assistant?.createdByName}
 				</a>
 			</p>
-			<div
-				class="flex items-center gap-4 whitespace-nowrap text-sm"
-			>
+			<div class="flex items-center gap-4 whitespace-nowrap text-sm">
 				<button
 					class="{isActive
 						? 'bg-gray-100 text-gray-800 dark:bg-gray-300 dark:text-gray-900'
@@ -82,33 +81,51 @@
 					{isActive ? "Active" : "Activate"}
 				</button>
 				{#if assistant?.createdByMe}
-					<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+					<a
+						href="{base}/settings/assistants/{assistant?._id}/edit"
+						class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 						><CarbonPen class="mr-1.5 inline text-xs" />Edit
 					</a>
 					<form method="POST" action="?/delete" use:enhance>
-						<button type="submit" class="flex items-center underline text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
+						<button
+							type="submit"
+							class="flex items-center text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+						>
 							<CarbonTrash class="mr-1.5 inline text-xs" />Delete</button
 						>
 					</form>
 				{:else}
 					<form method="POST" action="?/unsubscribe" use:enhance>
-						<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
+						<button
+							type="submit"
+							class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+						>
 							<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
 						>
 					</form>
 					<form method="POST" action="?/edit" use:enhance class="hidden">
-						<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
+						<button
+							type="submit"
+							class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+						>
 							<CarbonCopy class="mr-1.5 inline text-xs" />Duplicate</button
 						>
 					</form>
 					{#if !assistant?.reported}
 						<form method="POST" action="?/report" use:enhance>
-							<button type="submit" class="underline  text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300">
+							<button
+								type="submit"
+								class="text-gray-500 underline hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+							>
 								<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
 							>
 						</form>
 					{:else}
-						<button type="button" disabled class="text-gray-700  hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300">
+						<button
+							type="button"
+							disabled
+							class="text-gray-700 hover:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300"
+						>
 							<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button
 						>
 					{/if}
@@ -120,7 +137,9 @@
 	<div>
 		<h2 class="text-lg font-semibold dark:text-gray-300">Direct URL</h2>
 
-		<p class="pb-2 text-sm text-gray-500 dark:text-gray-400">Share this link for people to use your assistant.</p>
+		<p class="pb-2 text-sm text-gray-500 dark:text-gray-400">
+			Share this link for people to use your assistant.
+		</p>
 
 		<div
 			class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"