Adding updates to dark styles in the header

Author: tnylea

resources/js/components/app-header.tsx

@@ -69,7 +69,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
     const getInitials = useInitials();
     return (
         <>
-        <div className="border-b border-gray-200 ">
+        <div className="border-b border-sidebar-border/80 ">
             <div className="flex h-16 items-center px-4  md:max-w-7xl mx-auto">
                 {/* Mobile Menu */}
                 <div className="lg:hidden">
@@ -129,7 +129,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                             {item.title}
                                         </NavigationMenuLink>
                                     </Link>
-                                    <div className="h-0.5 translate-y-px bg-black w-full absolute bottom-0 left-0"></div>
+                                    <div className="h-0.5 translate-y-px bg-black dark:bg-white w-full absolute bottom-0 left-0"></div>
                                 </NavigationMenuItem>
                             ))}
                         </NavigationMenuList>

resources/js/layouts/app-layout.tsx

@@ -1,4 +1,4 @@
-import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
+import AppLayoutTemplate from '@/layouts/app/app-header-layout';
 import { type BreadcrumbItem } from '@/types';
 
 interface AppLayoutProps {

resources/js/pages/dashboard.tsx

@@ -17,17 +17,17 @@ export default function Dashboard() {
             <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                 <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                     <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" />
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                     </div>
                     <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" />
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                     </div>
                     <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" />
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                     </div>
                 </div>
                 <div className="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 dark:border-sidebar-border md:min-h-min">
-                    <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" />
+                    <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                 </div>
             </div>
         </AppLayout>

resources/js/pages/settings/profile.tsx

@@ -23,7 +23,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-export default function Profile({ mustVerifyEmail, status, className = '' }: { mustVerifyEmail: boolean; status?: string; className?: string }) {
+export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string; }) {
     const { auth } = usePage<SharedData>().props;
 
     const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({