🎨 style: settings tab update (#3088)

* style: settings UI  update

* style: update UI

* style: update button style

* fix: scroll settings on mobile

* feat: `?` for settings

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { SettingsTabValues } from 'librechat-data-provider';
+import HoverCardSettings from '../HoverCardSettings';
 import DeleteAccount from './DeleteAccount';
 import { Switch } from '~/components/ui';
 import { useLocalize } from '~/hooks';
@@ -25,7 +26,7 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
       role="tabpanel"
       className="w-full md:min-h-[271px]"
     >
-      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
+      <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
           <Avatar />
         </div>
@@ -33,7 +34,10 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
           <DeleteAccount />
         </div>
         <div className="flex items-center justify-between">
-          <div> {localize('com_nav_user_name_display')} </div>
+          <div className="flex items-center space-x-2">
+            <div>{localize('com_nav_user_name_display')}</div>
+            <HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
+          </div>
           <Switch
             id="UsernameDisplay"
             checked={UsernameDisplay}

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

@@ -80,11 +80,8 @@ function Avatar() {
     <>
       <div className="flex items-center justify-between">
         <span>{localize('com_nav_profile_picture')}</span>
-        <label
-          htmlFor={'file-upload-avatar'}
-          className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-green-500"
-        >
-          <FileImage className="mr-1 flex w-[22px] items-center stroke-1" />
+        <label htmlFor={'file-upload-avatar'} className="btn btn-neutral relative">
+          <FileImage className="mr-2 flex w-[22px] items-center stroke-1" />
           <span>{localize('com_nav_change_picture')}</span>
           <input
             id={'file-upload-avatar'}

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

@@ -1,17 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogButton,
-  Input,
-} from '~/components/ui';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '~/components/ui';
 import { cn, defaultTextProps, removeFocusOutlines } from '~/utils';
 import { useDeleteUserMutation } from '~/data-provider';
 import { Spinner, LockIcon } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
+import DangerButton from '../DangerButton';
 
 const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolean }) => {
   const localize = useLocalize();
@@ -50,16 +44,19 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
       <div className="flex items-center justify-between">
         <span>{localize('com_nav_delete_account')}</span>
         <label>
-          <DialogButton
+          <DangerButton
             id={'delete-user-account'}
             disabled={disabled}
             onClick={onClick}
+            actionTextCode="com_ui_delete"
             className={cn(
-              'btn btn-danger relative border-none bg-red-700 text-white hover:bg-red-800 dark:hover:bg-red-800',
+              'btn relative border-none bg-red-500 text-white hover:bg-red-700 dark:hover:bg-red-700',
             )}
-          >
-            {localize('com_ui_delete')}
-          </DialogButton>
+            confirmClear={false}
+            infoTextCode={''}
+            dataTestIdInitial={''}
+            dataTestIdConfirm={''}
+          />
         </label>
       </div>
       <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>