fix: fixed tab and added color

Author: 0xdevcollins

app/globals.css

@@ -5,6 +5,17 @@
 
 @theme {
   --font-inter: 'Inter', sans-serif;
+  --color-gray-50: #f7f7f7;
+  --color-gray-75: #f2f2f2;
+  --color-gray-100: #ececec;
+  --color-gray-200: #e6e6e6;
+  --color-gray-300: #dfdfdf;
+  --color-gray-400: #d9d9d9;
+  --color-gray-500: #b5b5b5;
+  --color-gray-600: #919191;
+  --color-gray-700: #787878;
+  --color-gray-800: #484848;
+  --color-gray-900: #2b2b2b;
 }
 /* Custom scrollbar styles for comment modal */
 .custom-scrollbar {

components/project-details/project-layout.tsx

@@ -60,37 +60,37 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
                 <div className='scrollbar-hide flex w-full overflow-x-auto px-4'>
                   <TabsTrigger
                     value='about'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     About
                   </TabsTrigger>
                   <TabsTrigger
                     value='details'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     Details
                   </TabsTrigger>
                   <TabsTrigger
                     value='team'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     Team
                   </TabsTrigger>
                   <TabsTrigger
                     value='milestones'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     Milestones
                   </TabsTrigger>
                   <TabsTrigger
                     value='voters'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     Voters
                   </TabsTrigger>
                   <TabsTrigger
                     value='comments'
-                    className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                    className='data-[state=active]:border-primary rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                   >
                     Comments
                   </TabsTrigger>
@@ -155,31 +155,31 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
               <TabsList className='mb-8 h-auto w-full justify-start rounded-none border-b border-gray-800 bg-transparent p-0'>
                 <TabsTrigger
                   value='details'
-                  className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                  className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                 >
                   Details
                 </TabsTrigger>
                 <TabsTrigger
                   value='team'
-                  className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                  className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                 >
                   Team
                 </TabsTrigger>
                 <TabsTrigger
                   value='milestones'
-                  className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                  className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                 >
                   Milestones
                 </TabsTrigger>
                 <TabsTrigger
                   value='voters'
-                  className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                  className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                 >
                   Voters
                 </TabsTrigger>
                 <TabsTrigger
                   value='comments'
-                  className='rounded-none bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:border-green-500 data-[state=active]:text-white'
+                  className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-6 py-4 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
                 >
                   Comments
                 </TabsTrigger>