From 55173c7201ad38ff1d6e32e5c37a78f4dab0770e Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Wed, 20 Aug 2025 13:39:23 +0800
Subject: [PATCH] Fix (web): Update the style of segmented controls and add
 metallic texture gradients  (#9591)

### What problem does this PR solve?

Fix (web): Update the style of segmented controls and add metallic
texture gradients #3221
-Modified the selected state style of Segmented components, adding
metallic texture gradient and lower border
-Added a metallic gradient background image in tailwind.diag.js
-Added the -- metallic variable in tailwind.css to define metallic
texture colors

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/ui/segmented.tsx | 4 ++--
 web/tailwind.config.js              | 4 ++++
 web/tailwind.css                    | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ui/segmented.tsx b/web/src/components/ui/segmented.tsx
index cec2bb6df..e82bafc6d 100644
--- a/web/src/components/ui/segmented.tsx
+++ b/web/src/components/ui/segmented.tsx
@@ -57,8 +57,8 @@ export function Segmented({
             className={cn(
               'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
               {
-                'bg-text-primary': selectedValue === actualValue,
-                'text-bg-base': selectedValue === actualValue,
+                'text-bg-base bg-metallic-gradient border-b-[#00BEB4] border-b-2':
+                  selectedValue === actualValue,
               },
             )}
             onClick={() => handleOnChange(actualValue)}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index f0bf5cb30..82c4bf5b7 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -206,6 +206,10 @@ module.exports = {
           ring: 'hsl(var(--sidebar-ring))',
         },
       },
+      backgroundImage: {
+        'metallic-gradient':
+          'linear-gradient(104deg, var(--text-primary) 30%, var(--metallic) 50%, var(--text-primary) 70%)',
+      },
       borderRadius: {
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,
diff --git a/web/tailwind.css b/web/tailwind.css
index dbcf7ebc1..b8f49af73 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -90,6 +90,7 @@
 
     --input-border: rgba(22, 22, 24, 0.2);
 
+    --metallic: #46464a;
     /* design colors */
 
     --bg-base: #f6f6f7;
@@ -230,6 +231,7 @@
 
     --input-border: rgba(255, 255, 255, 0.2);
 
+    --metallic: #fafafa;
     /* design colors */
 
     --bg-base: #161618;