🪟 fix+feat: General UI Enhancements (#2619)

* feat: Minor design changes to mimic OpenAI's latest login page

* fix: Optimize ThemeSelector for mobile

* fix: Use a svg for the logo for transperency in dark mode

* feat: Update styles for Registration

* feat: Update error colors for login & registration

* fix: remove medium font

* wip: Dropdown menu

* feat: Update dropdown to match ChatGPT

* feat: Improve rounding and padding

* feat: Add UI Updates to RequestPasswordReset, PasswordRest and increase width for theme dropdown

* fix: Modify the My Files modal's width to not touch the screen

* feat: fix scrolling for dropdown, and make border width lighter

* feat: Match popup menu design to OpenAI (p1/2)

* fix+feat: fix dark mode, add user email, add lighter borders

* fix: Add border color on focus of chat input.

* feat: Move Export Conversation to a seperate button (testing)

* fix: Properly center Login, Registration, Reset Password Flow

* fix: Border colors on dark mode for settings modal

* feat: Improve wording for settings menu

* fix: Optimize settings modal for mobile and fix height for modal

* feat: Optimize for desktop

* fix: make TooltipTrigger asChild of button, improve settings mobile responsiveness

* feat: Handle dropdowns properly
TODO: Make height dynamic, fix dark mode colors

* fix: input styles
fix: make endpoint icon smaller

* feat: Update UI to Match ChatGPT Style

- Updated the dropdown styles to match the aesthetic of ChatGPT.
- Decreased spacing within the conversation area for cleanliness.
- Replaced the current archive icon with the ChatGPT's icon.

* fix: fix colors for EditMenuButton & ArchiveButton for dark mode and light mode

* fix: ui fixes

* fix: Fix Conversation UI Bugs

* fix: transparency of HoverToggle to make buttons not visible

* fix: dark mode HoverToggle & compress menu item spacing

* fix: responsiveness of export icon

* fix: first mentionitem is set to always be highlighted

* fix: improve hover state to text instead of bg

* feat: Update icons to ChatGPT Style

* fix: dark mode hover for PanelFileCell

* fix: change navlinks z-index to 100

* fix: hover states for DataTable

* feat: Move ExportButton to seperate component

* chore: remove unused imports

client/src/components/Nav/Settings.tsx

@@ -16,8 +16,8 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          'shadow-2xl md:min-h-[373px] md:w-[680px]',
-          isSmallScreen ? 'top-20 -translate-y-0' : '',
+          'overflow-hidden shadow-2xl md:min-h-[373px] md:w-[680px]',
+          isSmallScreen ? 'top-5 -translate-y-0' : '',
         )}
       >
         <DialogHeader>
@@ -25,19 +25,19 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
             {localize('com_nav_settings')}
           </DialogTitle>
         </DialogHeader>
-        <div className="px-6">
+        <div className="max-h-[373px] overflow-auto px-6 md:min-h-[373px] md:w-[680px]">
           <Tabs.Root
             defaultValue={SettingsTabValues.GENERAL}
             className="flex flex-col gap-10 md:flex-row"
-            orientation="vertical"
+            orientation="horizontal"
           >
             <Tabs.List
               aria-label="Settings"
               role="tablist"
-              aria-orientation="vertical"
+              aria-orientation="horizontal"
               className={cn(
-                'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col',
-                isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700' : '',
+                'min-w-auto max-w-auto -ml-[8px] flex flex-shrink-0 flex-col flex-wrap overflow-auto sm:max-w-none',
+                isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-800' : '',
               )}
               style={{ outline: 'none' }}
             >
@@ -112,11 +112,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                 {localize('com_nav_setting_account')}
               </Tabs.Trigger>
             </Tabs.List>
-            <General />
-            <Messages />
-            <Beta />
-            <Data />
-            <Account />
+            <div className="h-screen max-h-[373px] overflow-auto sm:w-full sm:max-w-none">
+              <General />
+              <Messages />
+              <Beta />
+              <Data />
+              <Account />
+            </div>
           </Tabs.Root>
         </div>
       </DialogContent>