🎨 refactor: UI stlye (#4438)

* feat: Refactor ChatForm and StopButton components for improved styling and localization

* feat: Refactor AudioRecorder, ChatForm, AttachFile, and SendButton components for improved styling and layout

* feat: Add RevokeAllKeys component and update styling for buttons and inputs

* feat: Refactor ClearChats component and update ClearConvos functionality for improved clarity and user experience

* feat: Remove ClearConvos component and update related imports and functionality in Avatar and DeleteCacheButton components

* feat: Rename DeleteCacheButton to DeleteCache and update related imports; enhance confirmation message in localization

* feat: Update ChatForm layout for RTL support and improve component structure

* feat: Adjust ChatForm layout for improved RTL support and alignment

* feat: Refactor Bookmark components to use new UI elements and improve styling

* feat: Update FileSearch and ShareAgent components for improved button styling and layout

* feat: Update ChatForm and TextareaHeader styles for improved UI consistency

* feat: Refactor Nav components for improved styling and layout adjustments

* feat: Update button sizes and padding for improved UI consistency across chat components

* feat: Remove ClearChatsButton test file as part of code cleanup

client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx

@@ -1,11 +1,19 @@
+import { LockIcon, Trash } from 'lucide-react';
 import React, { useState, useCallback } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '~/components/ui';
-import { cn, defaultTextProps, removeFocusOutlines } from '~/utils';
+import {
+  Input,
+  Button,
+  Spinner,
+  OGDialog,
+  OGDialogContent,
+  OGDialogTrigger,
+  OGDialogHeader,
+  OGDialogTitle,
+} from '~/components';
 import { useDeleteUserMutation } from '~/data-provider';
-import { Spinner, LockIcon } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
-import DangerButton from '../DangerButton';
+import { cn } from '~/utils';
 
 const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolean }) => {
   const localize = useLocalize();
@@ -15,14 +23,8 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
   });
 
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
-  const [deleteInput, setDeleteInput] = useState('');
-  const [emailInput, setEmailInput] = useState('');
   const [isLocked, setIsLocked] = useState(true);
 
