mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
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>
This commit is contained in:
Marco Beretta
GitHub
parent
1fc896d0bd
commit
ab5c81d063
5 changed files with 17 additions and 26 deletions
|
|
@ -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]" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
open ? '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-[#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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue