Messing with colors

src/app/[orgId]/components/Header.tsx

@@ -34,7 +34,7 @@ export default function Header({ email, orgName, name }: HeaderProps) {
         <>
             <div className="flex items-center justify-between">
                 <div className="flex items-center">
-                    <Badge variant="secondary" className="text-md font-bold">
+                    <Badge variant="default" className="text-md font-bold">
                         {orgName}
                     </Badge>
 
@@ -42,13 +42,13 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                         <div className="flex items-center gap-4 ml-4">
                             <Link
                                 href="/docs"
-                                className="text-stone-500 hover:text-stone-600"
+                                className="text-primary hover:text-primary"
                             >
                                 Documentation
                             </Link>
                             <Link
                                 href="/support"
-                                className="text-stone-500 hover:text-stone-600"
+                                className="text-primary hover:text-primary"
                             >
                                 Support
                             </Link>

src/app/[orgId]/components/TopbarNav.tsx

@@ -40,8 +40,8 @@ export function TopbarNav({
                     className={cn(
                         "px-2 py-3 text-md",
                         pathname.startsWith(item.href.replace("{orgId}", orgId))
-                            ? "border-b-2 border-stone-600 text-stone-600"
-                            : "hover:text-gray-600 text-stone-400",
+                            ? "border-b-2 border-base-600 text-base-600"
+                            : "hover:text-gray-600 text-base-400",
                         "whitespace-nowrap",
                         disabled && "cursor-not-allowed",
                     )}

src/app/[orgId]/layout.tsx

@@ -50,7 +50,7 @@ export default async function ConfigurationLaytout({
 
     return (
         <>
-            <div className="w-full bg-stone-200 border-b border-stone-300 mb-8 select-none sm:px-0 px-3">
+            <div className="w-full bg-secondary border-b border-secondary mb-8 select-none sm:px-0 px-3">
                 <div className="container mx-auto flex flex-col content-between gap-4 pt-2">
                     <Header email={user.email} orgName={params.orgId} />
                     <TopbarNav items={topNavItems} orgId={params.orgId} />