Adding design/copy/feedback updates

tnylea · tnylea · commit cbd66dc9d6b1 · 2025-01-16T13:15:10.000-05:00
diff --git a/bootstrap/ssr/ssr-manifest.json b/bootstrap/ssr/ssr-manifest.json
@@ -1,15 +1,17 @@
 {
     "resources/js/components/app-header.tsx": [],
+    "resources/js/components/app-shell.tsx": [],
     "resources/js/components/app-sidebar.tsx": [],
     "resources/js/components/appearance-tabs.tsx": [],
     "resources/js/components/application-logo.tsx": [],
+    "resources/js/components/delete-user.tsx": [],
+    "resources/js/components/heading-small.tsx": [],
     "resources/js/components/heading.tsx": [],
     "resources/js/components/input-error.tsx": [],
     "resources/js/components/nav-footer.tsx": [],
     "resources/js/components/nav-main.tsx": [],
     "resources/js/components/nav-user.tsx": [],
-    "resources/js/components/settings/delete-user.tsx": [],
-    "resources/js/components/settings/heading.tsx": [],
+    "resources/js/components/text-link.tsx": [],
     "resources/js/components/ui/avatar.tsx": [],
     "resources/js/components/ui/breadcrumb.tsx": [],
     "resources/js/components/ui/button.tsx": [],
@@ -25,8 +27,9 @@
     "resources/js/hooks/use-appearance.tsx": [],
     "resources/js/hooks/use-mobile.tsx": [],
     "resources/js/layouts/app-layout.tsx": [],
-    "resources/js/layouts/auth/auth-base.tsx": [],
+    "resources/js/layouts/auth-layout.tsx": [],
     "resources/js/layouts/auth/auth-simple-layout.tsx": [],
+    "resources/js/layouts/settings/layout.tsx": [],
     "resources/js/lib/utils.ts": [],
     "resources/js/pages/auth/confirm-password.tsx": [],
     "resources/js/pages/auth/forgot-password.tsx": [],
@@ -36,7 +39,6 @@
     "resources/js/pages/auth/verify-email.tsx": [],
     "resources/js/pages/dashboard.tsx": [],
     "resources/js/pages/settings/appearance.tsx": [],
-    "resources/js/pages/settings/layout.tsx": [],
     "resources/js/pages/settings/password.tsx": [],
     "resources/js/pages/settings/profile.tsx": [],
     "resources/js/pages/welcome.tsx": [],
diff --git a/bootstrap/ssr/ssr.js b/bootstrap/ssr/ssr.js
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -30,7 +30,7 @@
         --chart-5: 27 87% 67%;
         --radius: 0.5rem;
         --sidebar-background: 0 0% 98%;
-        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-foreground: 240 5.3% 30%;
         --sidebar-primary: 0 0% 10%;
         --sidebar-primary-foreground: 0 0% 98%;
         --sidebar-accent: 0 0% 94%;
@@ -54,7 +54,7 @@
         --muted-foreground: 0 0% 63.9%;
         --accent: 0 0% 14.9%;
         --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
+        --destructive: 0 84% 60%;
         --destructive-foreground: 0 0% 98%;
         --border: 0 0% 14.9%;
         --input: 0 0% 14.9%;
@@ -65,8 +65,8 @@
         --chart-4: 280 65% 60%;
         --chart-5: 340 75% 55%;
         --sidebar-background: 0 0% 7%;
-        --sidebar-foreground: 0 0% 95.9%;
-        --sidebar-primary: 6, 72%, 55%;
+        --sidebar-foreground: 0 0% 80%;
+        --sidebar-primary: 360, 100%, 100%;
         --sidebar-primary-foreground: 0 0% 100%;
         --sidebar-accent: 0 0% 15.9%;
         --sidebar-accent-foreground: 240 4.8% 95.9%;
@@ -83,4 +83,4 @@
     body {
         @apply bg-background text-foreground;
     }
-}
+}
diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
@@ -5,7 +5,7 @@ import { Fragment } from 'react';
 
 export function AppHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
     return (
-        <header className="flex h-16 w-full shrink-0 items-center justify-between gap-2 border-b px-4">
+        <header className="flex h-16 shrink-0 items-center gap-2 px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
             <div className="flex items-center gap-2">
                 <SidebarTrigger className="-ml-1" />
                 {breadcrumbs.length > 0 && (
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
@@ -35,9 +35,9 @@ export function AppSidebar() {
                 <SidebarMenu>
                     <SidebarMenuItem>
                         <SidebarMenuButton size="lg" asChild>
-                            <Link href="/dashboard" className="flex items-center gap-3" prefetch>
+                            <Link href="/dashboard" prefetch>
                                 <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
-                                    <ApplicationLogo className="size-5 fill-current text-white" />
+                                    <ApplicationLogo className="size-5 fill-current text-white dark:text-black" />
                                 </div>
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                     <span className="truncate font-semibold">Laravel</span>
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
@@ -41,12 +41,12 @@ export default function DeleteUser() {
     };
 
     return (
-        <div>
-            <HeadingSmall title="Delete Account" description="Delete your account and all of its resources" />
-            <div className="flex items-center rounded-lg border border-red-100 bg-red-50 p-3 dark:border-red-950 dark:bg-red-500/20">
+        <div className="space-y-6">
+            <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+            <div className="flex items-center rounded-lg border border-red-100 bg-red-50 p-3 dark:border-red-950 dark:bg-red-700/10">
                 <Dialog>
                     <DialogTrigger asChild>
-                        <Button variant="destructive">Delete Account</Button>
+                        <Button variant="destructive">Delete account</Button>
                     </DialogTrigger>
                     <DialogContent>
                         <form className="space-y-6" onSubmit={deleteUser}>
@@ -83,7 +83,7 @@ export default function DeleteUser() {
                                 </DialogClose>
 
                                 <Button variant="destructive" disabled={processing} asChild>
-                                    <button type="submit">Delete Account</button>
+                                    <button type="submit">Delete account</button>
                                 </Button>
                             </DialogFooter>
                         </form>
diff --git a/resources/js/components/heading-small.tsx b/resources/js/components/heading-small.tsx
@@ -1,13 +1,8 @@
-import { Separator } from '@/components/ui/separator';
-
 export default function HeadingSmall({ title, description }: { title: string; description?: string }) {
     return (
-        <div>
-            <header>
-                <h3 className="mb-1 text-lg font-medium">{title}</h3>
-                {description && <p className="text-sm text-muted-foreground">{description}</p>}
-            </header>
-            <Separator className="my-6" />
-        </div>
+        <header>
+            <h3 class="mb-0.5 text-base font-medium">{title}</h3>
+            {description && <p className="text-xs text-muted-foreground">{description}</p>}
+        </header>
     );
 }
diff --git a/resources/js/components/heading.tsx b/resources/js/components/heading.tsx
@@ -4,8 +4,8 @@ export default function Heading({ title, description }: { title: string; descrip
     return (
         <>
             <div className="space-y-0.5">
-                <h2 className="text-lg font-bold tracking-tight sm:text-xl md:text-2xl">{title}</h2>
-                {description && <p className="text-sm text-muted-foreground md:text-base">{description}</p>}
+                <h2 className="text-base font-semibold tracking-tight sm:text-lg lg:text-xl">{title}</h2>
+                {description && <p className="text-xs text-muted-foreground md:text-sm">{description}</p>}
             </div>
             <Separator className="my-6" />
         </>
diff --git a/resources/js/components/nav-footer.tsx b/resources/js/components/nav-footer.tsx
@@ -1,6 +1,5 @@
-import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
-import { ExternalLink } from 'lucide-react';
 
 export function NavFooter({
     items,
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
@@ -1,8 +1,8 @@
 import { AppHeader } from '@/components/app-header';
 import { AppShell } from '@/components/app-shell';
 import { AppSidebar } from '@/components/app-sidebar';
-import { type BreadcrumbItem } from '@/types';
 import { SidebarInset } from '@/components/ui/sidebar';
+import { type BreadcrumbItem } from '@/types';
 
 export default function App({ children, breadcrumbs = [] }: { children: React.ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
     return (
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
@@ -28,7 +28,7 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
     const currentItem = sidebarNavItems.find((item) => currentPath === item.url);
 
     return (
-        <div className="p-5 sm:p-8 md:p-10">
+        <div className="border-t border-sidebar-border/70 p-5 lg:p-7">
             <Heading title="Settings" description="Manage your profile and account settings" />
 
             <div className="flex flex-col space-y-8 md:flex-row md:space-x-12 md:space-y-0">
@@ -40,7 +40,9 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
                                 size="sm"
                                 variant="ghost"
                                 asChild
-                                className={cn('w-full justify-start', currentPath === item.url ? 'bg-muted' : 'hover:underline')}
+                                className={cn('w-full justify-start', {
+                                    'bg-muted': currentPath === item.url,
+                                })}
                             >
                                 <Link href={item.url} prefetch>
                                     {item.title}
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
@@ -13,13 +13,49 @@ export default function Dashboard() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 pt-0">
                 <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
-                    <div className="aspect-video rounded-xl bg-muted/50" />
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <svg className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" fill="none">
+                            <defs>
+                                <pattern id="pattern-01" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                                </pattern>
+                            </defs>
+                            <rect stroke="none" fill="url(#pattern-01)" width="100%" height="100%"></rect>
+                        </svg>
+                    </div>
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <svg className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" fill="none">
+                            <defs>
+                                <pattern id="pattern-01" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                                </pattern>
+                            </defs>
+                            <rect stroke="none" fill="url(#pattern-01)" width="100%" height="100%"></rect>
+                        </svg>
+                    </div>
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <svg className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" fill="none">
+                            <defs>
+                                <pattern id="pattern-01" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                                </pattern>
+                            </defs>
+                            <rect stroke="none" fill="url(#pattern-01)" width="100%" height="100%"></rect>
+                        </svg>
+                    </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">
+                    <svg className="absolute inset-0 size-full stroke-gray-900/10 dark:stroke-neutral-100/10" fill="none">
+                        <defs>
+                            <pattern id="pattern-01" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                                <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                            </pattern>
+                        </defs>
+                        <rect stroke="none" fill="url(#pattern-01)" width="100%" height="100%"></rect>
+                    </svg>
                 </div>
-                <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
             </div>
         </AppLayout>
     );
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
@@ -2,31 +2,27 @@ import { Head } from '@inertiajs/react';
 
 import AppearanceTabs from '@/components/appearance-tabs';
 import HeadingSmall from '@/components/heading-small';
-import { Label } from '@/components/ui/label';
 import { type BreadcrumbItem } from '@/types';
 
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
-        title: 'Appearance Settings',
+        title: 'Appearance settings',
         href: '/settings/appearance',
     },
 ];
 
 export default function Appearance() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Appearance Settings" />
+            <Head title="Appearance settings" />
 
             <SettingsLayout>
-                <div>
-                    <HeadingSmall title="Appearance Settings" description="Update your account's appearance settings" />
-                    <div className="flex flex-col items-start gap-4">
-                        <Label>Appearance</Label>
-                        <AppearanceTabs />
-                    </div>
+                <div className="space-y-6">
+                    <HeadingSmall title="Appearance settings" description="Update your account's appearance settings" />
+                    <AppearanceTabs />
                 </div>
             </SettingsLayout>
         </AppLayout>
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
@@ -53,12 +53,12 @@ export default function Password({ className = '' }: { className?: string }) {
             <Head title="Profile Settings" />
 
             <SettingsLayout>
-                <div>
-                    <HeadingSmall title="Update Password" description="Ensure your account is using a long, random password to stay secure" />
+                <div className="space-y-6">
+                    <HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
 
                     <form onSubmit={updatePassword} className="space-y-6">
                         <div className="grid gap-2">
-                            <Label htmlFor="current_password">Current Password</Label>
+                            <Label htmlFor="current_password">Current password</Label>
 
                             <Input
                                 id="current_password"
@@ -74,7 +74,7 @@ export default function Password({ className = '' }: { className?: string }) {
                         </div>
 
                         <div className="grid gap-2">
-                            <Label htmlFor="password">New Password</Label>
+                            <Label htmlFor="password">New password</Label>
 
                             <Input
                                 id="password"
@@ -90,7 +90,7 @@ export default function Password({ className = '' }: { className?: string }) {
                         </div>
 
                         <div className="grid gap-2">
-                            <Label htmlFor="password_confirmation">Confirm Password</Label>
+                            <Label htmlFor="password_confirmation">Confirm password</Label>
 
                             <Input
                                 id="password_confirmation"
@@ -105,7 +105,7 @@ export default function Password({ className = '' }: { className?: string }) {
                         </div>
 
                         <div className="flex items-center gap-4">
-                            <Button disabled={processing}>Save</Button>
+                            <Button disabled={processing}>Save password</Button>
 
                             <Transition
                                 show={recentlySuccessful}
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
@@ -38,7 +38,7 @@ export default function Profile({ mustVerifyEmail, status, className = '' }: { m
             <Head title="Profile Settings" />
 
             <SettingsLayout>
-                <div>
+                <div className="space-y-6">
                     <HeadingSmall title="Profile Information" description="Update your name and email address" />
 
                     <form onSubmit={submit} className="space-y-6">
