refactor: improve component structure and styling

- Adjusted `AuthCard` to enhance readability by formatting the `CardContent` section.
- Simplified the `DividerWithText` component by removing unnecessary padding.
- Updated `MainMobileMenu` to improve layout consistency with adjusted padding and spacing.
- Replaced `Dialog` with `AlertDialog` in `DeleteAccountCard` for better user experience and consistency in alert handling.
- Enhanced error message display logic in `DeleteAccountCard` for improved clarity.

src/components/auth/auth-card.tsx

@@ -38,7 +38,9 @@ export const AuthCard = ({
         </LocaleLink>
         <CardDescription>{headerLabel}</CardDescription>
       </CardHeader>
-      <CardContent>{children}</CardContent>
+      <CardContent>
+        {children}
+      </CardContent>
       {showSocialLoginButton && (
         <CardFooter>
           <SocialLoginButton />

src/components/auth/divider-with-text.tsx

@@ -13,7 +13,7 @@ export const DividerWithText = ({
   className,
 }: DividerWithTextProps) => {
   return (
-    <div className={cn('relative flex items-center py-5', className)}>
+    <div className={cn('relative flex items-center', className)}>
       <div className="flex-grow border-t border-border"></div>
       <span className="flex-shrink mx-4 text-sm text-muted-foreground">
         {text}

src/components/layout/navbar-mobile.tsx

@@ -19,6 +19,7 @@ import { Portal } from '@radix-ui/react-portal';
 import {
   ArrowUpRightIcon,
   ChevronDownIcon,
+  ChevronRightIcon,
   ChevronUpIcon,
   MenuIcon,
   XIcon,
@@ -137,7 +138,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
       className="fixed w-full inset-0 z-50 mt-[72px] overflow-y-auto
       bg-background backdrop-blur-md animate-in fade-in-0"
     >
-      <div className="size-full flex flex-col items-start space-y-4 p-4">
+      <div className="size-full flex flex-col items-start space-y-4 px-4">
         {/* action buttons */}
         {userLoggedIn ? null : (
           <div className="w-full flex flex-col gap-4">
@@ -182,7 +183,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                   );
 
               return (
-                <li key={item.title} className="py-2">
+                <li key={item.title} className="py-1">
                   {item.items ? (
                     <Collapsible
                       open={expanded[item.title.toLowerCase()]}
@@ -207,9 +208,9 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                         >
                           <span className="text-base">{item.title}</span>
                           {expanded[item.title.toLowerCase()] ? (
-                            <ChevronUpIcon className="size-4" />
-                          ) : (
                             <ChevronDownIcon className="size-4" />
+                          ) : (
+                            <ChevronRightIcon className="size-4" />
                           )}
                         </Button>
                       </CollapsibleTrigger>
@@ -234,7 +235,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                                   }
                                   className={cn(
                                     buttonVariants({ variant: 'ghost' }),
-                                    'group h-auto w-full justify-start gap-4 p-2',
+                                    'group h-auto w-full justify-start gap-4 p-1',
                                     'bg-transparent text-muted-foreground',
                                     'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary',
                                     isSubItemActive &&

src/components/settings/account/delete-account-card.tsx

@@ -11,13 +11,13 @@ import {
   CardTitle
 } from '@/components/ui/card';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
 import { useTranslations } from 'next-intl';
@@ -46,8 +46,6 @@ export function DeleteAccountCard() {
 
   // Handle account deletion
   const handleDeleteAccount = async () => {
-    setIsDeleting(true);
-
     await authClient.deleteUser(
       {},
       {
@@ -57,6 +55,7 @@ export function DeleteAccountCard() {
         },
         onResponse: () => {
           setIsDeleting(false);
+          setShowConfirmation(false);
         },
         onSuccess: () => {
           toast.success(t('deleteAccount.success'));
@@ -88,9 +87,11 @@ export function DeleteAccountCard() {
           {t('deleteAccount.warning')}
         </p>
 
-        <div className="mt-4">
-          <FormError message={error} />
-        </div>
+        {error && (
+          <div className="mt-4">
+            <FormError message={error} />
+          </div>
+        )}
       </CardContent>
       <CardFooter className="px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         <Button
@@ -101,16 +102,18 @@ export function DeleteAccountCard() {
         </Button>
       </CardFooter>
 
-      {/* Confirmation Dialog */}
-      <Dialog open={showConfirmation} onOpenChange={setShowConfirmation}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle className="text-destructive">{t('deleteAccount.confirmTitle')}</DialogTitle>
-            <DialogDescription>
+      {/* Confirmation AlertDialog */}
+      <AlertDialog open={showConfirmation} onOpenChange={setShowConfirmation}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-destructive">
+              {t('deleteAccount.confirmTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
               {t('deleteAccount.confirmDescription')}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
             <Button
               variant="outline"
               onClick={() => setShowConfirmation(false)}
@@ -124,9 +127,9 @@ export function DeleteAccountCard() {
             >
               {isDeleting ? t('deleteAccount.deleting') : t('deleteAccount.confirm')}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Card>
   );
 }