Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-31 15:48:51 +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

82
client/src/style.css
View file

@ -1045,24 +1045,6 @@ button {
--tw-bg-opacity: 1;
background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
}
.btn-secondary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 transparent);
}
.btn-secondary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-secondary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-neutral {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
@ -1077,48 +1059,17 @@ button {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
}
.btn-neutral:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 transparent);
}
.btn-neutral.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.btn-neutral:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.dark .btn-neutral {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
color: rgba(217, 217, 227, var(--tw-text-opacity));
background-color: transparent;
border-color: rgba(38, 38, 38, var(--tw-border-opacity));
color: rgba(255, 255, 240, var(--tw-text-opacity));
}
.dark .btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
}
.btn-dark {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
border-width: 1px;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.btn-dark:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
background-color: rgba(23, 23, 23, var(--tw-bg-opacity));
}
.btn-small {
padding: 0.25rem 0.5rem;
@ -1170,7 +1121,7 @@ html {
.dark body,
.dark html {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
background-color: rgba(23, 23, 23, var(--tw-bg-opacity));
}
#__next,
@ -1691,17 +1642,18 @@ button.scroll-convo {
:root {
--white:#fff;
--black:#000;
--gray-200:#ececf1;
--gray-50:#f7f7f8;
--gray-100:#ececf1;
--gray-200:#d9d9e3;
--gray-300:#c5c5d2;
--gray-400:#acacbe;
--gray-500:#8e8ea0;
--gray-600:#565869;
--gray-700:#40414f;
--gray-800:#343541;
--gray-900:#202123;
--gray-950:#050509;
--gray-100:#ececec;
--gray-200:#e3e3e3;
--gray-300:#cdcdcd;
--gray-400:#999696;
--gray-500:#686262;
--gray-600:#3d3d3f;
--gray-700:#262626;
--gray-750:#333333;
--gray-800:#171717;
--gray-900:#0d0d0d;
--gizmo-gray-500:#999;
--gizmo-gray-600:#666;
--gizmo-gray-950:#0f0f0f
@ -1756,7 +1708,7 @@ html {
}
.text-token-text-primary {
color:#343541;
color:#171717;
color:var(--text-primary)
}
.text-token-text-secondary {