From d5fd7a763a9f646629809424cff8e97de742a848 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 9 Jun 2026 20:51:05 +0000
Subject: [PATCH] Fix browser label visibility and simplify non-Chrome icons

Changes browser name text to white for readability on dark background,
replaces unrecognizable Edge/Brave/Opera SVG icons with simple colored
dots using their brand colors.

https://claude.ai/code/session_01KiLQV7aCKJ2w8nzhxuzTKR
---
 components/AnimatedHero.tsx | 41 +++++++++++++------------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/components/AnimatedHero.tsx b/components/AnimatedHero.tsx
index 33efe88..725a07a 100644
--- a/components/AnimatedHero.tsx
+++ b/components/AnimatedHero.tsx
@@ -14,25 +14,9 @@ const ChromeIcon = () => (
   </svg>
 )
 
-const EdgeIcon = () => (
-  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
-    <circle cx="10" cy="10" r="10" fill="#0078D4"/>
-    <path d="M5,11 C5,8 7.5,5.5 10.5,5.5 C11.5,5.5 12.5,5.8 13.3,6.5 C12.5,6.2 11.7,6 11,6 C8.8,6 7,7.8 7,10 C7,10.6 7.1,11.2 7.4,11.7 L14.5,11.7 C14.2,13.3 12.5,15 10.5,15 C7.5,15 5,13 5,11 Z" fill="white"/>
-  </svg>
-)
-
-const BraveIcon = () => (
-  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
-    <path d="M10,1.5 L17,4.5 L17.5,10.5 C17.5,14.5 14,17.5 10,18.5 C6,17.5 2.5,14.5 2.5,10.5 L3,4.5 Z" fill="#FB542B"/>
-    <path d="M10,5 L13.5,7.5 L13,11 C13,12 11.5,13.5 10,14 C8.5,13.5 7,12 7,11 L6.5,7.5 Z" fill="white"/>
-    <circle cx="10" cy="10" r="1.8" fill="#FB542B"/>
-  </svg>
-)
-
-const OperaIcon = () => (
-  <svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true">
-    <circle cx="10" cy="10" r="10" fill="#FF1B2D"/>
-    <ellipse cx="10" cy="10" rx="4.5" ry="7.5" fill="none" stroke="white" strokeWidth="2"/>
+const DotIcon = ({ color }: { color: string }) => (
+  <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true">
+    <circle cx="5" cy="5" r="5" fill={color}/>
   </svg>
 )
 
@@ -193,16 +177,19 @@ export default function AnimatedHero() {
               initial="hidden"
               animate="show"
             >
-              <span className="text-[0.75rem] text-gray-brand-500">{tx.browsersLabel}:</span>
+              <span className="text-[0.75rem] text-white/60">{tx.browsersLabel}:</span>
+              <div className="flex items-center gap-1">
+                <ChromeIcon />
+                <span className="text-[0.72rem] text-white">Chrome</span>
+              </div>
               {([
-                { Icon: ChromeIcon, name: 'Chrome' },
-                { Icon: EdgeIcon, name: 'Edge' },
-                { Icon: BraveIcon, name: 'Brave' },
-                { Icon: OperaIcon, name: 'Opera' },
-              ] as const).map(({ Icon, name }) => (
+                { color: '#0078D4', name: 'Edge' },
+                { color: '#FB542B', name: 'Brave' },
+                { color: '#FF1B2D', name: 'Opera' },
+              ]).map(({ color, name }) => (
                 <div key={name} className="flex items-center gap-1">
-                  <Icon />
-                  <span className="text-[0.72rem] text-gray-brand-400">{name}</span>
+                  <DotIcon color={color} />
+                  <span className="text-[0.72rem] text-white">{name}</span>
                 </div>
               ))}
             </motion.div>