fix: adjust styling for icon buttons (#102)

- Minor styling fixes for buttons with icons - Minor size increase of prompt textarea on desktop resolutions - Minor styling improvements to code blocks in sessions
fmaclen · Jul 20, 2024 · d0852cd · d0852cd
1 parent 2c682ad
commit d0852cd
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 101 deletions.
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -2,7 +2,6 @@
 	let className: string | undefined = undefined;
 	export { className as class };
 	export let variant: 'default' | 'outline' | 'link' | 'icon' | undefined = 'default';
-	export let size: 'default' | 'icon' | 'link' | undefined = 'default';
 	export let href: string | undefined = undefined;
 </script>
 
@@ -12,20 +11,14 @@
 		{href}
 		class="
 			button button--{variant}
-			button--size-{size}
 			{className}
 		"
 		on:click
 	>
 		<slot />
 	</a>
 {:else}
-	<button
-		{...$$restProps}
-		class="button button--{variant} button--size-{size} {className}"
-		type="button"
-		on:click
-	>
+	<button {...$$restProps} class="button button--{variant} {className}" type="button" on:click>
 		<slot />
 	</button>
 {/if}
@@ -36,30 +29,27 @@
 
 		&--default,
 		&--outline {
-			@apply border text-sm font-medium;
-			@apply disabled:text-muted disabled:bg-shade-2 disabled:border-shade-2 disabled:pointer-events-none;
+			@apply border px-3 py-2 text-sm font-medium h-10;
+			@apply disabled:pointer-events-none disabled:border-shade-2 disabled:bg-shade-2 disabled:text-muted;
 		}
 
 		&--default {
-			@apply bg-accent border-accent text-shade-0;
+			@apply border-accent bg-accent text-shade-0;
 		}
 
 		&--outline {
 			@apply border-shade-4 hover:border-shade-6;
 		}
 
 		&--link {
-			@apply rounded-none underline underline-offset-4 hover:text-active;
+			@apply rounded-none underline underline-offset-4;
+			@apply hover:text-active;
 		}
 
-		&--size {
-			&-default {
-				@apply h-10 px-4 py-2;
-			}
-
-			&-icon {
-				@apply h-10 w-10;
-			}
+		&--icon {
+			@apply opacity-40 px-2 py-2 text-active;
+			@apply hover:opacity-60;
+			@apply active:opacity-100;
 		}
 	}
 </style>
diff --git a/src/lib/components/ButtonCopy.svelte b/src/lib/components/ButtonCopy.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Files } from "lucide-svelte";
+	import Button from "./Button.svelte";
+
+	export let content: string;
+
+	function copyContent() {
+		navigator.clipboard.writeText(content);
+	}
+</script>
+
+<div class="copy-button">
+	<Button title="Copy" variant="icon" on:click={copyContent}>
+		<Files class="h-4 w-4" />
+	</Button>
+</div>
+
+<style lang="scss">
+	.copy-button {
+		// Hiding the button by default because this functionality is not supported on mobile
+		display: none;
+
+		@media (hover: hover) {
+			// Show the button in devices that support hover (i.e. desktop)
+			display: unset;
+		}
+	}
+</style>
diff --git a/src/lib/components/ButtonDelete.svelte b/src/lib/components/ButtonDelete.svelte
@@ -4,6 +4,7 @@
 	import type { Writable } from 'svelte/store';
 	import { knowledgeStore, sessionsStore, deleteStoreItem } from '$lib/store';
 	import { goto } from '$app/navigation';
+	import Button from './Button.svelte';
 
 	export let sitemap: Sitemap;
 	export let id: string;
@@ -31,42 +32,38 @@
 	}
 </script>
 