-  const onClick = useCallback(() => {
-    setDialogOpen(true);
-  }, []);
-
   const handleDeleteUser = () => {
     if (!isLocked) {
       deleteUser(undefined);
@@ -30,47 +32,38 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
   };
 
   const handleInputChange = useCallback(
-    (newEmailInput: string, newDeleteInput: string) => {
+    (newEmailInput: string) => {
       const isEmailCorrect =
-        newEmailInput.trim().toLowerCase() === user?.email?.trim().toLowerCase();
-      const isDeleteInputCorrect = newDeleteInput === 'DELETE';
-      setIsLocked(!(isEmailCorrect && isDeleteInputCorrect));
+        newEmailInput.trim().toLowerCase() === user?.email.trim().toLowerCase();
+      setIsLocked(!isEmailCorrect);
     },
     [user?.email],
   );
 
   return (
     <>
-      <div className="flex items-center justify-between">
-        <span>{localize('com_nav_delete_account')}</span>
-        <label>
-          <DangerButton
-            id={'delete-user-account'}
-            disabled={disabled}
-            onClick={onClick}
-            actionTextCode="com_ui_delete"
-            className={cn(
-              'btn relative border-none bg-red-500 text-white hover:bg-red-700 dark:hover:bg-red-700',
-            )}
-            confirmClear={false}
-            infoTextCode={''}
-            dataTestIdInitial={''}
-            dataTestIdConfirm={''}
-          />
-        </label>
-      </div>
-      <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
-        <DialogContent
-          className={cn('shadow-2xl md:h-[500px] md:w-[450px]')}
-          style={{ borderRadius: '12px', padding: '20px' }}
-        >
-          <DialogHeader>
-            <DialogTitle className="text-lg font-medium leading-6">
+      <OGDialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+        <div className="flex items-center justify-between">
+          <span>{localize('com_nav_delete_account')}</span>
+          <OGDialogTrigger asChild>
+            <Button
+              variant="destructive"
+              className="flex items-center justify-center rounded-lg transition-colors duration-200"
+              onClick={() => setDialogOpen(true)}
+              disabled={disabled}
+            >
+              {localize('com_ui_delete')}
+            </Button>
+          </OGDialogTrigger>
+        </div>
+        <OGDialogContent className="w-11/12 max-w-2xl">
+          <OGDialogHeader>
+            <OGDialogTitle className="text-lg font-medium leading-6">
               {localize('com_nav_delete_account_confirm')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="mb-20 text-sm text-black dark:text-white">
-            <ul>
+            </OGDialogTitle>
+          </OGDialogHeader>
+          <div className="mb-8 text-sm text-black dark:text-white">
+            <ul className="font-semibold text-amber-600">
               <li>{localize('com_nav_delete_warning')}</li>
               <li>{localize('com_nav_delete_data_info')}</li>
             </ul>
@@ -80,28 +73,14 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
               {renderInput(
                 localize('com_nav_delete_account_email_placeholder'),
                 'email-confirm-input',
-                user?.email || '',
-                (e) => {
-                  setEmailInput(e.target.value);
-                  handleInputChange(e.target.value, deleteInput);
-                },
-              )}
-            </div>
-            <div className="mb-4">
-              {renderInput(
-                localize('com_nav_delete_account_confirm_placeholder'),
-                'delete-confirm-input',
-                '',
-                (e) => {
-                  setDeleteInput(e.target.value);
-                  handleInputChange(emailInput, e.target.value);
-                },
+                user?.email ?? '',
+                (e) => handleInputChange(e.target.value),
               )}
             </div>
             {renderDeleteButton(handleDeleteUser, isDeleting, isLocked, localize)}
           </div>
-        </DialogContent>
-      </Dialog>
+        </OGDialogContent>
+      </OGDialog>
     </>
   );
 };
@@ -113,17 +92,10 @@ const renderInput = (
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
 ) => (
   <div className="mb-4">
-    <label className="mb-1 block text-sm font-medium text-black dark:text-white">{label}</label>
-    <Input
-      id={id}
-      onChange={onChange}
-      placeholder={value}
-      className={cn(
-        defaultTextProps,
-        'h-10 max-h-10 w-full max-w-full rounded-md bg-white px-3 py-2',
-        removeFocusOutlines,
-      )}
-    />
+    <label className="mb-1 block text-sm font-medium text-black dark:text-white" htmlFor={id}>
+      {label}
+    </label>
+    <Input id={id} onChange={onChange} placeholder={value} />
   </div>
 );
 
@@ -135,12 +107,8 @@ const renderDeleteButton = (
 ) => (
   <button
     className={cn(
-      'mt-4 flex w-full items-center justify-center rounded-lg px-4 py-2 transition-colors duration-200',
-      isLocked
-        ? 'cursor-not-allowed bg-gray-200 text-gray-300 dark:bg-gray-500 dark:text-gray-600'
-        : isDeleting
-          ? 'cursor-not-allowed bg-gray-100 text-gray-700 dark:bg-gray-400 dark:text-gray-700'
-          : 'bg-red-700 text-white hover:bg-red-800 ',
+      'mt-4 flex w-full items-center justify-center rounded-lg bg-surface-tertiary px-4 py-2 transition-all duration-200',
+      isLocked ? 'cursor-not-allowed opacity-30' : 'bg-destructive text-destructive-foreground',
     )}
     onClick={handleDeleteUser}
     disabled={isDeleting || isLocked}
@@ -153,12 +121,12 @@ const renderDeleteButton = (
       <>
         {isLocked ? (
           <>
-            <LockIcon />
+            <LockIcon className="size-5" />
             <span className="ml-2">{localize('com_ui_locked')}</span>
           </>
         ) : (
           <>
-            <LockIcon />
+            <Trash className="size-5" />
             <span className="ml-2">{localize('com_nav_delete_account_button')}</span>
           </>
         )}