paulvall.dev
forked from
tangled.org/core
Monorepo for Tangled
web/ui/{profile,shell}: proper button styles & visual tweaks
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 23, 2026, 6:48 PM +0300)
commit
655fa31d
655fa31d051a777be64e206e6ff13d210d90969c
parent
96ae5675
96ae56750724848f0c87df8735569e5cd8f4b4b1
change-id
zkuwmoyq
zkuwmoyqswksmzuxpmvrmqlvvzqtnlwp
+23
-19
+3
-4
web/src/lib/components/profile/FollowButton.svelte
+3
-4
web/src/lib/components/profile/FollowButton.svelte
···
12
12
interface Props {
13
13
profileDid: string;
14
14
initialRkey?: string | null;
15
-
size?: "sm" | "md";
16
15
onCommit?: (change: FollowChange) => void;
17
16
}
18
17
19
-
let { profileDid, initialRkey, size = "sm", onCommit }: Props = $props();
18
+
let { profileDid, initialRkey, onCommit }: Props = $props();
20
19
21
20
const auth = getAuth();
22
21
const profileCounts = getProfileCounts();
···
73
72
74
73
{#if !isSelf}
75
74
{#if !signedIn}
76
-
<Button href={resolve("/login")} variant="default" {size} class="w-full gap-2">
75
+
<Button href={resolve("/login")} variant="default" class="w-full gap-2" insetShadow={true}>
77
76
<UserRoundPlus class="size-4" aria-hidden="true" /><span>Follow</span>
78
77
</Button>
79
78
{:else}
80
79
<div class="w-full">
81
80
<Button
82
81
variant="default"
83
-
{size}
84
82
class="w-full gap-2"
83
+
insetShadow={true}
85
84
loading={busy}
86
85
disabled={!relation.known}
87
86
onclick={toggle}
+1
-1
web/src/lib/components/profile/ProfileCard.svelte
+1
-1
web/src/lib/components/profile/ProfileCard.svelte
+18
-13
web/src/lib/components/shell/Topbar.svelte
+18
-13
web/src/lib/components/shell/Topbar.svelte
···
36
36
const appPath = (path: string) => resolve(path as "/");
37
37
</script>
38
38
39
+
{#snippet divider(classes = "")}
40
+
<div
41
+
class={["hidden h-6 w-px rounded-md bg-background-inset self-center md:block", classes]}
42
+
></div>
43
+
{/snippet}
44
+
39
45
<nav
40
-
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)]"
46
+
class={`h-11 w-full px-5 \
47
+
${variant === "marketing" ? "" : "bg-background-default border-b border-border-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"} \
48
+
`}
41
49
aria-label="main"
42
50
>
43
51
<div class="flex h-full items-center justify-between gap-4">
···
58
66
<div class={variant === "marketing" ? "flex items-center gap-3.5" : "flex items-center gap-4"}>
59
67
{#if variant === "marketing"}
60
68
<TopbarSearch />
61
-
<div class="hidden h-9 w-px rounded-md bg-background-inset md:block"></div>
62
-
<a
63
-
href={appPath("/login")}
64
-
class="px-3 text-sm text-foreground-default transition-colors hover:text-foreground-muted"
65
-
>
66
-
Login
67
-
</a>
69
+
70
+
{@render divider()}
71
+
72
+
<Button variant="ghost" href={resolve("/login")}>Login</Button>
73
+
68
74
<span class="text-sm text-foreground-muted">or</span>
69
-
<Button variant="primary" size="sm" href={resolve("/signup")} class="px-3">
75
+
76
+
<Button variant="primary" href={resolve("/signup")} insetShadow={true}>
70
77
<span>Join now</span>
71
-
<ArrowRight class="size-3.5" aria-hidden="true" />
78
+
<ArrowRight class="size-3" aria-hidden="true" />
72
79
</Button>
73
80
{:else}
74
81
{#if user || loading}
···
103
110
</a>
104
111
</div>
105
112
106
-
<div
107
-
class="hidden h-9 w-px self-center rounded-md bg-background-inset md:order-2 md:block"
108
-
></div>
113
+
{@render divider("md:order-2")}
109
114
{/if}
110
115
111
116
<div class="order-4 flex items-center md:order-5">