fix(style): apply variant 'destructive' to sign-out buttons (#236)

* style: apply variant 'destructive' to sign-out buttons

* chore: apply Prettier formatting to destructive sign-out button

src/components/layout/nav-user.tsx

@@ -106,7 +106,10 @@ export function NavUser({ user }: NavUserProps) {
                 </DropdownMenuItem>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={() => setOpen(true)}>
+              <DropdownMenuItem
+                variant='destructive'
+                onClick={() => setOpen(true)}
+              >
                 <LogOut />
                 Sign out
               </DropdownMenuItem>

src/components/profile-dropdown.tsx

@@ -60,9 +60,11 @@ export function ProfileDropdown() {
             <DropdownMenuItem>New Team</DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => setOpen(true)}>
+          <DropdownMenuItem variant='destructive' onClick={() => setOpen(true)}>
             Sign out
-            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            <DropdownMenuShortcut className='text-current'>
+              ⇧⌘Q
+            </DropdownMenuShortcut>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

src/components/sign-out-dialog.tsx

@@ -30,6 +30,7 @@ export function SignOutDialog({ open, onOpenChange }: SignOutDialogProps) {
       title='Sign out'
       desc='Are you sure you want to sign out? You will need to sign in again to access your account.'
       confirmText='Sign out'
+      destructive
       handleConfirm={handleSignOut}
       className='sm:max-w-sm'
     />