style: unify header buttons (#615)

zeno-ml · Dec 30, 2023 · 3ba2be4 · 3ba2be4
1 parent c2a4d4b
commit 3ba2be4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/lib/components/general/Header.svelte b/frontend/src/lib/components/general/Header.svelte
@@ -5,7 +5,9 @@
 	import type { Project, Report, User, ZenoService } from '$lib/zenoapi';
 	import {
 		mdiCog,
+		mdiCompassOutline,
 		mdiFileChartOutline,
+		mdiHome,
 		mdiLinkVariant,
 		mdiPlus,
 		mdiViewGridOutline
@@ -127,12 +129,15 @@
 			<CircleIconButton icon={mdiCog} on:click={() => (editPopup = true)} positioning="mr-2" />
 		{/if}
 		{#if user && $page.route.id?.startsWith('/(app)/home')}
-			<Button
-				class="mr-3"
-				variant="outlined"
+			<button
+				class="mr-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-grey-light text-primary transition hover:bg-primary-mid"
 				on:click={() => (exploreTab ? goto('/') : goto('/home'))}
-				>{exploreTab ? 'My Hub' : 'Explore'}</Button
+				use:tooltip={{ text: exploreTab ? 'Home' : 'Explore' }}
 			>
+				<Icon tag="svg" viewBox="0 0 24 24" class="w-5 fill-primary">
+					<path d={exploreTab ? mdiHome : mdiCompassOutline} />
+				</Icon>
+			</button>
 		{/if}
 		<UserButton {user} />
 	</div>

diff --git a/frontend/src/lib/components/general/HelpButton.svelte b/frontend/src/lib/components/general/HelpButton.svelte
@@ -2,6 +2,7 @@
 	import { browser } from '$app/environment';
 	import { clickOutside } from '$lib/util/clickOutside';
 	import { tooltip } from '$lib/util/tooltip';
+	import { mdiHelp } from '@mdi/js';
 	import { Icon } from '@smui/icon-button';
 	import Paper, { Content } from '@smui/paper';
 	import { fade } from 'svelte/transition';
@@ -13,11 +14,13 @@
 
 <div class="relative mr-2">
 	<button
-		class="h-8 w-8 rounded-full border border-grey-light text-xl capitalize text-primary transition hover:bg-primary-dark"
+		class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-grey-light text-primary transition hover:bg-primary-mid"
 		use:tooltip={{ text: 'Help' }}
 		on:click={() => (showOptions = !showOptions)}
 	>
-		?
+		<Icon tag="svg" viewBox="0 0 24 24" class="w-5 fill-primary">
+			<path d={mdiHelp} />
+		</Icon>
 	</button>
 
 	{#if showOptions}