🖌️ style: Update Light/Dark UI Themes (danny-avila#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>
kamaleizhang · Mar 6, 2024 · 911babd · 911babd
1 parent 2733c5e
commit 911babd
Show file tree

Hide file tree

Showing 108 changed files with 438 additions and 524 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="#343541">
+    <meta name="theme-color" content="#171717">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>LibreChat</title>

diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
@@ -44,7 +44,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
             })}
             aria-invalid={!!errors.email}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label
@@ -69,7 +69,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               maxLength: { value: 128, message: localize('com_auth_password_max_length') },
             })}
             aria-invalid={!!errors.password}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label

diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
@@ -64,7 +64,7 @@ const Registration: React.FC = () => {
             validation,
           )}
           aria-invalid={!!errors[id]}
-          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
           placeholder=" "
           data-testid={id}
         ></input>

diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -103,7 +103,7 @@ function RequestPasswordReset() {
                   },
                 })}
                 aria-invalid={!!errors.email}
-                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                 placeholder=" "
               ></input>
               <label

diff --git a/client/src/components/Auth/ResetPassword.tsx b/client/src/components/Auth/ResetPassword.tsx
@@ -115,7 +115,7 @@ function ResetPassword() {
                     },
                   })}
                   aria-invalid={!!errors.password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label
@@ -149,7 +149,7 @@ function ResetPassword() {
                       value === password || localize('com_auth_password_not_match'),
                   })}
                   aria-invalid={!!errors.confirm_password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label

diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
@@ -43,7 +43,7 @@ export default function ChatForm({ index = 0 }) {
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
         <div className="flex w-full items-center">
-          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(52,53,65,0.95)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(23,23,23,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.1)]">
             <FileRow
               files={files}
               setFiles={setFiles}

diff --git a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
@@ -1,6 +1,6 @@
 export default function DragDropOverlay() {
   return (
-    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-100 opacity-80 dark:bg-gray-800 dark:text-gray-100">
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-200 opacity-80 dark:bg-gray-800 dark:text-gray-200">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 132 108"

diff --git a/client/src/components/Chat/Input/OptionsPopover.tsx b/client/src/components/Chat/Input/OptionsPopover.tsx
@@ -56,14 +56,14 @@ export default function OptionsPopover({
           <div
             className={cn(
               cardStyle,
-              'dark:bg-gray-900',
+              'dark:bg-gray-800',
               'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
             )}
           >
-            <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
+            <div className="flex w-full items-center bg-gray-50 px-2 py-2 dark:bg-gray-800/60">
               <Button
                 type="button"
-                className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+                className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700"
                 onClick={saveAsPreset}
               >
                 <Save className="mr-1 w-[14px]" />
@@ -73,7 +73,7 @@ export default function OptionsPopover({
               <Button
                 type="button"
                 className={cn(
-                  'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
+                  'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
                   removeFocusOutlines,
                 )}
                 onClick={closePopover}

diff --git a/client/src/components/Chat/Input/PopoverButtons.tsx b/client/src/components/Chat/Input/PopoverButtons.tsx
@@ -79,7 +79,7 @@ export default function PopoverButtons({
           type="button"
           className={cn(
             button.buttonClass,
-            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
+            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
             buttonClass ?? '',
           )}
           onClick={button.handler}

diff --git a/client/src/components/Chat/Input/SendButton.tsx b/client/src/components/Chat/Input/SendButton.tsx
@@ -1,19 +1,32 @@
 import { SendIcon } from '~/components/svg';
 import { cn } from '~/utils';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
+import { useLocalize } from '~/hooks';
 
 export default function SendButton({ text, disabled }) {
+  const localize = useLocalize();
+
   return (
-    <button
-      disabled={!text || disabled}
-      className={cn(
-        'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-gray-900 dark:disabled:bg-white dark:disabled:hover:bg-transparent md:bottom-3 md:right-3',
-      )}
-      data-testid="send-button"
-      type="submit"
-    >
-      <span className="" data-state="closed">
-        <SendIcon size={24} />
-      </span>
-    </button>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            disabled={!text || disabled}
+            className={cn(
+              'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
+            )}
+            data-testid="send-button"
+            type="submit"
+          >
+            <span className="" data-state="closed">
+              <SendIcon size={24} />
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={10}>
+          {localize('com_nav_send_message')}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
diff --git a/client/src/components/Chat/Input/StopButton.tsx b/client/src/components/Chat/Input/StopButton.tsx
@@ -5,7 +5,7 @@ export default function StopButton({ stop, setShowStopButton }) {
         <div className="flex h-full flex-row items-center justify-center gap-3">
           <button
             type="button"
-            className="border-gizmo-gray-950 rounded-full border-2 p-1 dark:border-gray-200"
+            className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
             aria-label="Stop generating"
             onClick={(e) => {
               setShowStopButton(false);
@@ -16,7 +16,7 @@ export default function StopButton({ stop, setShowStopButton }) {
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
               fill="currentColor"
-              className="text-gizmo-gray-950 h-2 w-2 dark:text-gray-200"
+              className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
               height="16"
               width="16"
             >

diff --git a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx b/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
@@ -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-900'
+                      ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-800'
                       : '',
                   )}
                   onClick={(e) => {

diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
@@ -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-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 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-800 dark:text-white lg:max-h-[75vh]"
           >
             <EndpointItems endpoints={endpoints} selected={endpoint} />
           </Content>

diff --git a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
@@ -92,7 +92,7 @@ const EditPresetDialog = ({
                 </div>
               </div>
             </div>
-            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
+            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" />
             <div className="w-full p-0">
               <EndpointSettings
                 conversation={preset}
@@ -106,12 +106,15 @@ const EditPresetDialog = ({
         }
         buttons={
           <div className="mb-6 md:mb-2">
-            <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
+            <DialogButton
+              onClick={exportPreset}
+              className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600"
+            >
               {localize('com_endpoint_export')}
             </DialogButton>
             <DialogClose
               onClick={submitPreset}
-              className="dark:hover:gray-400 ml-2 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
+              className="ml-2 bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
             >
               {localize('com_ui_save')}
             </DialogClose>

diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
@@ -9,7 +9,7 @@ import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
 import { PinIcon, EditIcon, TrashIcon } from '~/components/svg';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { getPresetTitle, getEndpointField } from '~/utils';
-import { Dialog, DialogTrigger } from '~/components/ui/';
+import { Dialog, DialogTrigger, Label } from '~/components/ui/';
 import { MenuSeparator, MenuItem } from '../UI';
 import { icons } from '../Endpoints/Icons';
 import { useLocalize } from '~/hooks';
@@ -55,21 +55,32 @@ 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-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                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"
               >
                 <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
                 {localize('com_ui_clear')} {localize('com_ui_all')}
               </label>
             </DialogTrigger>
             <DialogTemplate
+              showCloseButton={false}
               title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
-              description={localize('com_endpoint_presets_clear_warning')}
+              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_endpoint_presets_clear_warning')}
+                      </Label>
+                    </div>
+                  </div>
+                </>
+              }
               selection={{
                 selectHandler: clearAllPresets,
                 selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
                 selectText: localize('com_ui_clear'),
               }}
-              className="max-w-[500px]"
             />
             <FileUpload onFileSelected={onFileSelected} />
           </Dialog>
@@ -124,7 +135,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 px-4 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 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -134,7 +145,7 @@ const PresetItems: FC<{
                           <PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 px-4 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 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -144,7 +155,7 @@ const PresetItems: FC<{
                           <EditIcon />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 px-4 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 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();