From 9a6e718ebcb46d9575be8cee6cb407865ec62d5a Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 15 Jul 2026 18:17:40 +0200
Subject: [PATCH] web/ui/{profile,shell}: proper button styles & visual tweaks

Signed-off-by: eti <eti@eti.tf>
---
 .../components/profile/FollowButton.svelte    |  7 ++---
 .../lib/components/profile/ProfileCard.svelte |  2 +-
 web/src/lib/components/shell/Topbar.svelte    | 31 +++++++++++--------
 .../lib/components/shell/TopbarSearch.svelte  |  2 +-
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index 4249503c..c9e44f39 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -12,11 +12,10 @@
 	interface Props {
 		profileDid: string;
 		initialRkey?: string | null;
-		size?: "sm" | "md";
 		onCommit?: (change: FollowChange) => void;
 	}
 
-	let { profileDid, initialRkey, size = "sm", onCommit }: Props = $props();
+	let { profileDid, initialRkey, onCommit }: Props = $props();
 
 	const auth = getAuth();
 	const profileCounts = getProfileCounts();
@@ -73,15 +72,15 @@
 
 {#if !isSelf}
 	{#if !signedIn}
-		<Button href={resolve("/login")} variant="default" {size} class="w-full gap-2">
+		<Button href={resolve("/login")} variant="default" class="w-full gap-2" insetShadow={true}>
 			<UserRoundPlus class="size-4" aria-hidden="true" /><span>Follow</span>
 		</Button>
 	{:else}
 		<div class="w-full">
 			<Button
 				variant="default"
-				{size}
 				class="w-full gap-2"
+				insetShadow={true}
 				loading={busy}
 				disabled={!relation.known}
 				onclick={toggle}
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index e3a6b5c2..7afb6501 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -145,7 +145,7 @@
 					<Button
 						href={`/${identity.handle}/feed.atom`}
 						variant="default"
-						class="px-3"
+						insetShadow={true}
 						aria-label="RSS feed"
 					>
 						<Rss class="size-4" aria-hidden="true" />
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index 4ed61e9e..6037bc32 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -36,8 +36,16 @@
 	const appPath = (path: string) => resolve(path as "/");
 </script>
 
+{#snippet divider(classes = "")}
+	<div
+		class={["hidden h-6 w-px rounded-md bg-background-inset self-center md:block", classes]}
+	></div>
+{/snippet}
+
 <nav
-	class="h-11 w-full border-b border-border-default bg-background-default px-5 shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"
+	class={`h-11 w-full px-5 \
+	        ${variant === "marketing" ? "" : "bg-background-default border-b border-border-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"} \
+	      `}
 	aria-label="main"
 >
 	<div class="flex h-full items-center justify-between gap-4">
@@ -58,17 +66,16 @@
 		<div class={variant === "marketing" ? "flex items-center gap-3.5" : "flex items-center gap-4"}>
 			{#if variant === "marketing"}
 				<TopbarSearch />
-				<div class="hidden h-9 w-px rounded-md bg-background-inset md:block"></div>
-				<a
-					href={appPath("/login")}
-					class="px-3 text-sm text-foreground-default transition-colors hover:text-foreground-muted"
-				>
-					Login
-				</a>
+
+				{@render divider()}
+
+				<Button variant="ghost" href={resolve("/login")}>Login</Button>
+
 				<span class="text-sm text-foreground-muted">or</span>
-				<Button variant="primary" size="sm" href={resolve("/signup")} class="px-3">
+
+				<Button variant="primary" href={resolve("/signup")} insetShadow={true}>
 					<span>Join now</span>
-					<ArrowRight class="size-3.5" aria-hidden="true" />
+					<ArrowRight class="size-3" aria-hidden="true" />
 				</Button>
 			{:else}
 				{#if user || loading}
@@ -103,9 +110,7 @@
 						</a>
 					</div>
 
-					<div
-						class="hidden h-9 w-px self-center rounded-md bg-background-inset md:order-2 md:block"
-					></div>
+					{@render divider("md:order-2")}
 				{/if}
 
 				<div class="order-4 flex items-center md:order-5">
diff --git a/web/src/lib/components/shell/TopbarSearch.svelte b/web/src/lib/components/shell/TopbarSearch.svelte
index 27f14d98..3904a555 100644
--- a/web/src/lib/components/shell/TopbarSearch.svelte
+++ b/web/src/lib/components/shell/TopbarSearch.svelte
@@ -20,6 +20,6 @@
 		type="search"
 		placeholder="Search"
 		iconLeft={Search}
-		class="h-8 w-80 gap-1.5 px-2 py-0"
+		class="w-80"
 	/>
 </form>
-- 
2.51.2