Implement @JBEmbedded's feedback (#99)

* Implement @JBEmbedded's feedback Signed-off-by: Frank Noirot <[email protected]> * Push borders more into bg, tweak some other colors --------- Signed-off-by: Frank Noirot <[email protected]>
KittyCAD · Jan 16, 2024 · 6bbe411 · 6bbe411
1 parent df8a805
commit 6bbe411
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 28 deletions.
diff --git a/.env.development b/.env.development
@@ -1,3 +1,3 @@
 VITE_API_BASE_URL=https://api.dev.zoo.dev
 VITE_SITE_BASE_URL=https://dev.zoo.dev
-PLAYWRIGHT_SESSION_COOKIE=''
+PLAYWRIGHT_SESSION_COOKIE='0f93cf23-6604-43dd-911a-c98e2c641848'
diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte
@@ -3,6 +3,7 @@
 	import { paths } from '$lib/paths'
 	import Person from './Icons/Person.svelte'
 	import ArrowRight from './Icons/ArrowRight.svelte'
+	import ArrowLeft from './Icons/ArrowLeft.svelte'
 
 	export let user: Models['User_type']
 	let open = false
@@ -61,7 +62,7 @@
 				/>
 			{/if}
 		</div>
-		<span class="mt-0.5 font-mono">{displayName}</span>
+		<span class="mt-0.5 font-mono text-left whitespace-break-spaces">{displayName}</span>
 	</button>
 	<dialog class="menu">
 		<menu class="contents">
@@ -82,7 +83,7 @@
 				target="_blank"
 				rel="noopener noreferrer"
 			>
-				<span>Billing Info</span>
+				<span class="flex-1 text-left">Billing Info</span>
 				<ArrowRight class="w-5 h-5 inline-block origin-center -rotate-45 ml-1" />
 			</a>
 			<a
@@ -92,11 +93,12 @@
 				target="_blank"
 				rel="noopener noreferrer"
 			>
-				<span>Report UI Issue</span>
+				<span class="flex-1 text-left">Report UI Issue</span>
 				<ArrowRight class="w-5 h-5 inline-block origin-center -rotate-45 ml-1" />
 			</a>
 			<a data-sveltekit-reload href={paths.SIGN_OUT} class="menu-button" on:keydown={dismiss}>
-				Sign Out
+				<span class="flex-1 text-left">Sign Out</span>
+				<ArrowLeft class="w-5 h-5 inline-block origin-center -rotate-45 ml-1" />
 			</a>
 		</menu>
 	</dialog>
@@ -107,7 +109,7 @@
 		@apply absolute bottom-full left-0;
 		@apply z-10 mb-2;
 		@apply text-chalkboard-120 dark:text-chalkboard-10;
-		@apply bg-white dark:bg-chalkboard-90;
+		@apply bg-white dark:bg-chalkboard-120;
 		@apply border-solid border-2 border-chalkboard-100;
 		@apply border border-chalkboard-100 dark:border-chalkboard-20;
 		@apply flex flex-col;
