👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091)

* fix: cursor pointer not applying correct in the root component

* fix: add cursor-not-allowed to disabled state in SendButton component

* feat: update Dropdown to ariakit and changed LLM error's style

* feat: switched to ariakit's Dropdown and style improvements

* feat: archive updates

* refactor: delete conversations in archive

* refactor: settings

* add cool settings animation

* a11y: settings update

* style: update settings

* style: settings account settings menu; a11y(AccountSettings): switched to AriaKit

* a11y: account settings update

* style: update my files dialog

* fix: tests

* chore: remove console.log()

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -11,26 +11,26 @@ import SaveDraft from './SaveDraft';
 function Chat() {
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <FontSizeSelector />
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <ChatDirection />
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <SendMessageKeyEnter />
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <ShowCodeSwitch />
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <SaveDraft />
       </div>
       <ForkSettings />
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <ModularChat />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <LaTeXParsing />
       </div>
     </div>

client/src/components/Nav/SettingsTabs/Chat/ChatDirection.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import { useLocalize } from '~/hooks';
+import { Button } from '~/components';
 import store from '~/store';
 
 const ChatDirection = () => {
@@ -16,12 +17,11 @@ const ChatDirection = () => {
       <div className="flex items-center space-x-2">
         <span id="chat-direction-label">{localize('com_nav_chat_direction')}</span>
       </div>
-      <button
+      <Button
+        variant="outline"
+        aria-label="Toggle chat direction"
         onClick={toggleChatDirection}
         data-testid="chatDirection"
-        className="btn btn-neutral relative ring-ring-primary"
-        aria-labelledby="chat-direction-label chat-direction-status"
-        aria-pressed={direction === 'RTL'}
       >
         <span aria-hidden="true">{direction.toLowerCase()}</span>
         <span id="chat-direction-status" className="sr-only">
@@ -29,7 +29,7 @@ const ChatDirection = () => {
             ? localize('chat_direction_left_to_right')
             : localize('chat_direction_right_to_left')}
         </span>
-      </button>
+      </Button>
     </div>
   );
 };

client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx

@@ -19,7 +19,7 @@ export const ForkSettings = () => {
 
   return (
     <>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <div>{localize('com_ui_fork_change_default')}</div>
@@ -30,12 +30,11 @@ export const ForkSettings = () => {
             onChange={setForkSetting}
             options={forkOptions}
             sizeClasses="w-[200px]"
-            anchor="bottom start"
             testId="fork-setting-dropdown"
           />
         </div>
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <div className="flex items-center justify-between">
           <div> {localize('com_ui_fork_default')} </div>
           <Switch
@@ -47,7 +46,7 @@ export const ForkSettings = () => {
           />
         </div>
       </div>
-      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <div>{localize('com_ui_fork_split_target_setting')}</div>