🖌️ 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>

client/src/components/Messages/Content/CodeBlock.tsx

@@ -20,7 +20,7 @@ type CodeBlockProps = Pick<CodeBarProps, 'lang' | 'plugin' | 'error'> & {
 const CodeBar: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, error, plugin = null }) => {
   const [isCopied, setIsCopied] = useState(false);
   return (
-    <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-900">
+    <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-700 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-700">
       <span className="">{lang}</span>
       {plugin ? (
         <InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-white/50" />
@@ -67,7 +67,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
   const language = plugin || error ? 'json' : lang;
 
   return (
-    <div className="w-full rounded-md bg-black text-xs text-white/80">
+    <div className="w-full rounded-md bg-gray-900 text-xs text-white/80">
       <CodeBar lang={lang} codeRef={codeRef} plugin={!!plugin} error={error} />
       <div className={cn(classProp, 'overflow-y-auto p-4')}>
         <code

client/src/components/Messages/Content/MessageContent.tsx

@@ -18,7 +18,7 @@ const ErrorMessage = ({ text }: TText) => {
   }
   return (
     <Container>
-      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
+      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
         <Error text={text} />
       </div>
     </Container>
@@ -31,7 +31,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
     <div
       className={cn(
         'markdown prose dark:prose-invert light w-full break-words',
-        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
       )}
     >
       {!isCreatedByUser ? (

client/src/components/Messages/Content/Plugin.tsx

@@ -86,7 +86,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
               <div
                 className={cn(
                   plugin.loading ? 'bg-green-100' : 'bg-gray-20',
-                  'my-1 flex items-center rounded p-3 text-xs text-gray-900',
+                  'my-1 flex items-center rounded p-3 text-xs text-gray-800',
                 )}
               >
                 <div>
@@ -94,7 +94,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
                     <div>{generateStatus()}</div>
                   </div>
                 </div>
-                {plugin.loading && <Spinner className="ml-1" />}
+                {plugin.loading && <Spinner className="ml-1 text-black" />}
                 <Disclosure.Button className="ml-12 flex items-center gap-2">
                   <ChevronDownIcon {...iconProps} />
                 </Disclosure.Button>

client/src/components/Messages/HoverButtons.tsx

@@ -51,10 +51,10 @@ export default function HoverButtons({
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
       <button
         className={cn(
-          'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
+          'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
           isCreatedByUser ? '' : 'active',
           hideEditButton ? 'opacity-0' : '',
-          isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
+          isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
         )}
         onClick={onEdit}
         type="button"
@@ -65,7 +65,7 @@ export default function HoverButtons({
       </button>
       <button
         className={cn(
-          'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
+          'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
           isCreatedByUser ? '' : 'active',
         )}
         onClick={() => copyToClipboard(setIsCopied)}
@@ -78,7 +78,7 @@ export default function HoverButtons({
       </button>
       {regenerateEnabled ? (
         <button
-          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
           onClick={regenerate}
           type="button"
           title={localize('com_ui_regenerate')}
@@ -88,7 +88,7 @@ export default function HoverButtons({
       ) : null}
       {continueSupported ? (
         <button
-          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
+          className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}

client/src/components/Messages/Message.tsx

@@ -88,10 +88,10 @@ export default function Message(props: TMessageProps) {
   };
 
   const commonClasses =
-    'w-full border-b text-gray-800 group border-black/10 dark:border-gray-900/50 dark:text-gray-100';
+    'w-full border-b text-gray-800 group border-black/10 dark:border-gray-800/50 dark:text-gray-200';
   const uniqueClasses = isCreatedByUser
     ? 'bg-white dark:bg-gray-800 dark:text-gray-20'
-    : 'bg-gray-50 dark:bg-gray-1000 dark:text-gray-70';
+    : 'bg-gray-50 dark:bg-gray-700 dark:text-gray-100';
 
   const messageProps = {
     className: cn(commonClasses, uniqueClasses),

client/src/components/Messages/MessageHeader.tsx

@@ -90,7 +90,7 @@ const MessageHeader = ({ isSearchView = false }) => {
     <>
       <div
         className={cn(
-          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700',
+          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-800/50 dark:bg-gray-800 dark:hover:bg-gray-700',
           isNotClickable ? '' : 'cursor-pointer',
           'sticky top-0 z-10',
         )}

client/src/components/Messages/Messages.tsx

@@ -84,7 +84,7 @@ export default function Messages({ isSearchView = false }) {
               <Spinner />
             </div>
           ) : _messagesTree?.length == 0 && isSearchView ? (
-            <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
+            <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
               Nothing found
             </div>
           ) : (
@@ -114,7 +114,7 @@ export default function Messages({ isSearchView = false }) {
             </>
           )}
           <div
-            className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50"
+            className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50"
             ref={messagesEndRef}
           />
         </div>