Monorepo for Tangled tangled.org
2

Configure Feed

Select the types of activity you want to include in your feed.

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 parent ff6d47cf
+12 -10
+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 }}