From b6af22855ef3ed16db1d38ccba25a8d37e1bc1be Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 12 Jun 2026 12:38:20 +0000
Subject: [PATCH] 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>
---
 appview/pages/templates/timeline/fragments/announcements.html | 22 ++++++++++++----------
 1 file(s) changed, 12 insertion(s)(+), 10 deletion(s)(-)

diff --git a/appview/pages/templates/timeline/fragments/announcements.html b/appview/pages/templates/timeline/fragments/announcements.html
--- a/appview/pages/templates/timeline/fragments/announcements.html
+++ b/appview/pages/templates/timeline/fragments/announcements.html
@@ -1,5 +1,5 @@
 {{ define "timeline/fragments/announcements" }}
-  <div class="border border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
+  <div class="border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
     <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">
       {{ i "megaphone" "size-4 flex-shrink-0" }}
       Announcements
@@ -26,21 +26,20 @@ </div>
 {{ end }}
 
 {{ define "vouchAnnouncement" }}
-<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">
-  <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>
+<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">
   <div class="relative z-10">
-    <p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-1">Build a web of trust</p>
-    <p class="text-indigo-700 dark:text-indigo-400">
+    <p class="font-semibold text-indigo-800 dark:text-indigo-100 mb-1">Build a web of trust</p>
+    <p class="text-indigo-700 dark:text-indigo-300">
     Vouch for trustworthy users that make open-source a better place. Visit a user's
     profile to vouch for them.
     </p>
 
     <div class="mt-3 flex items-center justify-between">
-      <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">
+      <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">
         Read more
       </a>
       {{ if and .LoggedInUser .VouchSuggestions }}
-      <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">
+      <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">
         View suggestions {{ i "arrow-right" "size-3.5" }}
       </a>
       {{ end }}
@@ -48,8 +47,11 @@ </div>
 
   </div>
 
-  <div class="pointer-events-none absolute -bottom-8 -right-16 text-indigo-200 dark:text-indigo-700 opacity-60">
-    {{ i "shield-plus" "size-48" }}
-  </div>
+  <div class="pointer-events-none absolute -bottom-8 -right-16 size-48 
+    [--shield-gradient-from:theme(colors.indigo.100)] dark:[--shield-gradient-from:theme(colors.indigo.800)]
+    [--shield-gradient-to:theme(colors.indigo.200)] dark:[--shield-gradient-to:theme(colors.indigo.900)]"
+       style="background: linear-gradient(to bottom, var(--shield-gradient-from), var(--shield-gradient-to));
+              -webkit-mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;
+              mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;"></div>
 </div>
 {{ end }}

--
tangled.sh