Adding updated styles to delete section

Author: tnylea

resources/js/components/NavMain.vue

@@ -8,15 +8,11 @@ import {
     SidebarMenuButton,
 } from '@/components/ui/sidebar';
 
-interface Props {
+const props = defineProps<{
     items?: NavItemType[];
-}
+}>();
 
 const page = usePage();
-
-withDefaults(defineProps<Props>(), {
-    items: () => [],
-});
 </script>
 
 <template>

resources/js/components/settings/DeleteUser.vue

@@ -48,48 +48,54 @@ const closeModal = () => {
       title="Delete Account"
       description="Delete your account and all of its resources"
     />
-    <Dialog>
-      <DialogTrigger as-child>
-        <Button variant="destructive">Delete Account</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <form class="space-y-6" @submit="deleteUser">
-          <DialogHeader class="space-y-3">
-            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
-            <DialogDescription>
-              Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
-            </DialogDescription>
-          </DialogHeader>
-          <div class="grid gap-2">
-            <Label for="password" class="sr-only">Password</Label>
+    <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">
+      <Dialog>
+        <DialogTrigger as-child>
+          <Button variant="destructive">Delete Account</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <form class="space-y-6" @submit="deleteUser">
+            <DialogHeader class="space-y-3">
+              <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+              <DialogDescription>
+                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
+              </DialogDescription>
+            </DialogHeader>
+            <div class="grid gap-2">
+              <Label for="password" class="sr-only">Password</Label>
 
-            <Input
-              id="password"
-              type="password"
-              name="password"
-              ref="passwordInput"
-              v-model="form.password"
-              placeholder="Password"
-            />
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                ref="passwordInput"
+                v-model="form.password"
+                placeholder="Password"
+              />
 
-            <InputError :message="form.errors.password" />
-          </div>
-          
-          <DialogFooter>
-            <DialogClose as-child>
-              <Button variant="secondary" @click="closeModal">
-                Cancel
-              </Button>
-            </DialogClose>
+              <InputError :message="form.errors.password" />
+            </div>
+            
+            <DialogFooter>
+              <DialogClose as-child>
+                <Button variant="secondary" @click="closeModal">
+                  Cancel
+                </Button>
+              </DialogClose>
 
-            <Button variant="destructive" :disabled="form.processing">
-              <button type="submit">
-                Delete Account
-              </button>
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              <Button variant="destructive" :disabled="form.processing">
+                <button type="submit">
+                  Delete Account
+                </button>
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <div className="relative text-red-600 dark:text-red-100 ml-3">
+          <p className="font-medium leading-none mb-1 text-sm">Warning</p>
+          <p className="leading-none text-xs">Please proceed with caution, this cannot be undone</p>
+      </div>
+    </div>
   </div>
 </template>

resources/js/layouts/AppLayout.vue

@@ -30,11 +30,17 @@ const props = withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 
-const isOpen = ref(localStorage.getItem('sidebar') === 'true');
+const isOpen = ref(
+    typeof window !== 'undefined' 
+        ? localStorage.getItem('sidebar') !== 'false'
+        : true
+);
 
 const handleSidebarChange = (open: boolean) => {
     isOpen.value = open;
-    localStorage.setItem('sidebar', String(open));
+    if (typeof window !== 'undefined') {
+        localStorage.setItem('sidebar', String(open));
+    }
 };
 </script>
 

resources/js/pages/settings/Layout.vue

@@ -42,12 +42,12 @@ const currentItem = sidebarNavItems.find(item => currentPath === item.href)
                     <Button 
                         v-for="item in sidebarNavItems"
                         :key="item.href"
-                        size="sm" 
                         variant="ghost" 
                         :class="[
                             'w-full justify-center justify-start',
                             currentPath === item.href ? 'bg-muted' : 'hover:underline'
                         ]"
+                        as-child
                     > 
                         <Link :href="item.href">
                             {{ item.title }}