mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 18:30:15 +01:00
🖌️ style: Update Light/Dark UI Themes (#1754)
* BIG UI UPDATE * fix: search bar, dialog template, new chat icon, convo icon and delete/rename button * moved some color config and a lot of files * small text fixes and tailwind config refactor * Update localization and UI styles * Update styles and add user-select:none to Tooltip component * Update mobile.css styles for navigation mask and background color * Update component imports and styles * Update DeleteButton imports and references * Update UI components * Update tooltip delay duration * Fix styling and update text in various components * fixed assistant style * minor style fixes * revert: removed CreationHeader & CreationPanel * style: match new styling for SidePanel * style: match bg-gray-800 to ChatGPT (#212121) * style: remove slate for gray where applicable to match new light theme --------- Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Marco Beretta
GitHub
parent
2733c5ebe7
commit
911babd3e0
108 changed files with 438 additions and 524 deletions
|
|
@ -42,7 +42,7 @@ export default function ModelItem({
|
|||
<DropdownMenuRadioItem
|
||||
value={value}
|
||||
className={cn(
|
||||
'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800',
|
||||
'group dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800',
|
||||
isSelected ? 'active bg-gray-50 dark:bg-gray-800' : '',
|
||||
)}
|
||||
id={endpoint}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
useCreatePresetMutation,
|
||||
useGetEndpointsQuery,
|
||||
} from 'librechat-data-provider/react-query';
|
||||
import { Icon, EditPresetDialog } from '~/components/Endpoints';
|
||||
import { Icon } from '~/components/Endpoints';
|
||||
import EndpointItems from './EndpointItems';
|
||||
import PresetItems from './PresetItems';
|
||||
import FileUpload from './FileUpload';
|
||||
|
|
@ -37,8 +37,6 @@ export default function NewConversationMenu() {
|
|||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [showPresets, setShowPresets] = useState(true);
|
||||
const [showEndpoints, setShowEndpoints] = useState(true);
|
||||
const [presetModalVisible, setPresetModalVisible] = useState(false);
|
||||
const [preset, setPreset] = useState(false);
|
||||
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
|
||||
const [messages, setMessages] = useRecoilState(store.messages);
|
||||
|
||||
|
|
@ -130,11 +128,6 @@ export default function NewConversationMenu() {
|
|||
newConversation({}, newPreset);
|
||||
};
|
||||
|
||||
const onChangePreset = (preset) => {
|
||||
setPresetModalVisible(true);
|
||||
setPreset(preset);
|
||||
};
|
||||
|
||||
const clearAllPresets = () => {
|
||||
deletePresetsMutation.mutate({ arg: {} });
|
||||
};
|
||||
|
|
@ -158,7 +151,7 @@ export default function NewConversationMenu() {
|
|||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<TooltipProvider delayDuration={250}>
|
||||
<Tooltip>
|
||||
<Dialog className="z-[100]">
|
||||
<DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
|
||||
|
|
@ -180,7 +173,7 @@ export default function NewConversationMenu() {
|
|||
{localize('com_endpoint_open_menu')}
|
||||
</TooltipContent>
|
||||
<DropdownMenuContent
|
||||
className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
|
||||
className="z-[100] w-[375px] dark:bg-gray-800 md:w-96"
|
||||
onCloseAutoFocus={(event) => event.preventDefault()}
|
||||
side="top"
|
||||
>
|
||||
|
|
@ -226,7 +219,7 @@ export default function NewConversationMenu() {
|
|||
<DialogTrigger asChild>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
|
||||
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
|
||||
>
|
||||
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
|
||||
{localize('com_ui_clear')} {localize('com_ui_all')}
|
||||
|
|
@ -257,7 +250,6 @@ export default function NewConversationMenu() {
|
|||
<PresetItems
|
||||
presets={presets}
|
||||
onSelect={onSelectPreset}
|
||||
onChangePreset={onChangePreset}
|
||||
onDeletePreset={onDeletePreset}
|
||||
/>
|
||||
) : (
|
||||
|
|
@ -268,11 +260,6 @@ export default function NewConversationMenu() {
|
|||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<EditPresetDialog
|
||||
open={presetModalVisible}
|
||||
onOpenChange={setPresetModalVisible}
|
||||
preset={preset}
|
||||
/>
|
||||
</Dialog>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
|
|||
<label
|
||||
htmlFor={`file-upload-${id}`}
|
||||
className={cn(
|
||||
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
|
||||
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
|
||||
statusColor,
|
||||
containerClassName,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default function PresetItem({
|
|||
<DropdownMenuRadioItem
|
||||
/* @ts-ignore, value can be an object as well */
|
||||
value={value}
|
||||
className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800 sm:h-auto"
|
||||
className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800 sm:h-auto"
|
||||
>
|
||||
<div className="flex items-center justify-start">
|
||||
{icon}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
|
|||
const localize = useLocalize();
|
||||
const textMap = {
|
||||
[EModelEndpoint.bingAI]: (
|
||||
<small className="break-all text-gray-600">
|
||||
<small className="break-all text-gray-500">
|
||||
{localize('com_endpoint_config_key_get_edge_key')}{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -30,7 +30,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
|
|||
</small>
|
||||
),
|
||||
[EModelEndpoint.chatGPTBrowser]: (
|
||||
<small className="break-all text-gray-600">
|
||||
<small className="break-all text-gray-500">
|
||||
{localize('com_endpoint_config_key_chatgpt')}{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -56,7 +56,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
|
|||
),
|
||||
[EModelEndpoint.google]: (
|
||||
<>
|
||||
<small className="break-all text-gray-600">
|
||||
<small className="break-all text-gray-500">
|
||||
{localize('com_endpoint_config_google_service_key')}
|
||||
{': '}
|
||||
{localize('com_endpoint_config_key_google_need_to')}{' '}
|
||||
|
|
@ -80,7 +80,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
|
|||
{'. '}
|
||||
{localize('com_endpoint_config_key_google_vertex_api_role')}
|
||||
</small>
|
||||
<small className="break-all text-gray-600">
|
||||
<small className="break-all text-gray-500">
|
||||
{localize('com_endpoint_config_google_api_key')}
|
||||
{': '}
|
||||
{localize('com_endpoint_config_google_api_info')}{' '}
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ const SetKeyDialog = ({
|
|||
}
|
||||
selection={{
|
||||
selectHandler: submit,
|
||||
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
|
||||
selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
|
||||
selectText: localize('com_ui_submit'),
|
||||
}}
|
||||
leftButtons={
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default function SubmitButton({
|
|||
if (isSubmitting && isSmallScreen) {
|
||||
return (
|
||||
<button onClick={handleStopGenerating} type="button">
|
||||
<div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<StopGeneratingIcon />
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -93,7 +93,7 @@ export default function SubmitButton({
|
|||
type="button"
|
||||
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
|
||||
>
|
||||
<div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
|
||||
<Settings className="mr-1 inline-block h-auto w-[18px]" />
|
||||
{localize('com_endpoint_config_key_name_placeholder')}
|
||||
|
|
@ -107,7 +107,7 @@ export default function SubmitButton({
|
|||
);
|
||||
} else {
|
||||
return (
|
||||
<TooltipProvider delayDuration={50}>
|
||||
<TooltipProvider delayDuration={250}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -150,11 +150,11 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
|
|||
className="no-gradient-sm fixed bottom-0 left-0 w-full pt-6 sm:bg-gradient-to-b md:absolute md:w-[calc(100%-.5rem)]"
|
||||
style={{
|
||||
background: `linear-gradient(to bottom,
|
||||
${isDark ? 'rgba(52, 53, 65, 0)' : 'rgba(255, 255, 255, 0)'},
|
||||
${isDark ? 'rgba(52, 53, 65, 0.08)' : 'rgba(255, 255, 255, 0.08)'},
|
||||
${isDark ? 'rgba(52, 53, 65, 0.38)' : 'rgba(255, 255, 255, 0.38)'},
|
||||
${isDark ? 'rgba(52, 53, 65, 1)' : 'rgba(255, 255, 255, 1)'},
|
||||
${isDark ? '#343541' : '#ffffff'})`,
|
||||
${isDark ? 'rgba(23, 23, 23, 0)' : 'rgba(255, 255, 255, 0)'},
|
||||
${isDark ? 'rgba(23, 23, 23, 0.08)' : 'rgba(255, 255, 255, 0.08)'},
|
||||
${isDark ? 'rgba(23, 23, 23, 0.38)' : 'rgba(255, 255, 255, 0.38)'},
|
||||
${isDark ? 'rgba(23, 23, 23, 1)' : 'rgba(255, 255, 255, 1)'},
|
||||
${isDark ? '#171717' : '#ffffff'})`,
|
||||
}}
|
||||
>
|
||||
<OptionsBar />
|
||||
|
|
@ -165,8 +165,8 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
|
|||
className={cn(
|
||||
'relative flex flex-grow flex-row rounded-xl border border-black/10 py-[10px] md:py-4 md:pl-4',
|
||||
'shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]',
|
||||
'dark:border-gray-900/50 dark:text-white',
|
||||
disabled ? 'bg-gray-100 dark:bg-gray-900' : 'bg-white dark:bg-gray-700',
|
||||
'dark:border-gray-800/50 dark:text-white',
|
||||
disabled ? 'bg-gray-200 dark:bg-gray-800' : 'bg-white dark:bg-gray-700',
|
||||
)}
|
||||
>
|
||||
<EndpointMenu />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue