Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-03 00:58:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🖌️ style: Improve Dark Theme Accessibility (#2125)

Browse source 
* style: all landing page components

* chore: converted all slate to gray, since slate doesnt work

* style: assistant panel

* style: basic UI components, userprovided, preset

* style: update in multiple components

* fix(PluginStoreDialog): justify-center

* fixed some minor Ui styles

* style(MultiSearch): update dark bg

* style: update Convo styling

* style: lower textarea max height slightly

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Marco Beretta 2024-03-21 14:02:00 +01:00 • committed by GitHub
parent e95c0aaaed
commit 30f6d90cfe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
59 changed files with 170 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
View file

@ -101,7 +101,7 @@ const MenuItem: FC<MenuItemProps> = ({
<>
<div
role="menuitem"
className="group m-1.5 flex max-h-[40px] cursor-pointer 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"
className="group m-1.5 flex max-h-[40px] cursor-pointer 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-gray-600"
tabIndex={-1}
{...rest}
onClick={() => onSelectEndpoint(endpoint)}
@ -132,7 +132,7 @@ const MenuItem: FC<MenuItemProps> = ({
'invisible flex gap-x-1 group-hover:visible',
selected ? 'visible' : '',
expiryTime
? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-800'
? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-600'
: '',
)}
onClick={(e) => {

2
client/src/components/Chat/Menus/EndpointsMenu.tsx
View file

@ -43,7 +43,7 @@ const EndpointsMenu: FC = () => {
<Content
side="bottom"
align="start"
className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[75vh]"
className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-[75vh]"
>
<EndpointItems endpoints={endpoints} selected={endpoint} />
</Content>

10
client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
View file

@ -53,7 +53,7 @@ const EditPresetDialog = ({
main={
<div className="flex w-full flex-col items-center gap-2 md:h-[530px]">
<div className="grid w-full">
<div className="col-span-4 flex items-start md:flex-row justify-start flex-col gap-6 pb-4">
<div className="col-span-4 flex flex-col items-start justify-start gap-6 pb-4 md:flex-row">
<div className="flex w-full flex-col">
<Label htmlFor="preset-name" className="mb-1 text-left text-sm font-medium">
{localize('com_endpoint_preset_name')}
@ -90,13 +90,13 @@ const EditPresetDialog = ({
{'ㅤ'}
</Label>
<PopoverButtons
buttonClass="ml-0 w-full dark:bg-gray-700 dark:hover:bg-gray-800 p-2 h-[40px] justify-center mt-0"
iconClass="hidden lg:block w-4"
buttonClass="ml-0 w-full border border-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 h-[40px] justify-center mt-0"
iconClass="hidden lg:block w-4 "
/>
</div>
</div>
</div>
<div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" />
<div className="my-4 w-full border-t border-gray-300 dark:border-gray-600" />
<div className="w-full p-0">
<EndpointSettings
conversation={preset}
@ -112,7 +112,7 @@ const EditPresetDialog = ({
<div className="mb-6 md:mb-2">
<DialogButton
onClick={exportPreset}
className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600"
className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
>
{localize('com_endpoint_export')}
</DialogButton>

10
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -55,7 +55,7 @@ const PresetItems: FC<{
<DialogTrigger asChild>
<label
htmlFor="file-upload"
className="mr-1 flex h-[32px] 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 dark:hover:text-red-700"
className="mr-1 flex h-[32px] 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-700 dark:hover:text-green-500 dark:hover:text-red-700"
>
<svg
width="24"
@ -87,7 +87,7 @@ const PresetItems: FC<{
}
selection={{
selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-600 text-white',
selectText: localize('com_ui_clear'),
}}
/>
@ -143,7 +143,7 @@ const PresetItems: FC<{
>
<div className="flex h-full items-center justify-end gap-1">
<button
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -153,7 +153,7 @@ const PresetItems: FC<{
<PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
</button>
<button
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -163,7 +163,7 @@ const PresetItems: FC<{
<EditIcon />
</button>
<button
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
className="m-0 h-full rounded-md p-2 text-gray-400 hover:text-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();

6
client/src/components/Chat/Menus/PresetsMenu.tsx
View file

@ -27,8 +27,8 @@ const PresetsMenu: FC = () => {
<Trigger asChild>
<button
className={cn(
'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
'pointer-cursor relative flex flex-col rounded-md border border-gray-100 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
)}
id="presets-button"
@ -52,7 +52,7 @@ const PresetsMenu: FC = () => {
<Content
side="bottom"
align="center"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white md:min-w-[400px]"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white md:min-w-[400px]"
>
<PresetItems
presets={presets}

2
client/src/components/Chat/Menus/UI/MenuItem.tsx
View file

@ -34,7 +34,7 @@ const MenuItem: FC<MenuItemProps> = ({
<div
role="menuitem"
className={cn(
'group m-1.5 flex cursor-pointer 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]',
'group m-1.5 flex cursor-pointer 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-gray-600 md:min-w-[240px]',
className ?? '',
)}
tabIndex={-1}

2
client/src/components/Chat/Menus/UI/TitleButton.tsx
View file

@ -4,7 +4,7 @@ export default function TitleButton({ primaryText = '', secondaryText = '' }) {
return (
<Trigger asChild>
<div
className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20"
className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700"
// type="button"
>
<div>