Refactor Tabs components for improved styling

- Update TabsList.vue to adjust height and border radius for a more modern look
- Modify TabsTrigger.vue to enhance padding, font size, and line height for better readability and user experience

app/components/ui/tabs/TabsList.vue

@@ -19,15 +19,11 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TabsList
+  <TabsList v-bind="forwarded" :class="cn(
-    v-bind="forwarded"
+    'inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-1.5 text-white/70',
-    :class="
+    props.class
-      cn(
+  )
-        'inline-flex h-12 items-center justify-center rounded-xl bg-white/5 p-1.5 text-white/70',
+    ">
-        props.class
-      )
-    "
-  >
     <slot />
   </TabsList>
 </template>

app/components/ui/tabs/TabsTrigger.vue

@@ -19,15 +19,10 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TabsTrigger
+  <TabsTrigger v-bind="forwarded" :class="cn(
-    v-bind="forwarded"
+    'inline-flex items-center justify-center whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md leading-[1.7em]',
-    :class="
+    props.class
-      cn(
+  )">
-        'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-base font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
-        props.class
-      )
-    "
-  >
     <slot />
   </TabsTrigger>
 </template>