mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 18:00: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
|
|
@ -106,12 +106,12 @@ export default function Conversation({ conversation, retainView }) {
|
|||
|
||||
const aProps = {
|
||||
className:
|
||||
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800',
|
||||
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-300 dark:bg-gray-800 py-3 px-3 pr-14',
|
||||
};
|
||||
|
||||
if (currentConversation?.conversationId !== conversationId) {
|
||||
aProps.className =
|
||||
'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-900 hover:pr-4';
|
||||
'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-200 dark:hover:bg-gray-800 hover:pr-4';
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -149,7 +149,7 @@ export default function Conversation({ conversation, retainView }) {
|
|||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-black group-hover:from-gray-900" />
|
||||
<div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-gray-50 group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-800" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { useUpdateConversationMutation } from '~/data-provider';
|
|||
import { MinimalIcon } from '~/components/Endpoints';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import DeleteButton from './NewDeleteButton';
|
||||
import DeleteButton from './DeleteButton';
|
||||
import { getEndpointField } from '~/utils';
|
||||
import RenameButton from './RenameButton';
|
||||
import store from '~/store';
|
||||
|
|
@ -103,6 +103,9 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
error: false,
|
||||
className: 'mr-0',
|
||||
isCreatedByUser: false,
|
||||
chatGptLabel: undefined,
|
||||
modelLabel: undefined,
|
||||
jailbreak: undefined,
|
||||
});
|
||||
|
||||
const handleKeyDown = (e: KeyEvent) => {
|
||||
|
|
@ -112,7 +115,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
};
|
||||
|
||||
const aProps = {
|
||||
className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-800 py-2 px-2 ${
|
||||
className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2 ${
|
||||
renaming ? 'pr-14' : ''
|
||||
}`,
|
||||
};
|
||||
|
|
@ -123,7 +126,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
|
||||
if (!activeConvo) {
|
||||
aProps.className =
|
||||
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-900';
|
||||
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-200 dark:hover:bg-gray-800';
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -153,11 +156,11 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
{activeConvo ? (
|
||||
<div
|
||||
className={`absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l ${
|
||||
!renaming ? 'from-gray-800 from-60% to-transparent' : ''
|
||||
!renaming ? 'from-gray-100 from-60% to-transparent dark:from-gray-800' : ''
|
||||
}`}
|
||||
></div>
|
||||
) : (
|
||||
<div className="from--gray-900 absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
|
||||
<div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:w-1 group-hover:from-60% dark:from-gray-900"></div>
|
||||
)}
|
||||
{activeConvo ? (
|
||||
<div className="visible absolute right-1 z-10 flex text-gray-400">
|
||||
|
|
@ -170,7 +173,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-black from-0% to-transparent group-hover:from-gray-900" />
|
||||
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-900" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,9 +38,12 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
|
|||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
|
||||
<button className="p-1 hover:text-black dark:hover:text-white">
|
||||
{renaming ? <CrossIcon /> : <TrashIcon />}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_conversation')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
|
|
@ -56,7 +59,8 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
|
|||
}
|
||||
selection={{
|
||||
selectHandler: confirmDelete,
|
||||
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
|
||||
selectClasses:
|
||||
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { QueryKeys } from 'librechat-data-provider';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import { useLocalize, useConversations, useNewConvo } from '~/hooks';
|
||||
import { useDeleteConversationMutation } from '~/data-provider';
|
||||
import { Dialog, DialogTrigger, Label } from '~/components/ui';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { TrashIcon, CrossIcon } from '~/components/svg';
|
||||
|
||||
export default function DeleteButton({ conversationId, renaming, retainView, title }) {
|
||||
const localize = useLocalize();
|
||||
const queryClient = useQueryClient();
|
||||
// TODO: useNewConvo uses indices so we need to update global index state on every switch to Convo
|
||||
const { newConversation } = useNewConvo();
|
||||
const { refreshConversations } = useConversations();
|
||||
const { conversationId: currentConvoId } = useParams();
|
||||
const deleteConvoMutation = useDeleteConversationMutation();
|
||||
|
||||
const confirmDelete = () => {
|
||||
const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
|
||||
const thread_id = messages?.[messages?.length - 1]?.thread_id;
|
||||
|
||||
deleteConvoMutation.mutate(
|
||||
{ conversationId, thread_id, source: 'button' },
|
||||
{
|
||||
onSuccess: () => {
|
||||
if (currentConvoId == conversationId) {
|
||||
newConversation();
|
||||
}
|
||||
|
||||
refreshConversations();
|
||||
retainView();
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
title={localize('com_ui_delete_conversation')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<>
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
|
||||
{localize('com_ui_delete_conversation_confirm')} <strong>{title}</strong>
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: confirmDelete,
|
||||
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -15,7 +15,9 @@ export default function RenameButton({
|
|||
twcss,
|
||||
}: RenameButtonProps): ReactElement {
|
||||
const handler = renaming ? onRename : renameHandler;
|
||||
const classProp: { className?: string } = { className: 'p-1 hover:text-white' };
|
||||
const classProp: { className?: string } = {
|
||||
className: 'p-1 hover:text-black dark:hover:text-white',
|
||||
};
|
||||
if (twcss) {
|
||||
classProp.className = twcss;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
export { default as Pages } from './Pages';
|
||||
export { default as Conversation } from './Conversation';
|
||||
export { default as DeleteButton } from './DeleteButton';
|
||||
export { default as RenameButton } from './RenameButton';
|
||||
export { default as Conversations } from './Conversations';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue