making copy and structure updates

Author: tnylea

resources/css/app.css

@@ -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%;
@@ -66,7 +66,7 @@
         --chart-5: 340 75% 55%;
         --sidebar-background: 0 0% 7%;
         --sidebar-foreground: 0 0% 95.9%;
-        --sidebar-primary: 6, 72%, 55%;
+        --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;
     }
-}
+}

resources/js/components/AppHeader.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
-import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
 
@@ -14,7 +13,9 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <header class="flex h-16 w-full shrink-0 items-center justify-between gap-2 border-b px-4">
+    <header
+        class="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 class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
             <template v-if="breadcrumbs.length > 0">

resources/js/components/AppSidebar.vue

@@ -56,11 +56,11 @@ const handleSidebarChange = (open: boolean) => {
                 <SidebarMenu>
                     <SidebarMenuItem>
                         <SidebarMenuButton size="lg" as-child>
-                            <a href="#" class="flex items-center gap-3">
+                            <a href="#">
                                 <div
                                     class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
                                 >
-                                    <ApplicationLogo class="size-5 fill-current text-white" />
+                                    <ApplicationLogo class="size-5 fill-current text-white dark:text-black" />
                                 </div>
                                 <div class="grid flex-1 text-left text-sm leading-tight">
                                     <span class="truncate font-semibold">Laravel</span>

resources/js/components/DeleteUser.vue

@@ -42,12 +42,12 @@ const closeModal = () => {
 </script>
 
 <template>
-    <div>
-        <HeadingSmall title="Delete Account" description="Delete your account and all of its resources" />
-        <div className="border border-red-100 dark:border-red-950 p-3 rounded-lg flex items-center bg-red-50 dark:bg-red-500/20">
+    <div class="space-y-6">
+        <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+        <div className="border border-red-100 dark:border-red-950 p-3 rounded-lg flex items-center bg-red-50 dark:bg-red-700/10">
             <Dialog>
                 <DialogTrigger as-child>
-                    <Button variant="destructive">Delete Account</Button>
+                    <Button variant="destructive">Delete account</Button>
                 </DialogTrigger>
                 <DialogContent>
                     <form class="space-y-6" @submit="deleteUser">
@@ -72,7 +72,7 @@ const closeModal = () => {
                             </DialogClose>
 
                             <Button variant="destructive" :disabled="form.processing">
-                                <button type="submit">Delete Account</button>
+                                <button type="submit">Delete account</button>
                             </Button>
                         </DialogFooter>
                     </form>

resources/js/components/Heading.vue

@@ -11,8 +11,8 @@ defineProps<Props>();
 
 <template>
     <div class="space-y-0.5">
-        <h2 class="text-lg font-bold tracking-tight sm:text-xl md:text-2xl">{{ title }}</h2>
-        <p v-if="description" class="text-sm text-muted-foreground md:text-base">
+        <h2 class="text-base font-semibold tracking-tight sm:text-lg lg:text-xl">{{ title }}</h2>
+        <p v-if="description" class="text-xs text-muted-foreground md:text-sm">
             {{ description }}
         </p>
     </div>

resources/js/components/HeadingSmall.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Separator } from '@/components/ui/separator';
-
 interface Props {
     title: string;
     description?: string;
@@ -10,13 +8,10 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div>
-        <header>
-            <h3 class="mb-1 text-lg font-medium">{{ title }}</h3>
-            <p v-if="description" class="text-sm text-muted-foreground">
-                {{ description }}
-            </p>
-        </header>
-        <Separator class="my-6" />
-    </div>
+    <header>
+        <h3 class="mb-0.5 text-base font-medium">{{ title }}</h3>
+        <p v-if="description" class="text-xs text-muted-foreground">
+            {{ description }}
+        </p>
+    </header>
 </template>

resources/js/components/InputError.vue

@@ -1,3 +1,4 @@
+5
 <script setup lang="ts">
 defineProps<{
     message?: string;
@@ -6,7 +7,7 @@ defineProps<{
 
 <template>
     <div v-show="message">
-        <p class="text-sm text-red-600 dark:text-red-400">
+        <p class="text-sm text-red-600 dark:text-red-500">
             {{ message }}
         </p>
     </div>

resources/js/components/NavFooter.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-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-vue-next';
 
 interface Props {
     items: NavItem[];

resources/js/components/NavMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 
@@ -11,7 +11,8 @@ const page = usePage<SharedData>();
 </script>
 
 <template>
-    <SidebarGroup>
+    <SidebarGroup class="px-2 py-0">
+        <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="item.url === page.url">

resources/js/layouts/settings/Layout.vue

@@ -25,7 +25,7 @@ const currentItem = sidebarNavItems.find((item) => currentPath === item.href);
 </script>
 
 <template>
-    <div class="p-5 sm:p-8 md:p-10">
+    <div class="border-t border-sidebar-border/70 p-5 lg:p-7">
         <Heading title="Settings" description="Manage your profile and account settings" />
 
         <div class="flex flex-col space-y-8 md:flex-row md:space-x-12 md:space-y-0">
@@ -35,7 +35,7 @@ const currentItem = sidebarNavItems.find((item) => currentPath === item.href);
                         v-for="item in sidebarNavItems"
                         :key="item.href"
                         variant="ghost"
-                        :class="['w-full justify-start', currentPath === item.href ? 'bg-muted' : 'hover:underline']"
+                        :class="['w-full justify-start', { 'bg-muted': currentPath === item.href }]"
                         as-child
                     >
                         <Link :href="item.href">