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