👐 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/Prompts/Groups/FilterPrompts.tsx

@@ -31,7 +31,7 @@ export function FilterItem({
   return (
     <DropdownMenuItem
       onClick={onClick}
-      className="relative cursor-pointer gap-2 text-text-secondary hover:bg-surface-tertiary focus:bg-surface-tertiary dark:focus:bg-surface-tertiary"
+      className="relative cursor-pointer gap-2 text-text-secondary hover:bg-surface-tertiary focus:bg-surface-tertiary"
     >
       {icon}
       <span>{label}</span>

client/src/components/Prompts/Groups/List.tsx

@@ -31,7 +31,7 @@ export default function List({
         <div className="flex w-full justify-end">
           <Button
             variant="outline"
-            className="mx-2 w-full px-3"
+            className="mx-2 w-full bg-transparent px-3"
             onClick={() => navigate('/d/prompts/new')}
           >
             + {localize('com_ui_create_prompt')}

client/src/components/Prompts/ManagePrompts.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { useLocalize, useCustomLink } from '~/hooks';
-import { buttonVariants } from '~/components/ui';
+import { Button } from '~/components/ui';
 import { cn } from '~/utils';
 import store from '~/store';
 
@@ -15,13 +15,10 @@ export default function ManagePrompts({ className }: { className?: string }) {
   }, [setPromptsName, setPromptsCategory]);
 
   const clickHandler = useCustomLink('/d/prompts', clickCallback);
+
   return (
-    <a
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
-      href="/d/prompts"
-      onClick={clickHandler}
-    >
+    <Button variant="outline" className={cn(className, 'bg-transparent')} onClick={clickHandler}>
       {localize('com_ui_manage')}
-    </a>
+    </Button>
   );
 }

client/src/components/Prompts/PromptsView.tsx

@@ -41,7 +41,7 @@ export default function PromptsView() {
         <GroupSidePanel isDetailView={isDetailView} {...groupsNav}>
           <div className="mx-2 mt-1 flex flex-row items-center justify-between">
             <FilterPrompts setName={groupsNav.setName} />
-            <AutoSendPrompt className="text-xs dark:text-white" />
+            <AutoSendPrompt className="text-xs text-text-primary" />
           </div>
         </GroupSidePanel>
         <div