From d69180aeb83e97ed9905b98b776009faf80cd82f Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Mon, 18 Nov 2024 14:56:48 -0800
Subject: [PATCH] add additional theming options (#3155)

* add additional theming options

* nit

* Update Filters.tsx
---
 web/src/app/chat/ChatPage.tsx                 |  1 +
 .../chat/sessionSidebar/HistorySidebar.tsx    | 22 ++++++++++---------
 .../app/chat/shared_chat_search/FixedLogo.tsx |  2 +-
 .../shared_chat_search/FunctionalWrapper.tsx  |  8 +++----
 web/src/components/Dropdown.tsx               |  4 ++--
 .../components/assistants/StarterMessage.tsx  |  2 +-
 web/src/components/header/LogoType.tsx        |  8 ++++---
 .../components/search/DateRangeSelector.tsx   | 19 ++++++----------
 .../search/filtering/FilterDropdown.tsx       | 10 +++++++--
 .../components/search/filtering/Filters.tsx   |  9 +++++++-
 web/tailwind-themes/tailwind.config.js        | 16 ++++++++++++++
 11 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 3e4354a8ce6..2876775bce1 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -1942,6 +1942,7 @@ export function ChatPage({
                   ref={innerSidebarElementRef}
                   toggleSidebar={toggleSidebar}
                   toggled={toggledSidebar && !settings?.isMobile}
+                  backgroundToggled={toggledSidebar || showDocSidebar}
                   existingChats={chatSessions}
                   currentChatSession={selectedChatSession}
                   folders={folders}
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 9dad5c05079..d2ebf1c07e2 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -33,6 +33,7 @@ interface HistorySidebarProps {
   showDeleteModal?: (chatSession: ChatSession) => void;
   stopGenerating?: () => void;
   explicitlyUntoggle: () => void;
+  backgroundToggled?: boolean;
 }
 
 export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
@@ -51,6 +52,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
       stopGenerating = () => null,
       showShareModal,
       showDeleteModal,
+      backgroundToggled,
     },
     ref: ForwardedRef<HTMLDivElement>
   ) => {
@@ -109,7 +111,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             explicitlyUntoggle={explicitlyUntoggle}
           />
           {page == "chat" && (
-            <div className="mx-3 mt-4 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
+            <div className="mx-3 mt-4 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
               <Link
                 className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
                 href={
@@ -128,7 +130,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
                   }
                 }}
               >
-                <FiEdit className="flex-none " />
+                <FiEdit className="flex-none text-text-history-sidebar-button" />
                 <p className="my-auto flex items-center text-sm">New Chat</p>
               </Link>
               <button
@@ -146,33 +148,33 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
                       });
                     })
                 }
-                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border-border border rounded items-center  hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
               >
-                <FiFolderPlus className="my-auto" />
+                <FiFolderPlus className="my-auto text-text-history-sidebar-button" />
                 <p className="my-auto flex items-center text-sm">New Folder</p>
               </button>
 
               <Link
                 href="/assistants/mine"
-                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
               >
-                <AssistantsIconSkeleton className="h-4 w-4 my-auto" />
+                <AssistantsIconSkeleton className="h-4 w-4 my-auto text-text-history-sidebar-button" />
                 <p className="my-auto flex items-center text-sm">
                   Manage Assistants
                 </p>
               </Link>
               <Link
                 href="/prompts"
-                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
               >
-                <ClosedBookIcon className="h-4 w-4 my-auto" />
-                <p className="my-auto flex items-center text-sm">
+                <ClosedBookIcon className="h-4 w-4 my-auto text-text-history-sidebar-button" />
+                <p className="my-auto flex items-center text-sm ">
                   Manage Prompts
                 </p>
               </Link>
             </div>
           )}
