Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 17:30:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🖌️ style: Update Light/Dark UI Themes (#1754)

Browse source 
* 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 2024-03-06 18:05:43 +01:00 • committed by GitHub
parent 2733c5ebe7
commit 911babd3e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
108 changed files with 438 additions and 524 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/SidePanel/Builder/ActionsAuth.tsx
View file

@ -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);

2
client/src/components/SidePanel/Builder/ActionsPanel.tsx
View file

@ -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?');

6
client/src/components/SidePanel/Builder/AssistantPanel.tsx
View file

@ -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 ? (

6
client/src/components/SidePanel/Builder/AssistantSelect.tsx
View file

@ -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">

4
client/src/components/SidePanel/Builder/ContextButton.tsx
View file

@ -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}

4
client/src/components/SidePanel/Builder/Images.tsx
View file

@ -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}

4
client/src/components/SidePanel/Files/PanelTable.tsx
View file

@ -78,7 +78,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
className="max-w-xs dark:border-gray-700"
/>
</div>
<div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10 ">
<div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
<Table className="border-separate border-spacing-0 ">
<TableHeader>
{table.getHeaderGroups().map((headerGroup, index) => (
@ -88,7 +88,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
<TableHead
key={header.id}
style={{ width: index === 0 ? '75%' : '25%' }}
className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-black dark:text-gray-100"
className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-100"
>
{header.isPlaceholder
? null

2
client/src/components/SidePanel/Nav.tsx
View file

@ -75,7 +75,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
variant === 'default'
? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white'
: '',
'data-[state=open]:bg-gray-900 data-[state=open]:text-white dark:data-[state=open]:bg-gray-800',
'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-white',
'w-full justify-start rounded-md border dark:border-gray-600',
)}
>

6
client/src/components/SidePanel/SidePanel.tsx
View file

@ -172,7 +172,7 @@ export default function SidePanel({
localStorage.setItem('react-resizable-panels:collapsed', 'true');
}}
className={cn(
'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-black',
'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
minSize === 0 ? 'min-w-0' : '',
)}
@ -180,12 +180,12 @@ export default function SidePanel({
{keyProvided && (
<div
className={cn(
'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-black',
'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-gray-900',
isCollapsed ? 'h-[52px]' : 'px-2',
)}
>
<Switcher isCollapsed={isCollapsed} />
<Separator className="bg-gray-100/50" />
<Separator className="bg-gray-100/50 dark:bg-gray-600" />
</div>
)}

14
client/src/components/SidePanel/Switcher.tsx
View file

@ -59,7 +59,7 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
isCollapsed
? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
: '',
'bg-white',
'bg-white text-black hover:bg-gray-50 dark:bg-gray-900 dark:text-white',
)}
aria-label={localize('com_sidepanel_select_assistant')}
>
@ -72,16 +72,20 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
/>
</div>
<span className={cn('ml-2', isCollapsed ? 'hidden' : '')}>
<span className={cn('ml-2', isCollapsed ? 'hidden' : '')} style={{ userSelect: 'none' }}>
{assistants.find((assistant) => assistant.id === selectedAssistant)?.name ??
localize('com_sidepanel_select_assistant')}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent className="bg-white">
<SelectContent className="bg-white dark:bg-gray-800">
{assistants.map((assistant) => (
<SelectItem key={assistant.id} value={assistant.id}>
<div className="[&_svg]:text-foreground flex items-center justify-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 ">
<SelectItem
key={assistant.id}
value={assistant.id}
className="hover:bg-gray-50 dark:text-white"
>
<div className="[&_svg]:text-foreground flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0">
<div className="assistant-item overflow-hidden rounded-full ">
<Icon
isCreatedByUser={false}