From 4d4a6b53f14c1fb0a646b656e462d01a196e42d6 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 20 Oct 2024 17:29:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20UI=20Style=20Enhancemen?=
 =?UTF-8?q?ts=20and=20Refactor=20for=20Improved=20Consistency=20and=20Layo?=
 =?UTF-8?q?ut=20(#4471)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🎨 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/Audio/Voices.tsx        | 16 +++----
 .../components/Chat/ExportAndShareMenu.tsx    |  2 +-
 client/src/components/Chat/Input/ChatForm.tsx | 18 ++++----
 .../Chat/Input/Files/AttachFile.tsx           |  2 +-
 .../src/components/Chat/Input/StopButton.tsx  |  2 +-
 .../ConvoOptions/DeleteButton.tsx             |  2 +-
 .../Nav/ExportConversation/ExportModal.tsx    |  7 +--
 client/src/components/Nav/Settings.tsx        |  4 +-
 .../Nav/SettingsTabs/Account/Account.tsx      | 36 +++-------------
 .../Account/DisplayUsernameMessages.tsx       | 31 +++++++++++++
 .../components/Nav/SettingsTabs/Beta/Beta.tsx |  2 +-
 .../Nav/SettingsTabs/Beta/CodeArtifacts.tsx   |  2 +-
 .../components/Nav/SettingsTabs/Chat/Chat.tsx | 14 +++---
 .../Nav/SettingsTabs/Chat/EnterToSend.tsx     |  2 +-
 .../Nav/SettingsTabs/Chat/ForkSettings.tsx    | 40 +++++++++--------
 .../Nav/SettingsTabs/Chat/LaTeXParsing.tsx    |  2 +-
 .../Nav/SettingsTabs/Chat/ModularChat.tsx     |  2 +-
 .../Nav/SettingsTabs/Chat/SaveDraft.tsx       |  2 +-
 .../Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx  |  2 +-
 .../SettingsTabs/Commands/AtCommandSwitch.tsx |  2 +-
 .../Nav/SettingsTabs/Commands/Commands.tsx    |  6 +--
 .../Commands/PlusCommandSwitch.tsx            |  3 +-
 .../Commands/SlashCommandSwitch.tsx           |  2 +-
 .../components/Nav/SettingsTabs/Data/Data.tsx | 10 ++---
 .../SettingsTabs/General/AutoScrollSwitch.tsx |  2 +-
 .../Nav/SettingsTabs/General/General.tsx      | 43 +++----------------
 .../General/HideSidePanelSwitch.tsx           |  2 +-
 .../General/UserMsgMarkdownSwitch.tsx         |  2 +-
 .../src/components/Nav/SettingsTabs/index.ts  |  1 -
 client/src/components/ui/OGDialogTemplate.tsx |  2 +-
 30 files changed, 118 insertions(+), 145 deletions(-)
 create mode 100644 client/src/components/Nav/SettingsTabs/Account/DisplayUsernameMessages.tsx

diff --git a/client/src/components/Audio/Voices.tsx b/client/src/components/Audio/Voices.tsx
index ff37efaa7d..ab6b0a8609 100644
--- a/client/src/components/Audio/Voices.tsx
+++ b/client/src/components/Audio/Voices.tsx
@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 import type { Option } from '~/common';
 import DropdownNoState from '~/components/ui/DropdownNoState';
 import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
+import { Dropdown } from '~/components/ui';
 import { logger } from '~/utils';
 import store from '~/store';
 
@@ -22,13 +23,12 @@ export function EdgeVoiceDropdown() {
   return (
     <div className="flex items-center justify-between">
       <div>{localize('com_nav_voice_select')}</div>
-      <DropdownNoState
+      <Dropdown
         key={`edge-voice-dropdown-${voices.length}`}
-        value={voice}
+        value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
         sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
-        anchor="bottom start"
         testId="EdgeVoiceDropdown"
       />
     </div>
@@ -51,13 +51,12 @@ export function BrowserVoiceDropdown() {
   return (
     <div className="flex items-center justify-between">
       <div>{localize('com_nav_voice_select')}</div>
-      <DropdownNoState
+      <Dropdown
         key={`browser-voice-dropdown-${voices.length}`}
-        value={voice}
+        value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
         sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
-        anchor="bottom start"
         testId="BrowserVoiceDropdown"
       />
     </div>
@@ -80,13 +79,12 @@ export function ExternalVoiceDropdown() {
   return (
     <div className="flex items-center justify-between">
       <div>{localize('com_nav_voice_select')}</div>
-      <DropdownNoState
+      <Dropdown
         key={`external-voice-dropdown-${voices.length}`}
-        value={voice}
+        value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
         sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
-        anchor="bottom start"
         testId="ExternalVoiceDropdown"
       />
     </div>
diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
index 7ef6c2ba2d..52684b0b1a 100644
--- a/client/src/components/Chat/ExportAndShareMenu.tsx
+++ b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -70,7 +70,7 @@ export default function ExportAndShareMenu({
           <Ariakit.MenuButton
             id="export-menu-button"
             aria-label="Export options"
-            className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-md border border-border-light bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+            className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
           >
             <Upload className="icon-md dark:text-gray-300" aria-hidden="true" focusable="false" />
           </Ariakit.MenuButton>
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index a4a0ca61af..fdc8763188 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -131,6 +131,14 @@ const ChatForm = ({ index = 0 }) => {
   const endpointSupportsFiles: boolean = supportsFiles[endpointType ?? endpoint ?? ''] ?? false;
   const isUploadDisabled: boolean = endpointFileConfig?.disabled ?? false;
 
+  const baseClasses =
+    'md:py-3.5 m-0 w-full resize-none bg-surface-tertiary py-[13px] placeholder-black/50 dark:placeholder-white/50 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] max-h-[65vh] md:max-h-[75vh]';
+
+  const uploadActive = endpointSupportsFiles && !isUploadDisabled;
+  const speechClass = isRTL
+    ? `pr-${uploadActive ? '12' : '4'} pl-12`
+    : `pl-${uploadActive ? '12' : '4'} pr-12`;
+
   return (
     <form
       onSubmit={methods.handleSubmit((data) => submitMessage(data))}
@@ -177,15 +185,7 @@ const ChatForm = ({ index = 0 }) => {
                   data-testid="text-input"
                   style={{ height: 44, overflowY: 'auto' }}
                   rows={1}
-                  className={cn(
-                    endpointSupportsFiles && !isUploadDisabled
-                      ? 'pl-10 md:pl-[55px]'
-                      : 'pl-3 md:pl-4',
-                    'md:py-3.5- m-0 w-full resize-none bg-surface-tertiary py-[13px] placeholder-black/50 dark:placeholder-white/50 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]',
-                    SpeechToText && !isRTL ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
-                    'max-h-[65vh] md:max-h-[75vh]',
-                    removeFocusRings,
-                  )}
+                  className={cn(baseClasses, speechClass, removeFocusRings)}
                 />
               )}
             </FileFormWrapper>
diff --git a/client/src/components/Chat/Input/Files/AttachFile.tsx b/client/src/components/Chat/Input/Files/AttachFile.tsx
index e02aeae092..49e5c650de 100644
--- a/client/src/components/Chat/Input/Files/AttachFile.tsx
+++ b/client/src/components/Chat/Input/Files/AttachFile.tsx
@@ -24,7 +24,7 @@ const AttachFile = ({
         disabled={isUploadDisabled}
         className={cn(
           'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
-          isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2',
+          isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
         )}
         description={localize('com_sidepanel_attach_files')}
       >
diff --git a/client/src/components/Chat/Input/StopButton.tsx b/client/src/components/Chat/Input/StopButton.tsx
index 6c785811cd..36cf471c9a 100644
--- a/client/src/components/Chat/Input/StopButton.tsx
+++ b/client/src/components/Chat/Input/StopButton.tsx
@@ -12,7 +12,7 @@ export default function StopButton({ stop, setShowStopButton }) {
         <button
           type="button"
           className={cn(
-            'rounded-full bg-text-primary p-1.5 text-text-primary outline-offset-4 transition-all duration-200 disabled:cursor-not-allowed disabled:text-text-secondary disabled:opacity-10',
+            'rounded-full bg-text-primary p-2 text-text-primary outline-offset-4 transition-all duration-200 disabled:cursor-not-allowed disabled:text-text-secondary disabled:opacity-10',
           )}
           aria-label={localize('com_nav_stop_generating')}
           onClick={(e) => {
diff --git a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
index 589bd4ff30..acbe85e715 100644
--- a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
@@ -52,7 +52,7 @@ export function DeleteConversationDialog({
     <OGDialogTemplate
       showCloseButton={false}
       title={localize('com_ui_delete_conversation')}
-      className="z-[1000] max-w-[450px]"
+      className="max-w-[450px]"
       main={
         <>
           <div className="flex w-full flex-col items-center gap-2">
diff --git a/client/src/components/Nav/ExportConversation/ExportModal.tsx b/client/src/components/Nav/ExportConversation/ExportModal.tsx
index 4bdfbe0993..1eded05ccb 100644
--- a/client/src/components/Nav/ExportConversation/ExportModal.tsx
+++ b/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>
           </>
diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx
index 19f8fe13e7..7ad5fc1866 100644
--- a/client/src/components/Nav/Settings.tsx
+++ b/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}
                   >
diff --git a/client/src/components/Nav/SettingsTabs/Account/Account.tsx b/client/src/components/Nav/SettingsTabs/Account/Account.tsx
index a0fd53445e..374a6b996e 100644
--- a/client/src/components/Nav/SettingsTabs/Account/Account.tsx
+++ b/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>
   );
diff --git a/client/src/components/Nav/SettingsTabs/Account/DisplayUsernameMessages.tsx b/client/src/components/Nav/SettingsTabs/Account/DisplayUsernameMessages.tsx
new file mode 100644
index 0000000000..b72adcdb3f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
index d687efbbd3..268bba2323 100644
--- a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx b/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
index a37b96866c..dd985a86af 100644
--- a/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
+++ b/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}
       />
diff --git a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx b/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
index 71369ce59b..54728f8aab 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx b/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx
index 9e727379cb..b2e1931f65 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx b/client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx
index 84ecc9bb50..a44b3d63c6 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/ForkSettings.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx b/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx
index 1dd2aa61e3..cabe4f006a 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx b/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx
index 5bc84f5ea9..efb001d7ea 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx b/client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx
index 3fa232688f..b5e64ebee7 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx b/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx
index 85681e8c4d..bb4f7f97f7 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx b/client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx
index 175aebfa49..1c4b8242ab 100644
--- a/client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Commands/Commands.tsx b/client/src/components/Nav/SettingsTabs/Commands/Commands.tsx
index 72894d6bc0..8f7b92ed57 100644
--- a/client/src/components/Nav/SettingsTabs/Commands/Commands.tsx
+++ b/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>
         )}
diff --git a/client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx b/client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx
index 4dac34769d..12cf428ae1 100644
--- a/client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx b/client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx
index b612d14963..2051fd033a 100644
--- a/client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Data/Data.tsx b/client/src/components/Nav/SettingsTabs/Data/Data.tsx
index 18c30d14a6..f2ee695504 100644
--- a/client/src/components/Nav/SettingsTabs/Data/Data.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.tsx b/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.tsx
index 294d7ac043..f7cde12eef 100644
--- a/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/General/General.tsx b/client/src/components/Nav/SettingsTabs/General/General.tsx
index 905862d3bb..bf9ff3d8fb 100644
--- a/client/src/components/Nav/SettingsTabs/General/General.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/General/HideSidePanelSwitch.tsx b/client/src/components/Nav/SettingsTabs/General/HideSidePanelSwitch.tsx
index d5854a50ce..645cb0c55e 100644
--- a/client/src/components/Nav/SettingsTabs/General/HideSidePanelSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/General/UserMsgMarkdownSwitch.tsx b/client/src/components/Nav/SettingsTabs/General/UserMsgMarkdownSwitch.tsx
index 411692c515..e751f3cb90 100644
--- a/client/src/components/Nav/SettingsTabs/General/UserMsgMarkdownSwitch.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/index.ts b/client/src/components/Nav/SettingsTabs/index.ts
index a87546c88f..59d28f7675 100644
--- a/client/src/components/Nav/SettingsTabs/index.ts
+++ b/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';
diff --git a/client/src/components/ui/OGDialogTemplate.tsx b/client/src/components/ui/OGDialogTemplate.tsx
index cda5075cb7..4f6d43ead7 100644
--- a/client/src/components/ui/OGDialogTemplate.tsx
+++ b/client/src/components/ui/OGDialogTemplate.tsx
@@ -81,7 +81,7 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
               onClick={selectHandler}
               className={`${
                 selectClasses ?? defaultSelect
-              } flex h-10 w-full items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
+              } flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
             >
               {selectText}
             </OGDialogClose>