-          <div className="border-b border-border pb-4 mx-3" />
+          <div className="border-b border-divider-history-sidebar-bar pb-4 mx-3" />
           <PagesTab
             newFolderId={newFolderId}
             showDeleteModal={showDeleteModal}
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
index 921220adbd7..5bf48c27794 100644
--- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -49,7 +49,7 @@ export default function FixedLogo({
         </div>
       </Link>
       <div className="mobile:hidden fixed left-2.5 bottom-4">
-        <FiSidebar />
+        <FiSidebar className="text-text-mobile-sidebar" />
       </div>
     </>
   );
diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
index bfa8ef934f3..e8c377dc57f 100644
--- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -47,8 +47,8 @@ const ToggleSwitch = () => {
       <button
         className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
           activeTab === "search"
-            ? "text-gray-800"
-            : "text-gray-500 hover:text-gray-700"
+            ? "text-text-application-toggled"
+            : "text-text-application-untoggled hover:text-text-application-untoggled-hover"
         }`}
         onClick={() => handleTabChange("search")}
       >
@@ -66,8 +66,8 @@ const ToggleSwitch = () => {
       <button
         className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
           activeTab === "chat"
-            ? "text-gray-800"
-            : "text-gray-500 hover:text-gray-700"
+            ? "text-text-application-toggled"
+            : "text-text-application-untoggled hover:text-text-application-untoggled-hover"
         }`}
         onClick={() => handleTabChange("chat")}
       >
