@djangocfg/layouts 2.1.127 → 2.1.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.127",
+  "version": "2.1.129",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,12 +74,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.127",
-    "@djangocfg/centrifugo": "^2.1.127",
-    "@djangocfg/i18n": "^2.1.127",
-    "@djangocfg/ui-core": "^2.1.127",
-    "@djangocfg/ui-nextjs": "^2.1.127",
-    "@djangocfg/ui-tools": "^2.1.127",
+    "@djangocfg/api": "^2.1.129",
+    "@djangocfg/centrifugo": "^2.1.129",
+    "@djangocfg/i18n": "^2.1.129",
+    "@djangocfg/ui-core": "^2.1.129",
+    "@djangocfg/ui-nextjs": "^2.1.129",
+    "@djangocfg/ui-tools": "^2.1.129",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -102,13 +102,13 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.127",
-    "@djangocfg/i18n": "^2.1.127",
-    "@djangocfg/centrifugo": "^2.1.127",
-    "@djangocfg/typescript-config": "^2.1.127",
-    "@djangocfg/ui-core": "^2.1.127",
-    "@djangocfg/ui-nextjs": "^2.1.127",
-    "@djangocfg/ui-tools": "^2.1.127",
+    "@djangocfg/api": "^2.1.129",
+    "@djangocfg/i18n": "^2.1.129",
+    "@djangocfg/centrifugo": "^2.1.129",
+    "@djangocfg/typescript-config": "^2.1.129",
+    "@djangocfg/ui-core": "^2.1.129",
+    "@djangocfg/ui-nextjs": "^2.1.129",
+    "@djangocfg/ui-tools": "^2.1.129",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Camera, ChevronRight, LogOut, Mail, Phone, Shield, ShieldCheck, Trash2, User, Building2, Briefcase } from 'lucide-react';
+import { Camera, LogOut, Trash2 } from 'lucide-react';
 import moment from 'moment';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -47,149 +47,148 @@ interface ProfileLayoutProps {
 type EditingField = 'first_name' | 'last_name' | 'company' | 'position' | 'phone' | null;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Reusable Components
+// Editable Field Component
 // ─────────────────────────────────────────────────────────────────────────────
 
-/** Apple-style settings group container */
-const SettingsGroup = ({ children, className }: { children: React.ReactNode; className?: string }) => (
-  <div className={cn('bg-card rounded-xl overflow-hidden divide-y divide-border', className)}>
-    {children}
-  </div>
-);
-
-/** Apple-style settings group header */
-const SettingsGroupHeader = ({ children }: { children: React.ReactNode }) => (
-  <div className="px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
-    {children}
-  </div>
-);
-
-/** Apple-style settings row */
-interface SettingsRowProps {
-  icon?: React.ReactNode;
+interface EditableFieldProps {
   label: string;
-  value?: string | React.ReactNode;
-  onClick?: () => void;
-  destructive?: boolean;
+  value: string;
+  placeholder: string;
+  onSave: (value: string) => Promise<void>;
   disabled?: boolean;
-  showChevron?: boolean;
-  className?: string;
 }
 
-const SettingsRow = ({
-  icon,
-  label,
-  value,
-  onClick,
-  destructive,
-  disabled,
-  showChevron = !!onClick,
-  className,
-}: SettingsRowProps) => {
-  const Wrapper = onClick ? 'button' : 'div';
+const EditableField = ({ label, value, placeholder, onSave, disabled }: EditableFieldProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  const handleSave = async () => {
+    if (editValue === value) {
+      setIsEditing(false);
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await onSave(editValue);
+      setIsEditing(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      setEditValue(value);
+      setIsEditing(false);
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <div className="py-4 border-b border-border/50 last:border-0">
+        <label className="block text-[13px] text-muted-foreground mb-1.5">
+          {label}
+        </label>
+        <div className="flex items-center gap-2">
+          <Input
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={handleSave}
+            placeholder={placeholder}
+            autoFocus
+            disabled={isSaving}
+            className="h-9 text-[15px]"
+          />
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <Wrapper
-      onClick={disabled ? undefined : onClick}
+    <button
+      type="button"
+      onClick={() => !disabled && setIsEditing(true)}
       disabled={disabled}
       className={cn(
-        'w-full flex items-center gap-3 px-4 py-3 text-left transition-colors',
-        onClick && !disabled && 'hover:bg-muted/50 active:bg-muted cursor-pointer',
-        disabled && 'opacity-50 cursor-not-allowed',
-        destructive && 'text-destructive',
-        className
+        'w-full py-4 border-b border-border/50 last:border-0 text-left',
+        'transition-colors hover:bg-muted/30',
+        disabled && 'cursor-default hover:bg-transparent'
       )}
     >
-      {icon && (
-        <span className={cn('shrink-0', destructive ? 'text-destructive' : 'text-muted-foreground')}>
-          {icon}
-        </span>
-      )}
-      <span className="flex-1 font-medium">{label}</span>
-      {value && (
-        <span className="text-muted-foreground text-sm truncate max-w-[180px]">
-          {value}
-        </span>
-      )}
-      {showChevron && (
-        <ChevronRight className="w-4 h-4 text-muted-foreground/50 shrink-0" />
-      )}
-    </Wrapper>
+      <div className="text-[13px] text-muted-foreground mb-0.5">
+        {label}
+      </div>
+      <div className={cn(
+        'text-[15px]',
+        value ? 'text-foreground' : 'text-muted-foreground/60'
+      )}>
+        {value || placeholder}
+      </div>
+    </button>
   );
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Edit Field Dialog
+// Section Component
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface EditFieldDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  field: EditingField;
-  currentValue: string;
-  onSave: (field: string, value: string) => Promise<void>;
-  isSaving: boolean;
+interface SectionProps {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
 }
 
-const EditFieldDialog = ({ open, onOpenChange, field, currentValue, onSave, isSaving }: EditFieldDialogProps) => {
-  const [value, setValue] = useState(currentValue);
-  const t = useTypedT<I18nTranslations>();
-
-  const labels = useMemo(() => ({
-    fieldLabels: {
-      first_name: t('layouts.profilePage.firstName'),
-      last_name: t('layouts.profilePage.lastName'),
-      company: t('layouts.profilePage.company'),
-      position: t('layouts.profilePage.position'),
-      phone: t('layouts.profilePage.phone'),
-    } as Record<string, string>,
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
-    enterField: t('layouts.profilePage.enterField'),
-  }), [t]);
-
-  useEffect(() => {
-    setValue(currentValue);
-  }, [currentValue, open]);
-
-  const handleSave = async () => {
-    if (field) {
-      await onSave(field, value);
-    }
-  };
+const Section = ({ title, children, className }: SectionProps) => (
+  <div className={cn('mb-10', className)}>
+    {title && (
+      <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+        {title}
+      </h2>
+    )}
+    <div className="bg-card rounded-xl px-4">
+      {children}
+    </div>
+  </div>
+);
 
-  if (!field) return null;
+// ─────────────────────────────────────────────────────────────────────────────
+// Action Button Component
+// ─────────────────────────────────────────────────────────────────────────────
 
-  const fieldLabel = labels.fieldLabels[field] || field;
+interface ActionButtonProps {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'destructive';
+  disabled?: boolean;
+}
 
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>{fieldLabel}</DialogTitle>
-        </DialogHeader>
-        <div className="py-4">
-          <Input
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder={labels.enterField.replace('{field}', fieldLabel.toLowerCase())}
-            autoFocus
-            onKeyDown={(e) => e.key === 'Enter' && handleSave()}
-          />
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isSaving}>
-            {labels.cancel}
-          </Button>
-          <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? labels.saving : labels.save}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
+const ActionButton = ({ icon, label, onClick, variant = 'default', disabled }: ActionButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+    className={cn(
+      'w-full flex items-center justify-center gap-2 py-3.5 border-b border-border/50 last:border-0',
+      'text-[15px] font-medium transition-colors',
+      variant === 'destructive'
+        ? 'text-destructive hover:bg-destructive/5'
+        : 'text-foreground hover:bg-muted/30',
+      disabled && 'opacity-50 cursor-not-allowed'
+    )}
+  >
+    {icon}
+    {label}
+  </button>
+);
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Main Component
@@ -202,8 +201,6 @@ const ProfileContent = ({
   enableDeleteAccount = true,
 }: ProfileLayoutProps) => {
   const { user, isLoading, logout, uploadAvatar, updateProfile } = useAuth();
-  const [editingField, setEditingField] = useState<EditingField>(null);
-  const [isSaving, setIsSaving] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const t = useTypedT<I18nTranslations>();
 
@@ -217,39 +214,35 @@ const ProfileContent = ({
   const labels = useMemo(() => ({
     title: title || t('layouts.profilePage.title'),
     // Sections
-    account: t('layouts.profilePage.account'),
     personalInfo: t('layouts.profilePage.personalInfo'),
     work: t('layouts.profilePage.work'),
     security: t('layouts.profilePage.security'),
-    actions: t('layouts.profilePage.actions'),
     // Fields
-    fieldLabels: {
-      first_name: t('layouts.profilePage.firstName'),
-      last_name: t('layouts.profilePage.lastName'),
-      company: t('layouts.profilePage.company'),
-      position: t('layouts.profilePage.position'),
-      phone: t('layouts.profilePage.phone'),
-    } as Record<string, string>,
+    firstName: t('layouts.profilePage.firstName'),
+    lastName: t('layouts.profilePage.lastName'),
     email: t('layouts.profilePage.email'),
-    // Values
+    phone: t('layouts.profilePage.phone'),
+    company: t('layouts.profilePage.company'),
+    position: t('layouts.profilePage.position'),
+    // Placeholders
     notSet: t('layouts.profilePage.notSet'),
-    on: t('layouts.profilePage.on'),
-    off: t('layouts.profilePage.off'),
+    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
+    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
+    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
+    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
+    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
+    // 2FA
+    twoFactorAuth: t('layouts.profilePage.twoFactorAuth'),
+    twoFactorEnabled: t('layouts.profilePage.twoFactorEnabled') || 'Two-factor authentication is enabled',
+    twoFactorDisabled: t('layouts.profilePage.twoFactorDisabled') || 'Add an extra layer of security',
+    enable2FA: t('layouts.profilePage.enable2FA') || 'Enable 2FA',
     // Actions
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
     signOut: t('layouts.profilePage.signOut'),
     deleteAccount: t('layouts.profilePage.deleteAccount'),
-    // 2FA
-    twoFactorAuth: t('layouts.profilePage.twoFactorAuth'),
     // Avatar
-    avatar: t('layouts.profilePage.avatar'),
     changeAvatar: t('layouts.profilePage.changeAvatar'),
     // Membership
     memberSince: t('layouts.profilePage.memberSince'),
-    // Placeholder
-    enterField: t('layouts.profilePage.enterField'),
     // Messages
     profileUpdated: t('layouts.profilePage.profileUpdated'),
     avatarUpdated: t('layouts.profilePage.avatarUpdated'),
@@ -330,16 +323,13 @@ const ProfileContent = ({
   };
 
   const handleFieldSave = async (field: string, value: string) => {
-    setIsSaving(true);
     try {
       await updateProfile({ [field]: value });
       toast.success(labels.profileUpdated);
-      setEditingField(null);
     } catch (error: any) {
       profileLogger.error('Profile update error:', error);
       toast.error(error?.response?.data?.[field]?.[0] || labels.failedToUpdate);
-    } finally {
-      setIsSaving(false);
+      throw error;
     }
   };
 
@@ -388,28 +378,33 @@ const ProfileContent = ({
   }
 
   return (
-    <div className="container mx-auto px-4 py-8 max-w-lg">
-      {/* Header */}
-      <h1 className="text-2xl font-bold text-center mb-8">{labels.title}</h1>
-
-      {/* Avatar & Name */}
-      <div className="flex flex-col items-center mb-8">
-        <div className="relative group mb-3">
-          <Avatar className="w-24 h-24 text-3xl">
+    <div className="container mx-auto px-4 py-12 max-w-md">
+      {/* Header with Avatar */}
+      <div className="flex flex-col items-center mb-12">
+        <div className="relative group mb-4">
+          <Avatar className="w-28 h-28 text-3xl">
             {user.avatar ? (
-              <img src={user.avatar} alt={labels.avatar} className="w-full h-full object-cover" />
+              <img src={user.avatar} alt="" className="w-full h-full object-cover" />
             ) : (
-              <AvatarFallback className="bg-primary text-primary-foreground">
+              <AvatarFallback className="bg-muted text-muted-foreground text-2xl font-medium">
                 {getInitials(user.display_username || user.email || '')}
               </AvatarFallback>
             )}
           </Avatar>
-          <label className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer" title={labels.changeAvatar}>
-            {isUploading ? (
-              <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
-            ) : (
-              <Camera className="w-6 h-6 text-white" />
+          <label
+            className={cn(
+              'absolute inset-0 rounded-full flex items-center justify-center cursor-pointer',
+              'bg-black/0 group-hover:bg-black/40 transition-colors'
             )}
+            title={labels.changeAvatar}
+          >
+            <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+              {isUploading ? (
+                <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <Camera className="w-6 h-6 text-white" />
+              )}
+            </div>
             <input
               type="file"
               accept="image/*"
@@ -419,118 +414,107 @@ const ProfileContent = ({
             />
           </label>
         </div>
-        <h2 className="text-xl font-semibold">{user.display_username || user.email}</h2>
+
+        <h1 className="text-2xl font-semibold tracking-tight">
+          {user.full_name || user.display_username || user.email}
+        </h1>
+
+        <p className="text-[15px] text-muted-foreground mt-1">
+          {user.email}
+        </p>
+
         {user.date_joined && (
-          <p className="text-sm text-muted-foreground">
+          <p className="text-[13px] text-muted-foreground/60 mt-2">
             {labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))}
           </p>
         )}
       </div>
 
-      <div className="space-y-6">
-        {/* Account Info */}
-        <div>
-          <SettingsGroupHeader>{labels.account}</SettingsGroupHeader>
-          <SettingsGroup>
-            <SettingsRow
-              icon={<Mail className="w-5 h-5" />}
-              label={labels.email}
-              value={user.email}
-              showChevron={false}
-            />
-          </SettingsGroup>
-        </div>
-
-        {/* Personal Info */}
-        <div>
-          <SettingsGroupHeader>{labels.personalInfo}</SettingsGroupHeader>
-          <SettingsGroup>
-            <SettingsRow
-              icon={<User className="w-5 h-5" />}
-              label={labels.fieldLabels.first_name}
-              value={user.first_name || labels.notSet}
-              onClick={() => setEditingField('first_name')}
-            />
-            <SettingsRow
-              icon={<User className="w-5 h-5" />}
-              label={labels.fieldLabels.last_name}
-              value={user.last_name || labels.notSet}
-              onClick={() => setEditingField('last_name')}
-            />
-            <SettingsRow
-              icon={<Phone className="w-5 h-5" />}
-              label={labels.fieldLabels.phone}
-              value={user.phone || labels.notSet}
-              onClick={() => setEditingField('phone')}
-            />
-          </SettingsGroup>
-        </div>
-
-        {/* Work Info */}
-        <div>
-          <SettingsGroupHeader>{labels.work}</SettingsGroupHeader>
-          <SettingsGroup>
-            <SettingsRow
-              icon={<Building2 className="w-5 h-5" />}
-              label={labels.fieldLabels.company}
-              value={user.company || labels.notSet}
-              onClick={() => setEditingField('company')}
-            />
-            <SettingsRow
-              icon={<Briefcase className="w-5 h-5" />}
-              label={labels.fieldLabels.position}
-              value={user.position || labels.notSet}
-              onClick={() => setEditingField('position')}
-            />
-          </SettingsGroup>
-        </div>
-
-        {/* Security */}
-        {enable2FA && (
-          <div>
-            <SettingsGroupHeader>{labels.security}</SettingsGroupHeader>
-            <SettingsGroup>
-              <SettingsRow
-                icon={has2FAEnabled ? <ShieldCheck className="w-5 h-5 text-green-500" /> : <Shield className="w-5 h-5" />}
-                label={labels.twoFactorAuth}
-                value={has2FAEnabled ? labels.on : labels.off}
-                onClick={() => !has2FAEnabled && setShow2FASetup(true)}
-                showChevron={!has2FAEnabled}
-              />
-            </SettingsGroup>
+      {/* Personal Info */}
+      <Section title={labels.personalInfo}>
+        <EditableField
+          label={labels.firstName}
+          value={user.first_name || ''}
+          placeholder={labels.addFirstName}
+          onSave={(value) => handleFieldSave('first_name', value)}
+        />
+        <EditableField
+          label={labels.lastName}
+          value={user.last_name || ''}
+          placeholder={labels.addLastName}
+          onSave={(value) => handleFieldSave('last_name', value)}
+        />
+        <EditableField
+          label={labels.phone}
+          value={user.phone || ''}
+          placeholder={labels.addPhone}
+          onSave={(value) => handleFieldSave('phone', value)}
+        />
+      </Section>
+
+      {/* Work */}
+      <Section title={labels.work}>
+        <EditableField
+          label={labels.company}
+          value={user.company || ''}
+          placeholder={labels.addCompany}
+          onSave={(value) => handleFieldSave('company', value)}
+        />
+        <EditableField
+          label={labels.position}
+          value={user.position || ''}
+          placeholder={labels.addPosition}
+          onSave={(value) => handleFieldSave('position', value)}
+        />
+      </Section>
+
+      {/* Security */}
+      {enable2FA && (
+        <Section title={labels.security}>
+          <div className="py-4 border-b border-border/50 last:border-0">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-[15px] font-medium">
+                  {labels.twoFactorAuth}
+                </div>
+                <div className="text-[13px] text-muted-foreground mt-0.5">
+                  {has2FAEnabled ? labels.twoFactorEnabled : labels.twoFactorDisabled}
+                </div>
+              </div>
+              {!has2FAEnabled && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShow2FASetup(true)}
+                  className="text-[13px] h-8"
+                >
+                  {labels.enable2FA}
+                </Button>
+              )}
+              {has2FAEnabled && (
+                <div className="w-2 h-2 rounded-full bg-green-500" />
+              )}
+            </div>
           </div>
-        )}
-
-        {/* Actions */}
-        <div>
-          <SettingsGroupHeader>{labels.actions}</SettingsGroupHeader>
-          <SettingsGroup>
-            <SettingsRow
-              icon={<LogOut className="w-5 h-5" />}
-              label={labels.signOut}
-              onClick={handleLogout}
-            />
-            {enableDeleteAccount && (
-              <SettingsRow
-                icon={<Trash2 className="w-5 h-5" />}
-                label={labels.deleteAccount}
-                onClick={() => setShowDeleteConfirm(true)}
-                destructive
-              />
-            )}
-          </SettingsGroup>
-        </div>
-      </div>
+        </Section>
+      )}
 
-      {/* Edit Field Dialog */}
-      <EditFieldDialog
-        open={editingField !== null}
-        onOpenChange={(open) => !open && setEditingField(null)}
-        field={editingField}
-        currentValue={editingField ? (user[editingField] || '') : ''}
-        onSave={handleFieldSave}
-        isSaving={isSaving}
-      />
+      {/* Actions */}
+      <Section>
+        <ActionButton
+          icon={<LogOut className="w-4 h-4" />}
+          label={labels.signOut}
+          onClick={handleLogout}
+        />
+        {enableDeleteAccount && (
+          <ActionButton
+            icon={<Trash2 className="w-4 h-4" />}
+            label={labels.deleteAccount}
+            onClick={() => setShowDeleteConfirm(true)}
+            variant="destructive"
+          />
+        )}
+      </Section>
 
       {/* Delete Account Dialog */}
       <DeleteAccountDialog
@@ -582,9 +566,9 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="text-destructive">{labels.title}</DialogTitle>
+          <DialogTitle>{labels.title}</DialogTitle>
           <DialogDescription>
             {labels.description}
           </DialogDescription>
@@ -595,9 +579,9 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
             <p className="text-sm text-destructive">{error}</p>
           )}
           <div className="space-y-2">
-            <p className="text-sm text-muted-foreground">
+            <p className="text-[13px] text-muted-foreground">
               {labels.typeToConfirm.replace('{word}', '')}
-              <span className="font-mono font-bold">{labels.confirmationWord}</span>
+              <span className="font-mono font-semibold text-foreground">{labels.confirmationWord}</span>
             </p>
             <Input
               value={confirmationInput}
@@ -605,6 +589,7 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
               placeholder={labels.confirmationWord}
               disabled={isLoading}
               autoComplete="off"
+              className="font-mono"
             />
           </div>
         </div>