refactor(Tabs): enhance TabList components with border and theme for consistency

Author: sanjaypinna

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/components/EditLayout.tsx

@@ -1,16 +1,11 @@
 'use client';
 
+import { ReactNode, useEffect, useState } from 'react';
+import { useParams, usePathname, useRouter } from 'next/navigation';
 import { graphql } from '@/gql';
 import { UpdateDatasetInput } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { useParams, usePathname, useRouter } from 'next/navigation';
-import {
-  Tab,
-  TabList,
-  Tabs,
-  toast
-} from 'opub-ui';
-import { ReactNode, useEffect, useState } from 'react';
+import { Tab, TabList, Tabs, toast } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import TitleBar from '../../../../components/title-bar';
@@ -227,9 +222,10 @@ const Navigation = ({
   return (
     <div>
       <Tabs value={selectedTab}>
-        <TabList fitted>
+        <TabList fitted border>
           {links.map((item, index) => (
             <Tab
+              theme="dataSpace"
               value={item.id}
               key={index}
               onClick={() => handleTabClick(item)}

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/components/navigate-org-datasets.tsx

@@ -18,9 +18,10 @@ export const Navigation = ({
   return (
     <div>
       <Tabs defaultValue="drafts">
-        <TabList fitted>
+        <TabList fitted border>
           {options.map((item, index) => (
             <Tab
+              theme="dataSpace"
               value={item.url}
               key={index}
               onClick={() => handleTabClick(item.url)}

app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/layout.tsx

@@ -116,9 +116,10 @@ const TabsAndChildren = ({ children }: { children: React.ReactNode }) => {
         setStatus={setStatus}
       />
       <Tabs defaultValue={initialTabLabel}>
-        <TabList fitted>
+        <TabList fitted border>
           {links.map((item, index) => (
             <Tab
+              theme="dataSpace"
               value={item.label}
               key={index}
               onClick={() => handleTabClick(item.url)}

app/[locale]/dashboard/components/dashboard-header.tsx

@@ -44,11 +44,12 @@ export function DashboardHeader({ currentPath }: { currentPath: string }) {
         </Text>
         <div>
           <Tabs defaultValue={initialTabLabel}>
-            <TabList fitted>
+            <TabList fitted border>
               {userDashboardOptions
                 .filter((item) => item !== null)
                 .map((item, index) => (
                   <Tab
+                    theme="dataSpace"
                     value={item.label}
                     key={index}
                     onClick={() => handleTabClick(item.url)}