mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-03 09:08:52 +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,7 +106,7 @@ export default function ActionsAuth({
|
|||
{/* Cancel/Save */}
|
||||
<div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse">
|
||||
<button
|
||||
className="btn btn-dark relative"
|
||||
className="btn relative bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
|
||||
onClick={async () => {
|
||||
const result = await trigger(undefined, { shouldFocus: true });
|
||||
setValue('saved_auth_fields', result);
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ export default function ActionsPanel({
|
|||
<button
|
||||
type="button"
|
||||
disabled={!assistant_id || !action.action_id}
|
||||
className="btn btn-neutral relative text-red-500"
|
||||
className="btn relative bg-transparent text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
onClick={() => {
|
||||
if (!assistant_id) {
|
||||
return prompt('No assistant_id found, is the assistant created?');
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@ export default function AssistantPanel({
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setShowToolDialog(true)}
|
||||
className="btn btn-neutral border-token-border-light relative mx-1 mt-2 h-8 rounded-lg font-medium"
|
||||
className="btn border-token-border-light relative mx-1 mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
{localize('com_assistants_add_tools')}
|
||||
|
|
@ -409,7 +409,7 @@ export default function AssistantPanel({
|
|||
}
|
||||
setActivePanel(Panel.actions);
|
||||
}}
|
||||
className="btn btn-neutral border-token-border-light relative mt-2 h-8 rounded-lg font-medium"
|
||||
className="btn border-token-border-light relative mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
{localize('com_assistants_add_actions')}
|
||||
|
|
@ -440,7 +440,7 @@ export default function AssistantPanel({
|
|||
)}
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500"
|
||||
className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
|
||||
type="submit"
|
||||
>
|
||||
{create.isLoading || update.isLoading ? (
|
||||
|
|
|
|||
|
|
@ -166,14 +166,14 @@ export default function AssistantSelect({
|
|||
emptyTitle={true}
|
||||
containerClassName="flex-grow"
|
||||
optionsClass="hover:bg-gray-20/50 dark:border-gray-700"
|
||||
optionsListClass="rounded-lg shadow-lg dark:bg-black dark:border-gray-700 dark:last:border"
|
||||
optionsListClass="rounded-lg shadow-lg dark:bg-gray-900 dark:border-gray-700 dark:last:border"
|
||||
currentValueClass={cn(
|
||||
'text-md font-semibold text-gray-900 dark:text-white',
|
||||
value === '' ? 'text-gray-500' : '',
|
||||
)}
|
||||
className={cn(
|
||||
'mt-1 rounded-md dark:border-gray-700 dark:bg-black',
|
||||
'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-green-500',
|
||||
'mt-1 rounded-md dark:border-gray-700 dark:bg-gray-900',
|
||||
'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-gray-400',
|
||||
)}
|
||||
renderOption={() => (
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export default function ContextButton({
|
|||
<Popover.Trigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
|
||||
'btn border-token-border-light relative h-9 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
type="button"
|
||||
|
|
@ -103,7 +103,7 @@ export default function ContextButton({
|
|||
<Popover.Content
|
||||
side="top"
|
||||
role="menu"
|
||||
className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-black"
|
||||
className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-900 dark:bg-gray-900"
|
||||
style={{ outline: 'none', pointerEvents: 'auto' }}
|
||||
sideOffset={8}
|
||||
tabIndex={-1}
|
||||
|
|
|
|||
|
|
@ -98,12 +98,12 @@ export function AvatarMenu({
|
|||
return (
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-black dark:text-white"
|
||||
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
|
||||
sideOffset={5}
|
||||
>
|
||||
<div
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
|
||||
tabIndex={-1}
|
||||
data-orientation="vertical"
|
||||
onClick={onItemClick}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue