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

@@ -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)}

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)`,

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;