style: Beta UI fixes (#1199)

* fix(EditPresetDialog) endpoint menu

* style: update anthropic's icon & removed hover:bg in PresetItems

* style(OptionsPopover) rounded SaveAsPreset

* style(PresetItems) removed hover:bg

* style(NavLinks) match to openai

* style(NavLinks)

* fix(EditPresetDialog): remove empty cn call

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>

client/src/components/Chat/Input/OptionsPopover.tsx

@@ -63,7 +63,7 @@ export default function OptionsPopover({
             <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
               <Button
                 type="button"
-                className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+                className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
                 onClick={saveAsPreset}
               >
                 <Save className="mr-1 w-[14px]" />

client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx

@@ -88,13 +88,8 @@ const EditPresetDialog = ({ open, onOpenChange, title }: Omit<TEditPresetProps,
                   </Label>
                   <Dropdown
                     value={endpoint || ''}
-                    onChange={setOption('endpoint')}
+                    onChange={(value) => setOption('endpoint')(value)}
                     options={availableEndpoints}
-                    className={cn(
-                      defaultTextProps,
-                      'flex h-10 max-h-10 w-full resize-none ',
-                      removeFocusOutlines,
-                    )}
                   />
                 </div>
               </div>

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -31,7 +31,7 @@ const PresetItems: FC<{
     <>
       <div
         role="menuitem"
-        className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]"
+        className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50  md:min-w-[240px]"
         tabIndex={-1}
       >
         <div className="flex h-full grow items-center justify-end gap-2">
@@ -62,7 +62,7 @@ const PresetItems: FC<{
       {presets && presets.length === 0 && (
         <div
           role="menuitem"
-          className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]"
+          className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 md:min-w-[240px]"
           tabIndex={-1}
         >
           <div className="flex h-full grow items-center justify-end gap-2">

client/src/components/Endpoints/MinimalIcon.tsx

@@ -2,11 +2,11 @@ import { EModelEndpoint } from 'librechat-data-provider';
 import {
   AzureMinimalIcon,
   OpenAIMinimalIcon,
-  ChatGPTMinimalIcon,
+  LightningIcon,
   PluginMinimalIcon,
   BingAIMinimalIcon,
   PaLMinimalIcon,
-  AnthropicMinimalIcon,
+  AnthropicIcon,
 } from '~/components/svg';
 import { cn } from '~/utils';
 import { IconProps } from '~/common';
@@ -29,11 +29,11 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
     [EModelEndpoint.gptPlugins]: { icon: <PluginMinimalIcon />, name: 'Plugins' },
     [EModelEndpoint.google]: { icon: <PaLMinimalIcon />, name: props.modelLabel || 'PaLM2' },
     [EModelEndpoint.anthropic]: {
-      icon: <AnthropicMinimalIcon />,
+      icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
       name: props.modelLabel || 'Claude',
     },
     [EModelEndpoint.bingAI]: { icon: <BingAIMinimalIcon />, name: 'BingAI' },
-    [EModelEndpoint.chatGPTBrowser]: { icon: <ChatGPTMinimalIcon />, name: 'ChatGPT' },
+    [EModelEndpoint.chatGPTBrowser]: { icon: <LightningIcon />, name: 'ChatGPT' },
     default: { icon: <OpenAIMinimalIcon />, name: 'UNKNOWN' },
   };
 

client/src/components/Nav/NavLinks.tsx

@@ -8,7 +8,7 @@ import { ExportModel } from './ExportConversation';
 import Settings from './Settings';
 import NavLink from './NavLink';
 import Logout from './Logout';
-import { LinkIcon, DotsIcon, GearIcon } from '~/components';
+import { LinkIcon, GearIcon } from '~/components';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils/';
@@ -50,15 +50,15 @@ export default function NavLinks() {
             )}
             <Menu.Button
               className={cn(
-                'group-ui-open:bg-gray-800 rounded-sd flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-200 hover:bg-gray-800',
+                'group-ui-open:bg-[#202123] duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-[#202123]',
-                open ? 'bg-gray-800' : '',
+                open ? 'bg-[#202123]' : '',
               )}
               data-testid="nav-user"
             >
-              <div className="-ml-0.9 -mt-0.8 h-9 w-8 flex-shrink-0">
+              <div className="-ml-0.9 -mt-0.8 h-8 w-7 flex-shrink-0">
                 <div className="relative flex">
                   <img
-                    className="rounded-sm"
+                    className="rounded-full"
                     src={
                       user?.avatar ||
                       `https://api.dicebear.com/6.x/initials/svg?seed=${
@@ -70,15 +70,11 @@ export default function NavLinks() {
                 </div>
               </div>
               <div
-                className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white"
+                className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white"
                 style={{ marginTop: '-4px', marginLeft: '2px' }}
               >
                 {user?.name || localize('com_nav_user')}
               </div>
-
-              <div style={{ marginBottom: '5px' }}>
-                <DotsIcon />
-              </div>
             </Menu.Button>
 
             <Transition
@@ -90,7 +86,7 @@ export default function NavLinks() {
               leaveFrom="translate-y-0 opacity-100"
               leaveTo="translate-y-2 opacity-0"
             >
-              <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
+              <Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-[#202123] py-1.5 opacity-100 outline-none">
                 <Menu.Item as="div">
                   <NavLink
                     className={cn(
@@ -102,7 +98,7 @@ export default function NavLinks() {
                     clickHandler={clickHandler}
                   />
                 </Menu.Item>
-                <div className="my-1.5 h-px bg-white/20" role="none" />
+                <div className="my-1 h-px bg-white/20" role="none" />
                 <Menu.Item as="div">
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
@@ -119,7 +115,7 @@ export default function NavLinks() {
                     clickHandler={() => setShowSettings(true)}
                   />
                 </Menu.Item>
-                <div className="my-1.5 h-px bg-white/20" role="none" />
+                <div className="my-1 h-px bg-white/20" role="none" />
                 <Menu.Item as="div">
                   <Logout />
                 </Menu.Item>