Fix tab styling in page and explore components

Author: thebkht

app/(Main)/[username]/page.tsx

@@ -112,13 +112,13 @@ export default async function Page({ params, searchParams }: {
           {sessionUserName?.id === user?.id ? (
             <Tabs className="w-full" defaultValue={tab || "posts"}>
               <TabsList className="bg-background w-full py-4 justify-start h-fit rounded-none gap-2 sticky top-[90px] z-10">
-                <TabsTrigger value="posts" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                <TabsTrigger value="posts" className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]:shadow-sm data-[state=active]:text-secondary">
                   Posts
                 </TabsTrigger>
-                <TabsTrigger value="bookmarks" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                <TabsTrigger value="bookmarks" className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]shadow-sm data-[state=active]:text-secondary">
                   Bookmarks
                 </TabsTrigger>
-                <TabsTrigger value="reading-history" className="bg-muted data-[state=active]:border data-[state=active]:border-foreground">
+                <TabsTrigger value="reading-history" className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]:shadow-sm data-[state=active]:text-secondary">
                   Reading History
                 </TabsTrigger>
               </TabsList>

components/explore/tab.tsx

@@ -13,17 +13,17 @@ export default function ExploreTab({ activeTab = 'top', search }: { activeTab?:
           <>
                <Tabs defaultValue={tab} className="my-6 space-y-8">
                          <TabsList className="bg-transparent gap-2 justify-center w-full">
-                              <TabsTrigger value={'top'} className="bg-muted data-[state=active]:border data-[state=active]:border-foreground" asChild>
+                              <TabsTrigger value={'top'} className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]shadow-sm data-[state=active]:text-secondary" asChild>
                                    <Link href={`/explore${search !== undefined ? `?search=${search}` : ''}`}>
                                    Trending
                                    </Link>
                               </TabsTrigger>
-                              <TabsTrigger value={'posts'} className="bg-muted data-[state=active]:border data-[state=active]:border-foreground" asChild>
+                              <TabsTrigger value={'posts'} className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]shadow-sm data-[state=active]:text-secondary" asChild>
                                    <Link href={`/explore?tab=posts${search !== undefined ? `&search=${search}` : ''}`}>
                                    Posts
                                    </Link>
                               </TabsTrigger>
-                              <TabsTrigger value={'users'} className="bg-muted data-[state=active]:border data-[state=active]:border-foreground" asChild>
+                              <TabsTrigger value={'users'} className="bg-muted data-[state=active]:bg-secondary-foreground data-[state=active]shadow-sm data-[state=active]:text-secondary" asChild>
                                    <Link href={`/explore?tab=users${search !== undefined ? `&search=${search}` : ''}`}>
                                    Users
                                    </Link>

components/user/bookmark.tsx

@@ -38,9 +38,9 @@ export default function UserBookmarks({ posts: initialPosts, className, user, se
 
   return (
     <div className={className}>
-      <div className="user-articles w-full  lg:mb-6 md:mb-5 mb-4">
+      <div className="user-articles w-full lg:mb-6 md:mb-5 mb-4">
         {posts?.length > 0 ? (
-          <div className="flex flex-col">
+          <div className="flex flex-col lg:gap-6 md:gap-5 gap-4">
             {posts?.map((article: any) => (
               <>
                 <PostCard post={article.post} session={sessionUser} />