From 2d69cf8cf4c37e3d3b436937b898d4492638b3af Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 8 Nov 2023 00:04:05 -0800
Subject: [PATCH] feat: suggestions ui updated

---
 src/lib/components/chat/Suggestions.svelte | 80 ++++++++++++++--------
 src/lib/components/layout/Navbar.svelte    |  2 +-
 src/routes/+page.svelte                    | 17 +----
 3 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index 8882bac59..20ffb211f 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -4,7 +4,7 @@
 
 <div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
 	<button
-		class=" flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
+		class=" flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
 		on:click={() => {
 			submitPrompt(`Tell me a random fun fact about the Roman Empire`);
 		}}
@@ -15,19 +15,25 @@
 		</div>
 
 		<div
-			class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
+			class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
-				><path
-					d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
-					fill="currentColor"
-				/></svg
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
+				<path
+					fill-rule="evenodd"
+					d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</div>
 	</button>
 
 	<button
-		class="flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
+		class=" flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
 		on:click={() => {
 			submitPrompt(`Show me a code snippet of a website's sticky header in CSS and JavaScript.`);
 		}}
@@ -37,19 +43,25 @@
 			<div class="text-sm text-gray-500">of a website's sticky header</div>
 		</div>
 		<div
-			class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
+			class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
-				><path
-					d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
-					fill="currentColor"
-				/></svg
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
+				<path
+					fill-rule="evenodd"
+					d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</div>
 	</button>
 
 	<button
-		class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
+		class="  hidden sm:flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
 		on:click={() => {
 			submitPrompt(
 				`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
@@ -61,19 +73,25 @@
 			<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
 		</div>
 		<div
-			class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
+			class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
-				><path
-					d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
-					fill="currentColor"
-				/></svg
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
+				<path
+					fill-rule="evenodd"
+					d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</div>
 	</button>
 
 	<button
-		class="  hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
+		class="  hidden sm:flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
 		on:click={() => {
 			submitPrompt(
 				`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
@@ -85,14 +103,20 @@
 			<div class="text-sm text-gray-500">for what to do with my kids' art</div>
 		</div>
 		<div
-			class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
+			class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
-				><path
-					d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
-					fill="currentColor"
-				/></svg
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-4 h-4"
 			>
+				<path
+					fill-rule="evenodd"
+					d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+					clip-rule="evenodd"
+				/>
+			</svg>
 		</div>
 	</button>
 </div>
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 8b60eb114..4315e5dac 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -114,7 +114,7 @@
 	bind:this={navElement}
 	class="h-screen {show
 		? ''
-		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm
+		: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm
         "
 >
 	<div class="py-2.5 my-auto flex flex-col justify-between h-screen">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8d3ba171a..b33264d87 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -795,20 +795,7 @@
 
 		<div class="min-h-screen w-full flex justify-center">
 			<div class=" py-2.5 flex flex-col justify-between w-full">
-				<!-- <div class="max-w-2xl w-full px-2.5">
-					<div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-900">
-						<div>
-							<label
-								for="models"
-								class="block mb-2 text-sm font-medium dark:text-gray-200 flex justify-between"
-							/>
-
-							<div />
-						</div>
-					</div>
-				</div> -->
-
-				<div class="max-w-2xl mx-auto w-full mt-14">
+				<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-14">
 					<div class="flex justify-between my-2 text-sm">
 						<select
 							id="models"
@@ -861,7 +848,7 @@
 
 				<div class=" h-full mt-10 mb-48 w-full flex flex-col">
 					{#if messages.length == 0}
-						<div class="m-auto text-center max-w-md pb-16">
+						<div class="m-auto text-center max-w-md pb-28 px-2">
 							<div class="flex justify-center mt-8">
 								<img src="/ollama.png" class="w-16 invert-[80%]" />
 							</div>