-<div class="delete" class:delete--confirm-deletion={$shouldConfirmDeletion}>
+<div class="delete-button" class:delete--confirm-deletion={$shouldConfirmDeletion}>
 	{#if $shouldConfirmDeletion}
-		<button class="delete__confirm" on:click={deleteRecord} title="Confirm deletion">
+		<Button variant="icon" class="delete-button__confirm" on:click={deleteRecord} title="Confirm deletion">
 			<Check class="h-4 w-4" />
-		</button>
-		<button class="delete__cancel" on:click={() => updateConfirmDeletion(false)} title="Dismiss">
+		</Button>
+
+		<Button
+			variant="icon"
+			class="delete__cancel"
+			on:click={() => updateConfirmDeletion(false)}
+			title="Dismiss"
+		>
 			<X class="h-4 w-4" />
-		</button>
+		</Button>
 	{:else}
-		<button
+		<Button
+			variant="icon"
 			class="delete__trash"
 			on:click={() => updateConfirmDeletion(true)}
 			title="Delete {sitemap === Sitemap.KNOWLEDGE ? 'knowledge' : 'session'}"
 		>
 			<Trash2 class="h-4 w-4" />
-		</button>
+		</Button>
 	{/if}
 </div>
 
 <style lang="scss">
-	.delete {
-		@apply flex h-full flex-row text-muted;
-	}
-
-	.delete__cancel,
-	.delete__confirm,
-	.delete__trash {
-		@apply px-2 py-2;
+	.delete-button {
+		@apply flex h-full flex-row;
 	}
 
-	.delete__confirm {
+	.delete-button :global(.delete-button__confirm) {
 		@apply hover:text-negative;
 	}
-
-	.delete__trash,
-	.delete__cancel {
-		@apply hover:text-base;
-	}
 </style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -26,7 +26,7 @@
 	}
 
 	.header__nav {
-		@apply flex flex-row items-center gap-x-2 pr-4 pb-4;
+		@apply flex flex-row items-center pr-4 pb-4;
 		@apply lg:pr-6 lg:pb-6;
 	}
 </style>
diff --git a/src/routes/knowledge/[id]/+page.svelte b/src/routes/knowledge/[id]/+page.svelte
@@ -41,7 +41,7 @@
 	<Header confirmDeletion={$shouldConfirmDeletion}>
 		<p data-testid="knowledge-id" class="text-sm font-bold leading-none">
 			Knowledge
-			<Button size="link" variant="link" href={`/knowledge/${knowledge.id}`}>
+			<Button variant="link" href={`/knowledge/${knowledge.id}`}>
 				#{knowledge.id}
 			</Button>
 		</p>

diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte
@@ -3,13 +3,6 @@
 	import { writable } from 'svelte/store';
 	import { Brain, StopCircle, UnfoldVertical } from 'lucide-svelte';
 
-	import Button from '$lib/components/Button.svelte';
-	import Article from './Article.svelte';
-	import FieldSelectModel from '$lib/components/FieldSelectModel.svelte';
-	import EmptyMessage from '$lib/components/EmptyMessage.svelte';
-	import FieldSelect from '$lib/components/FieldSelect.svelte';
-	import Header from '$lib/components/Header.svelte';
-
 	import { loadKnowledge, type Knowledge } from '$lib/knowledge';
 	import { settingsStore, knowledgeStore } from '$lib/store';
 	import { ollamaGenerate, type OllamaCompletionResponse } from '$lib/ollama';
@@ -22,13 +15,19 @@
 	} from '$lib/sessions';
 	import { generateNewUrl } from '$lib/components/ButtonNew';
 	import { Sitemap } from '$lib/sitemap';
-
 	import type { PageData } from './$types';
+
+	import Button from '$lib/components/Button.svelte';
+	import Article from './Article.svelte';
+	import FieldSelectModel from '$lib/components/FieldSelectModel.svelte';
+	import EmptyMessage from '$lib/components/EmptyMessage.svelte';
+	import FieldSelect from '$lib/components/FieldSelect.svelte';
+	import Header from '$lib/components/Header.svelte';
 	import FieldTextEditor from '$lib/components/FieldTextEditor.svelte';
 	import ButtonSubmit from '$lib/components/ButtonSubmit.svelte';
 	import Fieldset from '$lib/components/Fieldset.svelte';
 	import Field from '$lib/components/Field.svelte';
-	import CopyButton from './CopyButton.svelte';
+	import ButtonCopy from '$lib/components/ButtonCopy.svelte';
 	import ButtonDelete from '$lib/components/ButtonDelete.svelte';
 	import Metadata from '$lib/components/Metadata.svelte';
 
@@ -177,17 +176,17 @@
 <div class="session">
 	<Header confirmDeletion={$shouldConfirmDeletion}>
 		<p data-testid="session-id" class="text-sm font-bold leading-none">
-			Session <Button size="link" variant="link" href={`/sessions/${session.id}`}
-				>#{session.id}</Button
-			>
+			Session <Button variant="link" href={`/sessions/${session.id}`}>#{session.id}</Button>
 		</p>
 		<Metadata dataTestid="session-metadata">
 			{isNewSession ? 'New session' : formatSessionMetadata(session)}
 		</Metadata>
 
 		<svelte:fragment slot="nav">
 			{#if !isNewSession}
-				<CopyButton content={JSON.stringify(session.messages, null, 2)} />
+				{#if !$shouldConfirmDeletion}
+					<ButtonCopy content={JSON.stringify(session.messages, null, 2)} />
+				{/if}
 				<ButtonDelete sitemap={Sitemap.SESSIONS} id={session.id} {shouldConfirmDeletion} />
 			{/if}
 		</svelte:fragment>
@@ -235,7 +234,6 @@
 									<Button
 										aria-label="New knowledge"
 										variant="outline"
-										size="icon"
 										href={generateNewUrl(Sitemap.KNOWLEDGE)}
 									>
 										<Brain class="h-4 w-4" />
@@ -271,7 +269,6 @@
 									<Button
 										title="Stop response"
 										variant="outline"
-										size="icon"
 										on:click={() => {
 											abortController.abort();
 											resetPrompt();
@@ -340,5 +337,6 @@
 	.prompt-editor__textarea {
 		@include base-input;
 		@apply min-h-16;
+		@apply md:min-h-20;
 	}
 </style>
diff --git a/src/routes/sessions/[id]/Article.svelte b/src/routes/sessions/[id]/Article.svelte
@@ -5,10 +5,10 @@
 	import 'highlight.js/styles/github.css';
 
 	import { type Message } from '$lib/sessions';
-	import CopyButton from './CopyButton.svelte';
 	import { generateNewUrl } from '$lib/components/ButtonNew';
 	import { Sitemap } from '$lib/sitemap';
 	import Button from '$lib/components/Button.svelte';
+	import ButtonCopy from '$lib/components/ButtonCopy.svelte';
 	import Badge from '$lib/components/Badge.svelte';
 
 	export let message: Message;
@@ -42,7 +42,7 @@
 		preElements.forEach((preElement) => {
 			const codeElement = preElement.querySelector('code');
 			if (codeElement)
-				new CopyButton({ target: preElement, props: { content: codeElement.innerText } });
+				new ButtonCopy({ target: preElement, props: { content: codeElement.innerText } });
 		});
 	});
 </script>
@@ -61,7 +61,7 @@
 			</Badge>
 		</div>
 		<div class="article__interactive">
-			<CopyButton content={message.content} />
+			<ButtonCopy content={message.content} />
 		</div>
 	</nav>
 
@@ -83,13 +83,12 @@
 <style lang="scss">
 	.article {
 		@apply mx-auto mb-2 flex w-full max-w-[80ch] flex-col rounded-md border border-shade-3;
-		@apply hover:border-shade-6;
 		@apply last:mb-0;
 		@apply lg:mb-6;
 	}
 
 	.article--ai {
-		@apply bg-shade-0;
+		@apply bg-shade-0 border-transparent;
 	}
 
 	.article__interactive {
@@ -126,15 +125,11 @@
 		}
 
 		:global(pre) {
-			@apply relative border border-transparent hover:border-shade-2 rounded-md;
-		}
-
-		:global(pre:hover > .copy-button) {
-			@apply bg-shade-0;
+			@apply relative border border-shade-2 dark:border-none rounded-md overflow-auto;
 		}
 
 		:global(pre > .copy-button) {
-			@apply absolute right-0 top-0 rounded-tr-md rounded-bl-md;
+			@apply absolute right-1 top-2 rounded-tr-md rounded-bl-md bg-shade-0;
 		}
 
 		:global(code) {

diff --git a/src/routes/sessions/[id]/CopyButton.svelte b/src/routes/sessions/[id]/CopyButton.svelte
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -89,7 +89,6 @@
 							<code class="code">OLLAMA_ORIGINS</code>,
 							<Button
 								variant="link"
-								size="link"
 								href="https://github.com/jmorganca/ollama/blob/main/docs/faq.md#how-can-i-allow-additional-web-origins-to-access-ollama"
 								target="_blank"
 							>
@@ -143,7 +142,6 @@
 				<strong>Hollama</strong> is a minimalistic web interface for
 				<Button
 					variant="link"
-					size="link"
 					href="https://github.com/jmorganca/ollama/"
 					target="_blank"
 				>
@@ -152,7 +150,6 @@
 				servers. Code is available on
 				<Button
 					variant="link"
-					size="link"
 					href="https://github.com/fmaclen/hollama"
 					target="_blank"
 				>
@@ -161,7 +158,7 @@
 			</p>
 			<p class="p">
 				Made by
-				<Button variant="link" size="link" href="https://fernando.is" target="_blank">
+				<Button variant="link" href="https://fernando.is" target="_blank">
 					@fmaclen
 				</Button>
 			</p>

diff --git a/tests/docs.test.ts-snapshots/session.png b/tests/docs.test.ts-snapshots/session.png