Monorepo for Tangled
tangled.org
appview/pages: rework vouch announcement design
Card felt flat — radial gradient added noise without depth.
Replaced with a clean linear gradient (dark mode inverted),
brighter text contrast, and a CSS-masked gradient shield icon.
Refs: [TAN-486](https://linear.app/tangled/issue/TAN-486)
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
Tangled
date
(Jun 12, 2026, 4:17 PM +0300)
commit
b6af2285
b6af22855ef3ed16db1d38ccba25a8d37e1bc1be
parent
ff6d47cf
ff6d47cfb9835701f017feeb66357b52e5f19f1b
+12
-10
+12
-10
appview/pages/templates/timeline/fragments/announcements.html
+12
-10
appview/pages/templates/timeline/fragments/announcements.html
···
1
1
{{ define "timeline/fragments/announcements" }}
2
-
<div class="border border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
2
+
<div class="border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
3
3
<h3 class="text-base dark:text-white hidden md:flex items-center gap-2 px-4 py-2 bg-white/50 dark:bg-gray-800/50">
4
4
{{ i "megaphone" "size-4 flex-shrink-0" }}
5
5
Announcements
···
26
26
{{ end }}
27
27
28
28
{{ define "vouchAnnouncement" }}
29
-
<div class="relative overflow-hidden bg-gradient-to-b from-white to-indigo-50 dark:from-indigo-950 dark:to-indigo-900 rounded-sm p-4">
30
-
<div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(165,180,252,0.35),transparent_70%)] dark:bg-[radial-gradient(ellipse_at_bottom_left,rgba(99,102,241,0.2),transparent_70%)]"></div>
29
+
<div class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-indigo-100 dark:from-indigo-900 dark:to-indigo-950 rounded-sm p-4">
31
30
<div class="relative z-10">
32
-
<p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-1">Build a web of trust</p>
33
-
<p class="text-indigo-700 dark:text-indigo-400">
31
+
<p class="font-semibold text-indigo-800 dark:text-indigo-100 mb-1">Build a web of trust</p>
32
+
<p class="text-indigo-700 dark:text-indigo-300">
34
33
Vouch for trustworthy users that make open-source a better place. Visit a user's
35
34
profile to vouch for them.
36
35
</p>
37
36
38
37
<div class="mt-3 flex items-center justify-between">
39
-
<a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="https://blog.tangled.org/vouching">
38
+
<a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-200 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="https://blog.tangled.org/vouching">
40
39
Read more
41
40
</a>
42
41
{{ if and .LoggedInUser .VouchSuggestions }}
43
-
<a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
42
+
<a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-200 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
44
43
View suggestions {{ i "arrow-right" "size-3.5" }}
45
44
</a>
46
45
{{ end }}
···
48
47
49
48
</div>
50
49
51
-
<div class="pointer-events-none absolute -bottom-8 -right-16 text-indigo-200 dark:text-indigo-700 opacity-60">
52
-
{{ i "shield-plus" "size-48" }}
53
-
</div>
50
+
<div class="pointer-events-none absolute -bottom-8 -right-16 size-48
51
+
[--shield-gradient-from:theme(colors.indigo.100)] dark:[--shield-gradient-from:theme(colors.indigo.800)]
52
+
[--shield-gradient-to:theme(colors.indigo.200)] dark:[--shield-gradient-to:theme(colors.indigo.900)]"
53
+
style="background: linear-gradient(to bottom, var(--shield-gradient-from), var(--shield-gradient-to));
54
+
-webkit-mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;
55
+
mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;"></div>
54
56
</div>
55
57
{{ end }}