@@ -136,7 +138,7 @@
 
 	.menu-button {
 		@apply uppercase tracking-[1px] hover:bg-green hover:text-chalkboard-120;
-		@apply flex gap-2 justify-center items-center text-sm font-mono text-center px-4 py-2 border-t;
+		@apply flex gap-2 justify-center items-center text-sm font-mono px-4 py-2 border-t;
 	}
 
 	.menu-button span {

diff --git a/src/components/ErrorCard.svelte b/src/components/ErrorCard.svelte
@@ -17,7 +17,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="error-card" on:mousemove={handleMouseMove} bind:this={card}>
 	<p class="error-tag font-mono text-sm">An error occurred:</p>
-	<p class="font-mono text-lg">
+	<p class="font-mono mt-4">
 		{error}
 	</p>
 </div>
@@ -26,7 +26,7 @@
 	.error-card {
 		--x-rotate: 0;
 		--y-rotate: 0;
-		@apply max-w-xl p-4 md:p-16 lg:p-24 rounded-md;
+		@apply max-w-md p-4 md:p-8 rounded-md;
 		@apply bg-destroy-10/20 dark:bg-destroy-80/20 text-destroy-80 dark:text-destroy-10;
 		@apply border border-destroy-80;
 		transform-style: preserve-3d;

diff --git a/src/components/ExamplePrompts.svelte b/src/components/ExamplePrompts.svelte
@@ -34,7 +34,7 @@
 	}
 
 	.prompt-buttons button {
-		@apply text-sm text-left font-mono tracking-wider rounded border p-3 md:p-4;
+		@apply text-sm text-left tracking-wider rounded border p-2;
 		@apply bg-transparent hover:bg-green/50;
 		@apply text-chalkboard-70 dark:text-chalkboard-50 hover:text-chalkboard-120 dark:hover:text-chalkboard-10;
 		@apply border-chalkboard-30 dark:border-chalkboard-70;

diff --git a/src/components/PromptForm.svelte b/src/components/PromptForm.svelte
@@ -72,7 +72,10 @@
 	}
 </script>
 
-<form on:submit={submitForm} class="flex border items-stretch text-lg">
+<form
+	on:submit={submitForm}
+	class="flex border border-chalkboard-30 dark:border-chalkboard-90 focus-within:border-currentColor items-stretch text-lg"
+>
 	<label class="flex-1 grid place-items-center">
 		<span class="sr-only">Enter a text-to-CAD prompt:</span>
 		<!-- svelte-ignore a11y-autofocus -->

diff --git a/src/components/PromptGuide.svelte b/src/components/PromptGuide.svelte
@@ -1,6 +1,6 @@
 <div class="my-12 text-chalkboard-100 dark:text-chalkboard-20">
-	<h2 class="font-mono pt-1 text-xs uppercase">Prompt writing tips:</h2>
-	<ul class="list-disc pl-6 text-lg">
+	<h2 class="font-mono pt-1 text-xs uppercase font-normal">Prompt writing tips:</h2>
+	<ul class="list-disc pl-6">
 		<li class="my-4">
 			Describe an object that can be represented in geometric shapes, not nebulous concepts such as
 			"a tiger" or "the universe", unless you're just curious what it does with that 😏

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -46,7 +46,7 @@
 		</a>
 	</header>
 	<div class="mobile-contents hidden md:contents">
-		<div class="flex-auto overflow-hidden border-y">
+		<div class="flex-auto overflow-hidden border-y border-chalkboard-30 dark:border-chalkboard-90">
 			<GenerationList />
 		</div>
 		<footer>
@@ -61,7 +61,7 @@
 		@apply flex flex-col md:max-h-full overflow-hidden;
 		@apply flex-none;
 		@apply justify-between md:justify-start;
-		@apply border-b md:border-b-0 md:border-r;
+		@apply border-b border-chalkboard-30 dark:border-chalkboard-90 md:border-b-0 md:border-r;
 	}
 
 	.sidebar.open {

diff --git a/src/routes/(sidebarLayout)/dashboard/+page.svelte b/src/routes/(sidebarLayout)/dashboard/+page.svelte
@@ -22,12 +22,12 @@
 					<BlockedMessage blockedReason={data.user.block} />
 				</div>
 			{/if}
-			<ExamplePrompts {input} class="my-12" />
+			<ExamplePrompts {input} class="mb-12 mt-24" />
 			<PromptGuide />
 		</div>
 	</div>
 	<footer
-		class="max-w-4xl w-full mx-auto flex flex-col md:flex-row gap-4 md:items-center justify-between px-2 lg:px-4 py-1 border border-b-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
+		class="max-w-4xl w-full mx-auto flex flex-col md:flex-row gap-4 md:items-center justify-between px-2 lg:px-4 py-1 border border-chalkboard-30 dark:border-chalkboard-90 border-b-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
 	>
 		<p>
 			Built with the{' '}

diff --git a/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte b/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte
@@ -36,30 +36,26 @@
 			<Spinner class="block w-10 h-10 animate-spin" />
 		</div>
 	{:else}
-		<div class="md:mt-16 grid md:grid-cols-3 lg:grid-cols-4 md:border items-stretch">
+		<div class="md:mt-16 grid md:grid-cols-3 items-stretch gap-4">
 			<h1
-				class="font-normal font-mono md:col-span-2 lg:col-span-3 md:border-r px-2 py-6 lg:px-4 lg:py-8"
+				class="font-normal font-mono md:col-span-2 md:border border-chalkboard-30 dark:border-chalkboard-90 rounded px-2 py-4 lg:px-4"
 			>
 				<span class="block text-sm uppercase text-chalkboard-70 dark:text-chalkboard-40"
 					>Your Prompt</span
 				>
 				<span class="sr-only">: </span>
-				<span class="block text-lg">"{data.prompt.trim()}"</span>
+				<span class="block">"{data.prompt.trim()}"</span>
 			</h1>
 			{#if data.outputs}
 				<div class="grid grid-rows-2 justify-stretch self-stretch items-stretch">
-					<DownloadButton
-						className="w-full md:border-b"
-						outputs={data.outputs}
-						prompt={data.prompt}
-					/>
+					<DownloadButton className="w-full rounded" outputs={data.outputs} prompt={data.prompt} />
 					<ModelFeedback modelId={data.id} feedback={data.feedback} />
 				</div>
 			{:else if data.status === 'failed'}
-				<div class="flex justify-stretch self-stretch items-stretch">
+				<div class="flex justify-stretch">
 					<a
 						href={`/dashboard?prompt=${data.prompt}`}
-						class="link-text fallback-button text-chalkboard-120 bg-green"
+						class="link-text fallback-button border rounded border-green text-green hover:bg-green hover:text-chalkboard-120"
 					>
 						Retry prompt</a
 					>
@@ -97,7 +93,7 @@
 			</div>
 		{/if}
 		<footer
-			class="w-full flex flex-col md:flex-row md:items-center justify-between px-2 lg:px-4 py-1 border border-b-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
+			class="w-full flex flex-col md:flex-row md:items-center justify-between px-2 lg:px-4 py-1 border border-chalkboard-30 dark:border-chalkboard-90 border-b-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
 		>
 			<p>Submitted {data.created_at}</p>
 			{#if data.outputs && data.status === 'completed'}