🎨 style: UI Style Enhancements and Refactor for Improved Consistency and Layout (#4471)

* 🎨 style: adjust padding and class names in UI components

* 🎨 style: update ExportModal export button, update Export button hover style, refactor ChatForm style and fixed isRTL styles, update AttachFile position

* 🎨 style: remove redundant border classes in SettingsTabs components for cleaner UI

* 🎨 style: refactor Account component, extract DisplayUsernameMessages, and remove redundant border classes for cleaner layout

* 🎨 style: conditionally render Dropdown in ForkSettings component for improved UI responsiveness

* 🎨 style: replace DropdownNoState with Dropdown in voice selection components for consistency

* 🎨 style: update Settings component layout for better responsivenes on large screens

* 🎨 style: remove redundant margin-top classes for cleaner layout in various components

client/src/components/Nav/ExportConversation/ExportModal.tsx

@@ -4,7 +4,6 @@ import type { TConversation } from 'librechat-data-provider';
 import { OGDialog, Button, Input, Label, Checkbox, Dropdown } from '~/components/ui';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useLocalize, useExportConversation } from '~/hooks';
-import { cn, defaultTextProps } from '~/utils';
 
 export default function ExportModal({
   open,
@@ -78,10 +77,6 @@ export default function ExportModal({
                   value={filename}
                   onChange={(e) => setFileName(filenamify(e.target.value || ''))}
                   placeholder={localize('com_nav_export_filename_placeholder')}
-                  className={cn(
-                    defaultTextProps,
-                    'flex h-10 max-h-10 w-full resize-none px-3 py-2',
-                  )}
                 />
               </div>
               <div className="col-span-1 flex w-full flex-col items-start justify-start gap-2">
@@ -164,7 +159,7 @@ export default function ExportModal({
         }
         buttons={
           <>
-            <Button onClick={exportConversation} variant="success">
+            <Button onClick={exportConversation} variant="submit">
               {localize('com_endpoint_export')}
             </Button>
           </>

client/src/components/Nav/Settings.tsx

@@ -120,7 +120,9 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     aria-label="Settings"
                     className={cn(
                       'min-w-auto max-w-auto relative -ml-[8px] flex flex-shrink-0 flex-col flex-nowrap overflow-auto sm:max-w-none',
-                      isSmallScreen ? 'flex-row rounded-xl bg-surface-secondary' : '',
+                      isSmallScreen
+                        ? 'flex-row rounded-xl bg-surface-secondary'
+                        : 'sticky top-0 h-full',
                     )}
                     onKeyDown={handleKeyDown}
                   >

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

@@ -1,43 +1,19 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
+import DisplayUsernameMessages from './DisplayUsernameMessages';
 import DeleteAccount from './DeleteAccount';
-import { Switch } from '~/components/ui';
-import { useLocalize } from '~/hooks';
 import Avatar from './Avatar';
-import store from '~/store';
-
-function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => void }) {
-  const [UsernameDisplay, setUsernameDisplay] = useRecoilState<boolean>(store.UsernameDisplay);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setUsernameDisplay(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
 
+function Account() {
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <Avatar />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <DeleteAccount />
       </div>
-      <div className="flex items-center justify-between">
-        <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}
-          onCheckedChange={handleCheckedChange}
-          className="ml-4 mt-2"
-          data-testid="UsernameDisplay"
-        />
+      <div className="pb-3">
+        <DisplayUsernameMessages />
       </div>
     </div>
   );

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import HoverCardSettings from '../HoverCardSettings';
+import { Switch, Label } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function DisplayUsernameMessages() {
+  const localize = useLocalize();
+  const [UsernameDisplay, setUsernameDisplay] = useRecoilState(store.UsernameDisplay);
+
+  const handleCheckedChange = (checked: boolean) => {
+    setUsernameDisplay(checked);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <Label className="font-light">{localize('com_nav_user_name_display')}</Label>
+        <HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
+      </div>
+      <Switch
+        id="UsernameDisplay"
+        checked={UsernameDisplay}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4"
+        data-testid="UsernameDisplay"
+      />
+    </div>
+  );
+}

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

@@ -4,7 +4,7 @@ import CodeArtifacts from './CodeArtifacts';
 function Beta() {
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <CodeArtifacts />
       </div>
     </div>

client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx

@@ -86,7 +86,7 @@ function SwitchItem({
         id={id}
         checked={checked}
         onCheckedChange={onCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid={id}
         disabled={disabled}
       />

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 border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <FontSizeSelector />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ChatDirection />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <SendMessageKeyEnter />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ShowCodeSwitch />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <SaveDraft />
       </div>
       <ForkSettings />
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ModularChat />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <LaTeXParsing />
       </div>
     </div>

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

@@ -29,7 +29,7 @@ export default function SendMessageKeyEnter({
         id="enterToSend"
         checked={enterToSend}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="enterToSend"
       />
     </div>

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

@@ -19,34 +19,36 @@ export const ForkSettings = () => {
 
   return (
     <>
-      <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>
-            <HoverCardSettings side="bottom" text="com_nav_info_fork_change_default" />
-          </div>
-          <Dropdown
-            value={forkSetting}
-            onChange={setForkSetting}
-            options={forkOptions}
-            sizeClasses="w-[200px]"
-            testId="fork-setting-dropdown"
-          />
-        </div>
-      </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <div className="flex items-center justify-between">
           <div> {localize('com_ui_fork_default')} </div>
           <Switch
             id="rememberDefaultFork"
             checked={remember}
             onCheckedChange={setRemember}
-            className="ml-4 mt-2"
+            className="ml-4"
             data-testid="rememberDefaultFork"
           />
         </div>
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      {remember && (
+        <div className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <div>{localize('com_ui_fork_change_default')}</div>
+              <HoverCardSettings side="bottom" text="com_nav_info_fork_change_default" />
+            </div>
+            <Dropdown
+              value={forkSetting}
+              onChange={setForkSetting}
+              options={forkOptions}
+              sizeClasses="w-[200px]"
+              testId="fork-setting-dropdown"
+            />
+          </div>
+        </div>
+      )}
+      <div className="pb-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <div>{localize('com_ui_fork_split_target_setting')}</div>
@@ -56,7 +58,7 @@ export const ForkSettings = () => {
             id="splitAtTarget"
             checked={splitAtTarget}
             onCheckedChange={setSplitAtTarget}
-            className="ml-4 mt-2"
+            className="ml-4"
             data-testid="splitAtTarget"
           />
         </div>

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

@@ -29,7 +29,7 @@ export default function LaTeXParsingSwitch({
         id="LaTeXParsing"
         checked={LaTeXParsing}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="LaTeXParsing"
       />
     </div>

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

@@ -25,7 +25,7 @@ export default function ModularChatSwitch({
         id="modularChat"
         checked={modularChat}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="modularChat"
       />
     </div>

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

@@ -29,7 +29,7 @@ export default function SaveDraft({
         id="saveDrafts"
         checked={saveDrafts}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="saveDrafts"
       />
     </div>

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

@@ -26,7 +26,7 @@ export default function ShowCodeSwitch({
         id="showCode"
         checked={showCode}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="showCode"
       />
     </div>

client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx

@@ -18,7 +18,7 @@ export default function AtCommandSwitch() {
         id="atCommand"
         checked={atCommand}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="atCommand"
       />
     </div>

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

@@ -28,16 +28,16 @@ function Commands() {
         <HoverCardSettings side="bottom" text="com_nav_chat_commands_info" />
       </div>
       <div className="flex flex-col gap-3 text-sm text-text-primary">
-        <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+        <div className="pb-3">
           <AtCommandSwitch />
         </div>
         {hasAccessToMultiConvo === true && (
-          <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+          <div className="pb-3">
             <PlusCommandSwitch />
           </div>
         )}
         {hasAccessToPrompts === true && (
-          <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+          <div className="pb-3">
             <SlashCommandSwitch />
           </div>
         )}

client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx

@@ -18,7 +18,8 @@ export default function PlusCommandSwitch() {
         id="plusCommand"
         checked={plusCommand}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        f
+        className="ml-4"
         data-testid="plusCommand"
       />
     </div>

client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx

@@ -18,7 +18,7 @@ export default function SlashCommandSwitch() {
         id="slashCommand"
         checked={slashCommand}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        f
         data-testid="slashCommand"
       />
     </div>

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

@@ -13,19 +13,19 @@ function Data() {
 
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ImportConversations />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <SharedLinks />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <RevokeAllKeys />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <DeleteCache />
       </div>
-      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ClearChats />
       </div>
     </div>

client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.tsx

@@ -26,7 +26,7 @@ export default function AutoScrollSwitch({
         checked={autoScroll}
         aria-label="Auto-Scroll to latest message on chat open"
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2 ring-ring-primary"
+        className="ml-4"
         data-testid="autoScroll"
       />
     </div>

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

@@ -1,14 +1,12 @@
 import { useRecoilState } from 'recoil';
 import Cookies from 'js-cookie';
 import React, { useContext, useCallback } from 'react';
-import type { TDangerButtonProps } from '~/common';
 import UserMsgMarkdownSwitch from './UserMsgMarkdownSwitch';
 import HideSidePanelSwitch from './HideSidePanelSwitch';
 import { ThemeContext, useLocalize } from '~/hooks';
 import AutoScrollSwitch from './AutoScrollSwitch';
 import ArchivedChats from './ArchivedChats';
 import { Dropdown } from '~/components/ui';
-import DangerButton from '../DangerButton';
 import store from '~/store';
 
 export const ThemeSelector = ({
@@ -41,34 +39,6 @@ export const ThemeSelector = ({
   );
 };
 
-export const ClearChatsButton = ({
-  confirmClear,
-  className = '',
-  showText = true,
-  mutation,
-  onClick,
-}: Pick<
-  TDangerButtonProps,
-  'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
->) => {
-  return (
-    <DangerButton
-      id="clearConvosBtn"
-      mutation={mutation}
-      confirmClear={confirmClear}
-      className={className}
-      showText={showText}
-      infoTextCode="com_nav_clear_all_chats"
-      actionTextCode="com_ui_clear"
-      confirmActionTextCode="com_nav_confirm_clear"
-      dataTestIdInitial="clear-convos-initial"
-      dataTestIdConfirm="clear-convos-confirm"
-      infoDescriptionCode="com_nav_info_clear_all_chats"
-      onClick={onClick}
-    />
-  );
-};
-
 export const LangSelector = ({
   langcode,
   onChange,
@@ -78,7 +48,6 @@ export const LangSelector = ({
 }) => {
   const localize = useLocalize();
 
-  // Create an array of options for the Dropdown
   const languageOptions = [
     { value: 'auto', label: localize('com_nav_lang_auto') },
     { value: 'en-US', label: localize('com_nav_lang_english') },
@@ -147,22 +116,22 @@ function General() {
 
   return (
     <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ThemeSelector theme={theme} onChange={changeTheme} />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <LangSelector langcode={langcode} onChange={changeLang} />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <UserMsgMarkdownSwitch />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <AutoScrollSwitch />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <HideSidePanelSwitch />
       </div>
-      <div className="border-b border-border-light pb-3 last-of-type:border-b-0">
+      <div className="pb-3">
         <ArchivedChats />
       </div>
     </div>

client/src/components/Nav/SettingsTabs/General/HideSidePanelSwitch.tsx

@@ -27,7 +27,7 @@ export default function HideSidePanelSwitch({
         checked={hideSidePanel}
         aria-label="Hide right-most side panel"
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4"
         data-testid="hideSidePanel"
       />
     </div>

client/src/components/Nav/SettingsTabs/General/UserMsgMarkdownSwitch.tsx

@@ -27,7 +27,7 @@ export default function UserMsgMarkdownSwitch({
         id="enableUserMsgMarkdown"
         checked={enableUserMsgMarkdown}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2 ring-ring-primary"
+        className="ml-4"
         data-testid="enableUserMsgMarkdown"
       />
     </div>

client/src/components/Nav/SettingsTabs/index.ts

@@ -1,6 +1,5 @@
 export { default as General } from './General/General';
 export { default as Chat } from './Chat/Chat';
-export { ClearChatsButton } from './General/General';
 export { default as Data } from './Data/Data';
 export { default as Beta } from './Beta/Beta';
 export { default as Commands } from './Commands/Commands';