diff --git a/web/src/components/Dropdown.tsx b/web/src/components/Dropdown.tsx
index 78867b0dce9..e822632b4eb 100644
--- a/web/src/components/Dropdown.tsx
+++ b/web/src/components/Dropdown.tsx
@@ -262,9 +262,9 @@ export function DefaultDropdownElement({
         my-1
         select-none 
         cursor-pointer 
-        bg-background
+        bg-transparent 
         rounded
-        hover:bg-hover-light
+        hover:bg-hover
       `}
       onClick={onSelect}
     >
diff --git a/web/src/components/assistants/StarterMessage.tsx b/web/src/components/assistants/StarterMessage.tsx
index 8a3a45b9a11..51ad714ba9c 100644
--- a/web/src/components/assistants/StarterMessage.tsx
+++ b/web/src/components/assistants/StarterMessage.tsx
@@ -37,7 +37,7 @@ export function StarterMessages({
                     onClick={() => onSubmit(starterMessage.message)}
                     className={`relative flex ${
                       !isMobile && "w-40"
-                    } flex-col gap-2 rounded-2xl shadow-sm border border-border px-3 py-2 text-start align-to text-wrap text-[15px] shadow-xs transition enabled:hover:bg-background-100 disabled:cursor-not-allowed line-clamp-3`}
+                    } flex-col gap-2 rounded-2xl shadow-sm border border-border bg-background-starter-message px-3 py-2 text-start align-to text-wrap text-[15px] shadow-xs transition enabled:hover:bg-background-starter-message-hover disabled:cursor-not-allowed line-clamp-3`}
                     style={{ height: `5.2rem` }}
                   >
                     {starterMessage.name}
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index 365c734ade9..b235d112d1b 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -51,7 +51,7 @@ export default function LogoType({
           onClick={() => toggleSidebar()}
           className="pt-[2px] flex  gap-x-2 items-center ml-4 desktop:invisible mb-auto"
         >
-          <FiSidebar size={20} />
+          <FiSidebar size={20} className="text-text-mobile-sidebar" />
           {!showArrow && (
             <Logo className="desktop:hidden -my-2" height={24} width={24} />
           )}
@@ -69,13 +69,15 @@ export default function LogoType({
         <div className="max-w-[175px]">
           {enterpriseSettings && enterpriseSettings.application_name ? (
             <div className="w-full">
-              <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
+              <HeaderTitle backgroundToggled={toggled}>
+                {enterpriseSettings.application_name}
+              </HeaderTitle>
               {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
                 <p className="text-xs text-subtle">Powered by Danswer</p>
               )}
             </div>
           ) : (
-            <HeaderTitle>Danswer</HeaderTitle>
+            <HeaderTitle backgroundToggled={toggled}>Danswer</HeaderTitle>
           )}
         </div>
       </div>
diff --git a/web/src/components/search/DateRangeSelector.tsx b/web/src/components/search/DateRangeSelector.tsx
index 0a1368199a3..75f6de2c579 100644
--- a/web/src/components/search/DateRangeSelector.tsx
+++ b/web/src/components/search/DateRangeSelector.tsx
@@ -3,15 +3,18 @@ import { FiCalendar, FiChevronDown, FiXCircle } from "react-icons/fi";
 import { CustomDropdown } from "../Dropdown";
 import { timeRangeValues } from "@/app/config/timeRange";
 import { TimeRangeSelector } from "@/components/filters/TimeRangeSelector";
+import { cn } from "@/lib/utils";
 
 export function DateRangeSelector({
   value,
   onValueChange,
   isHorizontal,
+  className,
 }: {
   value: DateRangePickerValue | null;
   onValueChange: (value: DateRangePickerValue | null) => void;
   isHorizontal?: boolean;
+  className?: string;
 }) {
   return (
     <div>
@@ -19,18 +22,10 @@ export function DateRangeSelector({
         dropdown={
           <TimeRangeSelector
             value={value}
-            className={`
-            border
-            border-border
-            bg-background
-            rounded-lg
-            flex
-            flex-col
-            w-64
-            max-h-96
-            overflow-y-auto
-            flex
-            overscroll-contain`}
+            className={cn(
+              "border border-border bg-background rounded-lg flex flex-col w-64 max-h-96 overflow-y-auto flex overscroll-contain",
+              className
+            )}
             timeRangeValues={timeRangeValues}
             onValueChange={onValueChange}
           />
diff --git a/web/src/components/search/filtering/FilterDropdown.tsx b/web/src/components/search/filtering/FilterDropdown.tsx
index 57c60f836c7..431c92fbb72 100644
--- a/web/src/components/search/filtering/FilterDropdown.tsx
+++ b/web/src/components/search/filtering/FilterDropdown.tsx
@@ -16,6 +16,8 @@ export function FilterDropdown({
   dropdownWidth,
   optionClassName,
   resetValues,
+  backgroundColor,
+  dropdownColor,
 }: {
   options: Option[];
   selected: string[];
@@ -26,6 +28,8 @@ export function FilterDropdown({
   dropdownWidth?: string;
   optionClassName?: string;
   resetValues?: () => void;
+  backgroundColor?: string;
+  dropdownColor?: string;
 }) {
   return (
     <div>
@@ -36,7 +40,7 @@ export function FilterDropdown({
               border 
               border-border 
               rounded-lg 
-              bg-background
+              ${backgroundColor || "bg-background"}
               flex 
               flex-col 
               ${dropdownWidth || width}
@@ -62,7 +66,8 @@ export function FilterDropdown({
                       w-fit
                       text-emphasis
                       gap-x-1
-                      hover:bg-hover-light
+                      ${dropdownColor || "bg-background"}
+                      hover:bg-hover
                       ${
                         ind === options.length - 1
                           ? ""
@@ -99,6 +104,7 @@ export function FilterDropdown({
             gap-x-2
             border-border
             cursor-pointer 
+            ${backgroundColor || "bg-background"}
             hover:bg-hover-light`}
         >
           <div className="flex-none my-auto">{icon}</div>
diff --git a/web/src/components/search/filtering/Filters.tsx b/web/src/components/search/filtering/Filters.tsx
index 8f17a00f5ef..545f5eb18d9 100644
--- a/web/src/components/search/filtering/Filters.tsx
+++ b/web/src/components/search/filtering/Filters.tsx
@@ -429,11 +429,13 @@ export function HorizontalSourceSelector({
           isHorizontal
           value={timeRange}
           onValueChange={setTimeRange}
+          className="bg-background-search-filter"
         />
       </div>
 
       {existingSources.length > 0 && (
         <FilterDropdown
+          backgroundColor="bg-background-search-filter"
           options={listSourceMetadata()
             .filter((source) => existingSources.includes(source.internalName))
             .map((source) => ({
@@ -453,6 +455,7 @@ export function HorizontalSourceSelector({
           }
           icon={<FiMap size={16} />}
           defaultDisplay="Sources"
+          dropdownColor="bg-background-search-filter-dropdown"
           width="w-fit ellipsis truncate"
           resetValues={resetSources}
           dropdownWidth="w-40"
@@ -462,6 +465,7 @@ export function HorizontalSourceSelector({
 
       {availableDocumentSets.length > 0 && (
         <FilterDropdown
+          backgroundColor="bg-background-search-filter"
           options={availableDocumentSets.map((documentSet) => ({
             key: documentSet.name,
             display: <>{documentSet.name}</>,
@@ -471,7 +475,8 @@ export function HorizontalSourceSelector({
           icon={<FiBook size={16} />}
           defaultDisplay="Sets"
           resetValues={resetDocuments}
-          width="w-fit max-w-24 etext-llipsis truncate"
+          width="w-fit max-w-24 text-ellipsis truncate"
+          dropdownColor="bg-background-search-filter-dropdown"
           dropdownWidth="max-w-36 w-fit"
           optionClassName="truncate w-full break-all"
         />
@@ -479,6 +484,7 @@ export function HorizontalSourceSelector({
 
       {availableTags.length > 0 && (
         <FilterDropdown
+          backgroundColor="bg-background-search-filter"
           options={availableTags.map((tag) => ({
             key: `${tag.tag_key}=${tag.tag_value}`,
             display: (
@@ -504,6 +510,7 @@ export function HorizontalSourceSelector({
           icon={<FiTag size={16} />}
           defaultDisplay="Tags"
           resetValues={resetTags}
+          dropdownColor="bg-background-search-filter-dropdown"
           width="w-fit max-w-24 ellipsis truncate"
           dropdownWidth="max-w-80 w-fit"
           optionClassName="truncate w-full break-all ellipsis"
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index c50d77f7073..4f33de65946 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -101,6 +101,13 @@ module.exports = {
         "background-strong": "var(--background-strong)",
         "background-search": "var(--white)",
 
+        "background-history-sidebar-button-hover": "var(--background-200)",
+        "text-history-sidebar-button": "var(--text-800)",
+        "divider-history-sidebar-bar": "var(--border)",
+        "text-mobile-sidebar": "var(--text-800)",
+        "background-search-filter": "var(--background-100)",
+        "background-search-filter-dropdown": "var(--background-100)",
+
         // colors for sidebar in chat, search, and manage settings
         "background-sidebar": "var(--background-100)",
         "background-chatbar": "var(--background-100)",
@@ -108,6 +115,11 @@ module.exports = {
 
         "toggled-background": "var(--background-400)",
         "untoggled-background": "var(--background-200)",
+        "background-starter-message": "var(--background)",
+        "background-starter-message-hover": "var(--background-100)",
+
+        "text-sidebar-toggled-header": "var(--text-800)",
+        "text-sidebar-header": "var(--text-800)",
 
         "background-back-button": "var(--background-200)",
         "text-back-button": "var(--text-800)",
@@ -119,6 +131,10 @@ module.exports = {
         "text-settings-sidebar-strong": "var(--text-900)",
         "background-settings-hover": "var(--background-200)",
 
+        "text-application-toggled": "var(--text-800)",
+        "text-application-untoggled": "var(--text-500)",
+        "text-application-untoggled-hover": "var(--text-700)",
+
         "background-chat-hover": "var(--background-200)",
         "background-chat-selected": "var(--background-200)",