🎨 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/Data/RevokeKeysButton.tsx

@@ -2,64 +2,77 @@ import {
   useRevokeAllUserKeysMutation,
   useRevokeUserKeyMutation,
 } from 'librechat-data-provider/react-query';
-import React, { useState, useCallback, useRef } from 'react';
-import { useOnClickOutside } from '~/hooks';
-import DangerButton from '../DangerButton';
+import React, { useState } from 'react';
+import { Button, Label, OGDialog, OGDialogTrigger, Spinner } from '~/components';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { useLocalize } from '~/hooks';
 
 export const RevokeKeysButton = ({
-  showText = true,
   endpoint = '',
   all = false,
   disabled = false,
+  setDialogOpen,
 }: {
-  showText?: boolean;
   endpoint?: string;
   all?: boolean;
   disabled?: boolean;
+  setDialogOpen?: (open: boolean) => void;
 }) => {
-  const [confirmClear, setConfirmClear] = useState(false);
+  const localize = useLocalize();
+  const [open, setOpen] = useState(false);
   const revokeKeyMutation = useRevokeUserKeyMutation(endpoint);
   const revokeKeysMutation = useRevokeAllUserKeysMutation();
 
-  const contentRef = useRef(null);
-  useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
-
-  const revokeAllUserKeys = useCallback(() => {
-    if (confirmClear) {
-      revokeKeysMutation.mutate({});
-      setConfirmClear(false);
-    } else {
-      setConfirmClear(true);
-    }
-  }, [confirmClear, revokeKeysMutation]);
-
-  const revokeUserKey = useCallback(() => {
-    if (!endpoint) {
+  const handleSuccess = () => {
+    if (!setDialogOpen) {
       return;
-    } else if (confirmClear) {
-      revokeKeyMutation.mutate({});
-      setConfirmClear(false);
-    } else {
-      setConfirmClear(true);
     }
-  }, [confirmClear, revokeKeyMutation, endpoint]);
 
-  const onClick = all ? revokeAllUserKeys : revokeUserKey;
+    setDialogOpen(false);
+  };
+
+  const onClick = () => {
+    if (all) {
+      revokeKeysMutation.mutate({});
+    } else {
+      revokeKeyMutation.mutate({}, { onSuccess: handleSuccess });
+    }
+  };
+
+  const dialogTitle = all
+    ? localize('com_ui_revoke_keys')
+    : localize('com_ui_revoke_key_endpoint', endpoint);
+
+  const dialogMessage = all
+    ? localize('com_ui_revoke_keys_confirm')
+    : localize('com_ui_revoke_key_confirm');
+
+  const isLoading = revokeKeyMutation.isLoading || revokeKeysMutation.isLoading;
 
   return (
-    <DangerButton
-      ref={contentRef}
-      showText={showText}
-      onClick={onClick}
-      disabled={disabled}
-      confirmClear={confirmClear}
-      id={'revoke-all-user-keys'}
-      actionTextCode={'com_ui_revoke'}
-      infoTextCode={'com_ui_revoke_info'}
-      infoDescriptionCode={'com_nav_info_revoke'}
-      dataTestIdInitial={'revoke-all-keys-initial'}
-      dataTestIdConfirm={'revoke-all-keys-confirm'}
-      mutation={all ? revokeKeysMutation : revokeKeyMutation}
-    />
+    <OGDialog open={open} onOpenChange={setOpen}>
+      <OGDialogTrigger asChild>
+        <Button
+          variant="destructive"
+          className="flex items-center justify-center rounded-lg transition-colors duration-200"
+          onClick={() => setOpen(true)}
+          disabled={disabled}
+        >
+          {localize('com_ui_revoke')}
+        </Button>
+      </OGDialogTrigger>
+      <OGDialogTemplate
+        showCloseButton={false}
+        title={dialogTitle}
+        className="max-w-[450px]"
+        main={<Label className="text-left text-sm font-medium">{dialogMessage}</Label>}
+        selection={{
+          selectHandler: onClick,
+          selectClasses:
+            'bg-destructive text-white transition-all duration-200 hover:bg-destructive/80',
+          selectText: isLoading ? <Spinner /> : localize('com_ui_revoke'),
+        }}
+      />
+    </OGDialog>
   );
 };