Feat: Modify the segmented component style #3221 (#7409)

### What problem does this PR solve?

Feat: Modify the segmented component style #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/segmented.tsx

@@ -34,7 +34,7 @@ export function Segmented({
   return (
     <div
       className={cn(
-        'flex items-center rounded-sm p-1 gap-2 bg-zinc-200',
+        'flex items-center rounded-3xl p-1 gap-2 bg-background-header-bar px-5 py-2.5',
         className,
       )}
     >
@@ -46,10 +46,10 @@ export function Segmented({
           <div
             key={actualValue}
             className={cn(
-              'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
+              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer text-text-badge',
               {
-                'bg-colors-background-inverse-strong': value === actualValue,
-                'text-colors-text-inverse-strong': value === actualValue,
+                'bg-text-title': value === actualValue,
+                'text-text-title-invert': value === actualValue,
               },
             )}
             onClick={() => onChange?.(actualValue)}