From f5adc3063ef6f4f753f18a766b7f6542f53f748f Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Tue, 24 Sep 2024 11:01:08 -0700
Subject: [PATCH] Update theming (#2552)

* update theming

* update

* update theming
---
 backend/danswer/server/manage/llm/api.py      |   2 +-
 web/src/app/chat/ChatPage.tsx                 |   8 +-
 web/src/app/chat/input/ChatInputBar.tsx       |   8 +-
 web/src/app/chat/message/Messages.tsx         |   6 +-
 .../chat/sessionSidebar/HistorySidebar.tsx    |   5 +-
 web/src/app/chat/sessionSidebar/PagesTab.tsx  |   8 +-
 .../shared_chat_search/BlurBackground.tsx     |   7 ++
 web/src/app/globals.css                       |   6 +-
 web/src/components/BasicClickable.tsx         |   1 -
 web/src/components/admin/ClientLayout.tsx     | 106 ++++++++++++++----
 .../admin/connectors/AdminSidebar.tsx         |   6 +-
 web/src/components/header/LogoType.tsx        |   5 +-
 web/src/components/search/DocumentDisplay.tsx |   2 +-
 web/src/components/search/SearchBar.tsx       |  72 +++---------
 .../search/SearchResultsDisplay.tsx           |   4 +-
 web/src/components/search/SearchSection.tsx   |   4 +-
 .../search/filtering/FilterDropdown.tsx       |  39 ++++---
 .../components/search/filtering/TagFilter.tsx |   2 +-
 web/tailwind-themes/tailwind.config.js        |  38 ++++++-
 19 files changed, 201 insertions(+), 128 deletions(-)
 create mode 100644 web/src/app/chat/shared_chat_search/BlurBackground.tsx

diff --git a/backend/danswer/server/manage/llm/api.py b/backend/danswer/server/manage/llm/api.py
index e0d80433d0e..23f16047e91 100644
--- a/backend/danswer/server/manage/llm/api.py
+++ b/backend/danswer/server/manage/llm/api.py
@@ -125,7 +125,7 @@ def list_llm_providers(
 def put_llm_provider(
     llm_provider: LLMProviderUpsertRequest,
     is_creation: bool = Query(
-        True,
+        False,
         description="True if updating an existing provider, False if creating a new one",
     ),
     _: User | None = Depends(current_admin_user),
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 403c40b3dc4..29c80b48a40 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -104,6 +104,7 @@ import {
   classifyAssistants,
   orderAssistantsForUser,
 } from "@/lib/assistants/utils";
+import BlurBackground from "./shared_chat_search/BlurBackground";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
@@ -1833,6 +1834,7 @@ export function ChatPage({
           onClose={() => setSharingModalVisible(false)}
         />
       )}
+
       <div className="fixed inset-0 flex flex-col text-default">
         <div className="h-[100dvh] overflow-y-hidden">
           <div className="w-full">
@@ -1842,7 +1844,7 @@ export function ChatPage({
                 flex-none
                 fixed
                 left-0
-                z-30
+                z-40
                 bg-background-100
                 h-screen
                 transition-all
@@ -1876,6 +1878,10 @@ export function ChatPage({
             </div>
           </div>
 
+          <BlurBackground
+            visible={!untoggled && (showDocSidebar || toggledSidebar)}
+          />
+
           <div
             ref={masterFlexboxRef}
             className="flex h-full w-full overflow-x-hidden"
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
index 77b85509dbc..64535d82b20 100644
--- a/web/src/app/chat/input/ChatInputBar.tsx
+++ b/web/src/app/chat/input/ChatInputBar.tsx
@@ -382,7 +382,8 @@ export function ChatInputBar({
               border
               border-[#E5E7EB]
               rounded-lg
-              bg-background-100
+              text-text-chatbar
+              bg-background-chatbar
               [&:has(textarea:focus)]::ring-1
               [&:has(textarea:focus)]::ring-black
             "
@@ -477,7 +478,8 @@ export function ChatInputBar({
                 resize-none
                 rounded-lg
                 border-0
-                bg-background-100
+                bg-background-chatbar
+                placeholder:text-text-chatbar-subtle
                 ${
                   textAreaRef.current &&
                   textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
@@ -634,7 +636,7 @@ export function ChatInputBar({
                 >
                   <SendIcon
                     size={28}
-                    className={`text-emphasis text-white p-1 rounded-full  ${chatState == "input" && message ? "bg-background-800" : "bg-background-400"} `}
+                    className={`text-emphasis text-white p-1 rounded-full  ${chatState == "input" && message ? "bg-submit-background" : "bg-disabled-submit-background"} `}
                   />
                 </button>
               )}
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index 9998c22465a..edb18138c79 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -686,7 +686,9 @@ export const HumanMessage = ({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className={`mx-auto ${shared ? "w-full" : "w-[90%]"} max-w-[790px]`}>
+      <div
+        className={`text-user-text mx-auto ${shared ? "w-full" : "w-[90%]"} max-w-[790px]`}
+      >
         <div className="xl:ml-8">
           <div className="flex flex-col mr-4">
             <FileDisplay alignBubble files={files || []} />
@@ -704,7 +706,7 @@ export const HumanMessage = ({
                       border 
                       border-border 
                       rounded-lg 
-                      bg-background-emphasis 
+                      bg-background-emphasis
                       pb-2
                       [&:has(textarea:focus)]::ring-1
                       [&:has(textarea:focus)]::ring-black
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 6096dcc9870..beb45e1775e 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -87,13 +87,12 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
     return (
       <>
         {popup}
-
         <div
           ref={ref}
           className={`
             flex
             flex-none
-            bg-background-100
+            bg-background-sidebar
             w-full
             border-r 
             border-border 
@@ -101,7 +100,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             flex-col relative
             h-screen
             transition-transform 
-            mt-2`}
+            pt-2`}
         >
           <LogoType
             showArrow={true}
diff --git a/web/src/app/chat/sessionSidebar/PagesTab.tsx b/web/src/app/chat/sessionSidebar/PagesTab.tsx
index ed1c3e4a1b0..e6612a96c8d 100644
--- a/web/src/app/chat/sessionSidebar/PagesTab.tsx
+++ b/web/src/app/chat/sessionSidebar/PagesTab.tsx
@@ -66,7 +66,7 @@ export function PagesTab({
   const isHistoryEmpty = !existingChats || existingChats.length === 0;
 
   return (
-    <div className="mb-1 ml-3 relative miniscroll mobile:pb-40 overflow-y-auto h-full">
+    <div className="mb-1 text-text-sidebar ml-3 relative miniscroll mobile:pb-40 overflow-y-auto h-full">
       {folders && folders.length > 0 && (
         <div className="py-2 border-b border-border">
           <div className="text-xs text-subtle flex pb-0.5 mb-1.5 mt-2 font-bold">
@@ -92,14 +92,14 @@ export function PagesTab({
         } rounded-md`}
       >
         {(page == "chat" || page == "search") && (
-          <p className="my-2 text-xs text-subtle flex font-bold">
+          <p className="my-2 text-xs text-sidebar-subtle flex font-bold">
             {page == "chat" && "Chat "}
             {page == "search" && "Search "}
             History
           </p>
         )}
         {isHistoryEmpty ? (
-          <p className="text-sm text-subtle mt-2 w-[250px]">
+          <p className="text-sm mt-2 w-[250px]">
             {page === "search"
               ? "Try running a search! Your search history will appear here."
               : "Try sending a message! Your chat history will appear here."}
@@ -111,7 +111,7 @@ export function PagesTab({
                 return (
                   <div key={dateRange}>
                     <div
-                      className={`text-xs text-subtle ${
+                      className={`text-xs text-text-sidebar-subtle ${
                         ind != 0 && "mt-5"
                       } flex pb-0.5 mb-1.5 font-medium`}
                     >
diff --git a/web/src/app/chat/shared_chat_search/BlurBackground.tsx b/web/src/app/chat/shared_chat_search/BlurBackground.tsx
new file mode 100644
index 00000000000..e3e01296d70
--- /dev/null
+++ b/web/src/app/chat/shared_chat_search/BlurBackground.tsx
@@ -0,0 +1,7 @@
+export default function BlurBackground({ visible }: { visible: boolean }) {
+  return (
+    <div
+      className={`desktop:hidden w-full h-full fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-30 transition-opacity duration-300 ease-in-out ${visible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
+    />
+  );
+}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 49142d065f6..145263ee359 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -75,8 +75,12 @@
     /* blue-700 - Dark blue */
     --error: #ef4444;
     /* red-500 - Bright red */
-    --success: #059669;
+    --undo: #ef4444;
+    /* red-500 - Bright red */
+    --success: #030706;
     /* emerald-600 - Deep green */
+    --light-success: #22c55e;
+    /* green-500 */
     --alert: #f59e0b;
     /* amber-600 - Orange */
     --accent: #6366f1;
diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
index ffefc8b6310..650baf7dc90 100644
--- a/web/src/components/BasicClickable.tsx
+++ b/web/src/components/BasicClickable.tsx
@@ -91,7 +91,6 @@ export function BasicSelectable({
       className={`
         rounded
         font-medium 
-        text-emphasis 
         text-sm
         ${padding == "normal" && "p-1"}
         ${padding == "extra" && "p-1.5"}
diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
index c50e08716de..961f5a9c21b 100644
--- a/web/src/components/admin/ClientLayout.tsx
+++ b/web/src/components/admin/ClientLayout.tsx
@@ -55,7 +55,7 @@ export function ClientLayout({
   return (
     <div className="h-screen overflow-y-hidden">
       <div className="flex h-full">
-        <div className="flex-none w-[250px] z-20 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto">
+        <div className="flex-none text-text-settings-sidebar bg-background-settings-sidebar w-[250px] z-20 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto">
           <AdminSidebar
             collections={[
               {
@@ -64,7 +64,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <NotebookIconSkeleton size={18} />
+                        <NotebookIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1">Existing Connectors</div>
                       </div>
                     ),
@@ -73,7 +76,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <ConnectorIconSkeleton size={18} />
+                        <ConnectorIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1.5">Add Connector</div>
                       </div>
                     ),
@@ -87,7 +93,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <DocumentSetIconSkeleton size={18} />
+                        <DocumentSetIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1">Document Sets</div>
                       </div>
                     ),
@@ -96,7 +105,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <ZoomInIconSkeleton size={18} />
+                        <ZoomInIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1">Explorer</div>
                       </div>
                     ),
@@ -105,7 +117,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <ThumbsUpIconSkeleton size={18} />
+                        <ThumbsUpIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1">Feedback</div>
                       </div>
                     ),
@@ -119,7 +134,10 @@ export function ClientLayout({
                   {
                     name: (
                       <div className="flex">
-                        <AssistantsIconSkeleton className="my-auto" size={18} />
+                        <AssistantsIconSkeleton
+                          className="text-icon-settings-sidebar"
+                          size={18}
+                        />
                         <div className="ml-1">Assistants</div>
                       </div>
                     ),
@@ -130,7 +148,7 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <SlackIconSkeleton />
+                              <SlackIconSkeleton className="text-icon-settings-sidebar" />
                               <div className="ml-1">Slack Bots</div>
                             </div>
                           ),
@@ -139,7 +157,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <ToolIconSkeleton size={18} />
+                              <ToolIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Tools</div>
                             </div>
                           ),
@@ -148,7 +169,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <ClosedBookIcon size={18} />
+                              <ClosedBookIcon
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Prompt Library</div>
                             </div>
                           ),
@@ -161,7 +185,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <ClipboardIcon size={18} />
+                              <ClipboardIcon
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Standard Answers</div>
                             </div>
                           ),
@@ -179,7 +206,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <GroupsIconSkeleton size={18} />
+                              <GroupsIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Groups</div>
                             </div>
                           ),
@@ -197,7 +227,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <CpuIconSkeleton size={18} />
+                              <CpuIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">LLM</div>
                             </div>
                           ),
@@ -207,7 +240,7 @@ export function ClientLayout({
                           error: settings?.settings.needs_reindexing,
                           name: (
                             <div className="flex">
-                              <SearchIcon />
+                              <SearchIcon className="text-icon-settings-sidebar" />
                               <div className="ml-1">Search Settings</div>
                             </div>
                           ),
@@ -221,7 +254,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <UsersIconSkeleton size={18} />
+                              <UsersIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Users</div>
                             </div>
                           ),
@@ -232,7 +268,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <GroupsIconSkeleton size={18} />
+                                    <GroupsIconSkeleton
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">Groups</div>
                                   </div>
                                 ),
@@ -241,7 +280,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <KeyIconSkeleton size={18} />
+                                    <KeyIconSkeleton
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">API Keys</div>
                                   </div>
                                 ),
@@ -252,7 +294,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <ShieldIconSkeleton size={18} />
+                              <ShieldIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Token Rate Limits</div>
                             </div>
                           ),
@@ -268,7 +313,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <FiActivity size={18} />
+                                    <FiActivity
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">Usage Statistics</div>
                                   </div>
                                 ),
@@ -277,7 +325,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <DatabaseIconSkeleton size={18} />
+                                    <DatabaseIconSkeleton
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">Query History</div>
                                   </div>
                                 ),
@@ -286,7 +337,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <FiBarChart2 size={18} />
+                                    <FiBarChart2
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">Custom Analytics</div>
                                   </div>
                                 ),
@@ -302,7 +356,10 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <SettingsIconSkeleton size={18} />
+                              <SettingsIconSkeleton
+                                className="text-icon-settings-sidebar"
+                                size={18}
+                              />
                               <div className="ml-1">Workspace Settings</div>
                             </div>
                           ),
@@ -313,7 +370,10 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <PaintingIconSkeleton size={18} />
+                                    <PaintingIconSkeleton
+                                      className="text-icon-settings-sidebar"
+                                      size={18}
+                                    />
                                     <div className="ml-1">Whitelabeling</div>
                                   </div>
                                 ),
diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
index 5b1a8adc831..7ada0e52ed9 100644
--- a/web/src/components/admin/connectors/AdminSidebar.tsx
+++ b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -36,7 +36,7 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
   const enterpriseSettings = combinedSettings.enterpriseSettings;
 
   return (
-    <div className="pl-0">
+    <div className="text-text-settings-sidebar pl-0">
       <nav className="space-y-2">
         <div className="w-full justify-center mb-4 flex">
           <div className="w-52">
@@ -89,13 +89,13 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
             className="flex flex-col items-center justify-center w-full"
             key={collectionInd}
           >
-            <h2 className="text-xs text-strong w-52 font-bold pb-2">
+            <h2 className="text-xs text-text-settings-sidebar-strong w-52 font-bold pb-2">
               <div>{collection.name}</div>
             </h2>
             {collection.items.map((item) => (
               <Link key={item.link} href={item.link}>
                 <button
-                  className={`  text-sm block  flex gap-x-2 items-center w-52 py-2.5 px-2 text-left hover:bg-hover rounded`}
+                  className={`text-sm block flex gap-x-2 items-center w-52 py-2.5 px-2 text-left hover:bg-background-settings-hover rounded`}
                 >
                   {item.name}
                   {item.error && (
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index 29a4bfedea5..522aace1861 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -42,9 +42,12 @@ export default function LogoType({
       {toggleSidebar && page == "chat" ? (
         <button
           onClick={() => toggleSidebar()}
-          className="pt-[2px] ml-4 desktop:invisible mb-auto"
+          className="pt-[2px] flex  gap-x-2 items-center ml-4 desktop:invisible mb-auto"
         >
           <FiSidebar size={20} />
+          {!showArrow && (
+            <Logo className="desktop:hidden -my-2" height={24} width={24} />
+          )}
         </button>
       ) : (
         <div className="mr-1 invisible mb-auto h-6 w-6">
diff --git a/web/src/components/search/DocumentDisplay.tsx b/web/src/components/search/DocumentDisplay.tsx
index 5b8afac850a..52b4f935395 100644
--- a/web/src/components/search/DocumentDisplay.tsx
+++ b/web/src/components/search/DocumentDisplay.tsx
@@ -206,7 +206,7 @@ export const DocumentDisplay = ({
         {!hide && (document.is_relevant || additional_relevance?.relevant) && (
           <FaStar
             size={16}
-            className="h-full text-xs text-accent rounded w-fit my-auto select-none ml-auto mr-2"
+            className="h-full text-xs text-star-indicator rounded w-fit my-auto select-none ml-auto mr-2"
           />
         )}
       </div>
diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index e15319931a6..6f3831b4f80 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -4,7 +4,6 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
 interface FullSearchBarProps {
   disabled: boolean;
   query: string;
-  setPopup: (popupSpec: PopupSpec | null) => void;
   setQuery: (query: string) => void;
   onSearch: (fast?: boolean) => void;
   agentic?: boolean;
@@ -16,19 +15,15 @@ interface FullSearchBarProps {
   finalAvailableSources: string[];
   tags: Tag[];
   showingSidebar: boolean;
-  previousSearch: string;
 }
 
-import { useState, useEffect, useRef } from "react";
+import { useRef } from "react";
 import { SendIcon } from "../icons/icons";
 import { Divider } from "@tremor/react";
 import { CustomTooltip } from "../tooltip/CustomTooltip";
 import KeyboardSymbol from "@/lib/browserUtilities";
-import { SettingsContext } from "../settings/SettingsProvider";
-import { HorizontalSourceSelector, SourceSelector } from "./filtering/Filters";
+import { HorizontalSourceSelector } from "./filtering/Filters";
 import { CCPairBasicInfo, DocumentSet, Tag } from "@/lib/types";
-import { SourceMetadata } from "@/lib/search/interfaces";
-import { PopupSpec } from "../admin/connectors/Popup";
 
 export const AnimatedToggle = ({
   isOn,
@@ -38,24 +33,9 @@ export const AnimatedToggle = ({
   handleToggle: () => void;
 }) => {
   const commandSymbol = KeyboardSymbol();
-
-  const [width, setWidth] = useState("auto");
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current && contentRef.current) {
-        const newWidth = contentRef.current.scrollWidth;
-        setWidth(`${newWidth}px`);
-      }
-    };
-
-    updateWidth();
-    window.addEventListener("resize", updateWidth);
-    return () => window.removeEventListener("resize", updateWidth);
-  }, [isOn]);
-
   return (
     <CustomTooltip
       light
@@ -81,14 +61,11 @@ export const AnimatedToggle = ({
     >
       <div
         ref={containerRef}
-        className="my-auto ml-auto flex jusitfy-end items-center cursor-pointer transition-all duration-300 ease-in-out overflow-hidden"
-        style={{ width }}
+        className="my-auto ml-auto flex justify-end items-center cursor-pointer"
         onClick={handleToggle}
       >
-        <div
-          ref={contentRef}
-          className={`flex group ml-auto items-center transition-all duration-300 ease-in-out ml-auto`}
-        >
+        <div ref={contentRef} className="flex items-center">
+          {/* Toggle switch */}
           <div
             className={`
             w-10 h-6 flex items-center rounded-full p-1 transition-all duration-300 ease-in-out
@@ -97,27 +74,12 @@ export const AnimatedToggle = ({
           >
             <div
               className={`
-              bg-white w-4 h-4 rounded-full group-hover:scale-[.8] shadow-md transform transition-all duration-300 ease-in-out
-              ${!isOn ? "" : "translate-x-4"}
+              bg-white w-4 h-4 rounded-full shadow-md transform transition-all duration-300 ease-in-out
+              ${isOn ? "translate-x-4" : ""}
             `}
             ></div>
           </div>
-          <p className="flex ml-2 w-[40px]">
-            <span
-              className={`no-underline text-sm transition-all duration-300 ease-in-out ${
-                isOn ? "opacity-0  translate-y-10 w-0" : "opacity-100"
-              }`}
-            >
-              Fast
-            </span>
-            <span
-              className={`text-sm transition-all duration-300 ease-in-out ${
-                isOn ? "opacity-100 " : "opacity-0 -translate-y-10 w-0"
-              }`}
-            >
-              Agentic
-            </span>
-          </p>
+          <p className="ml-2 text-sm">Agentic</p>
         </div>
       </div>
     </CustomTooltip>
@@ -138,10 +100,8 @@ export const FullSearchBar = ({
   documentSets,
   filterManager,
   finalAvailableDocumentSets,
-  setPopup,
   finalAvailableSources,
   tags,
-  previousSearch,
 }: FullSearchBarProps) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     const target = event.target;
@@ -177,9 +137,10 @@ export const FullSearchBar = ({
         border
         border-border-medium
         rounded-lg
-        bg-background-100
+        bg-background-chatbar
         [&:has(textarea:focus)]::ring-1
         [&:has(textarea:focus)]::ring-black
+        text-text-chatbar
         "
     >
       <textarea
@@ -191,7 +152,7 @@ export const FullSearchBar = ({
           shrink
           resize-none
           border-0
-          bg-background-100
+          bg-background-chatbar
           whitespace-normal
           rounded-lg
           break-word
@@ -204,6 +165,7 @@ export const FullSearchBar = ({
           max-h-[6em]
           py-4
           h-14
+          placeholder:text-text-chatbar-subtle
         `}
         autoFocus
         style={{ scrollbarWidth: "thin" }}
@@ -230,7 +192,7 @@ export const FullSearchBar = ({
             />
           )}
         </div>
-        <div className="flex my-auto gap-x-3">
+        <div className="flex my-auto items-center gap-x-3">
           {toggleAgentic && (
             <AnimatedToggle isOn={agentic!} handleToggle={toggleAgentic} />
           )}
@@ -244,9 +206,7 @@ export const FullSearchBar = ({
             >
               <SendIcon
                 size={28}
-                className={`text-emphasis ${disabled && "opacity-50"} text-white p-1 rounded-full ${
-                  query ? "bg-background-800" : "bg-[#D7D7D7]"
-                }`}
+                className={`text-emphasis ${disabled || !query ? "bg-disabled-submit-background" : "bg-submit-background"} text-white p-1 rounded-full`}
               />
             </button>
           </div>
@@ -286,12 +246,12 @@ export const SearchBar = ({ query, setQuery, onSearch }: SearchBarProps) => {
   };
 
   return (
-    <div className="flex justify-center">
+    <div className="flex text-text-chatbar justify-center">
       <div className="flex items-center w-full opacity-100 border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search">
         <MagnifyingGlass className="text-emphasis" />
         <textarea
           autoFocus
-          className="flex-grow ml-2 h-6 outline-none placeholder-default overflow-hidden whitespace-normal resize-none"
+          className="flex-grow ml-2 h-6 placeholder:text-text-chatbar-subtle outline-none placeholder-default overflow-hidden whitespace-normal resize-none"
           role="textarea"
           aria-multiline
           placeholder="Search..."
diff --git a/web/src/components/search/SearchResultsDisplay.tsx b/web/src/components/search/SearchResultsDisplay.tsx
index f562f152367..4be28c9e8a8 100644
--- a/web/src/components/search/SearchResultsDisplay.tsx
+++ b/web/src/components/search/SearchResultsDisplay.tsx
@@ -182,8 +182,8 @@ export const SearchResultsDisplay = ({
                     }}
                     className={`flex items-center justify-center animate-fade-in-up rounded-lg p-1 text-xs transition-all duration-300 w-20 h-8 ${
                       !sweep
-                        ? "bg-green-500 text-text-800"
-                        : "bg-rose-700 text-text-100"
+                        ? "bg-background-agentic-toggled text-text-agentic-toggled"
+                        : "bg-background-agentic-untoggled text-text-agentic-untoggled"
                     }`}
                     style={{
                       transform: sweep ? "rotateZ(180deg)" : "rotateZ(0deg)",
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index 1bb711d42f1..14c3487850a 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useContext, useEffect, useRef, useState } from "react";
-import { FullSearchBar, SearchBar } from "./SearchBar";
+import { FullSearchBar } from "./SearchBar";
 import { SearchResultsDisplay } from "./SearchResultsDisplay";
 import { SourceSelector } from "./filtering/Filters";
 import {
@@ -758,12 +758,10 @@ export const SearchSection = ({
                     />
 
                     <FullSearchBar
-                      setPopup={setPopup}
                       disabled={previousSearch === query}
                       toggleAgentic={
                         disabledAgentic ? undefined : toggleAgentic
                       }
-                      previousSearch={previousSearch}
                       showingSidebar={toggledSidebar}
                       agentic={agentic}
                       query={query}
diff --git a/web/src/components/search/filtering/FilterDropdown.tsx b/web/src/components/search/filtering/FilterDropdown.tsx
index b7c95ea75fe..71fcf84b36d 100644
--- a/web/src/components/search/filtering/FilterDropdown.tsx
+++ b/web/src/components/search/filtering/FilterDropdown.tsx
@@ -41,30 +41,33 @@ export function FilterDropdown({
               flex-col 
               ${dropdownWidth || width}
               max-h-96 
-              overflow-y-auto 
-              overscroll-contain`}
+              overflow-y-scroll 
+              `}
           >
             {options.map((option, ind) => {
               const isSelected = selected.includes(option.key);
               return (
                 <div
-                  key={option.key}
+                  key={`${option.key}-1`}
                   className={`
-                    ${optionClassName}
-                    flex
-                    px-3
-                    text-sm
-                    py-2.5
-                    select-none
-                    cursor-pointer
-                    w-fit
-                    text-emphasis
-                    gap-x-1
-                    hover:bg-hover-light
-                    ${
-                      ind === options.length - 1 ? "" : "border-b border-border"
-                    } 
-                  `}
+                      ${optionClassName}
+                      flex
+                      px-3
+                      text-sm
+                      py-2.5
+                      select-none
+                      cursor-pointer
+                      flex-none
+                      w-fit
+                      text-emphasis
+                      gap-x-1
+                      hover:bg-hover-light
+                      ${
+                        ind === options.length - 1
+                          ? ""
+                          : "border-b border-border"
+                      } 
+                    `}
                   onClick={(event) => {
                     handleSelect(option);
                     event.preventDefault();
diff --git a/web/src/components/search/filtering/TagFilter.tsx b/web/src/components/search/filtering/TagFilter.tsx
index 80a6ee78922..17600383583 100644
--- a/web/src/components/search/filtering/TagFilter.tsx
+++ b/web/src/components/search/filtering/TagFilter.tsx
@@ -83,7 +83,7 @@ export function TagFilter({
       />
       {selectedTags.length > 0 && (
         <div className="mt-2">
-          <div className="mt-1 flex flex-wrap gap-x-1 gap-y-1">
+          <div className="mt-1 flex bg-black flex-wrap gap-x-1 gap-y-1">
             {selectedTags.map((tag) => (
               <div
                 key={tag.tag_key + tag.tag_value}
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index a42967a12e9..b427e19a3f0 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -100,6 +100,38 @@ module.exports = {
         "background-emphasis": "var(--background-emphasis)",
         "background-strong": "var(--background-strong)",
         "background-search": "var(--white)",
+
+        // colors for sidebar in chat, search, and manage settings
+        "background-sidebar": "var(--background-100)",
+        "background-settings-sidebar": "var(--background-100)",
+        "background-chatbar": "var(--background-100)",
+        "text-sidebar": "var(--text-500)",
+
+        // Settings
+        "text-sidebar-subtle": "var(--text-500)",
+        "icon-settings-sidebar": "var(--text-600)",
+        "text-settings-sidebar": "var(--text-600)",
+        "text-settings-sidebar-strong": "var(--text-900)",
+        "background-settings-hover": "var(--background-200)",
+
+        // Background for chat messages (user bubbles)
+        user: "var(--user-bubble)",
+
+        // Colors for the search toggle buttons
+        "background-agentic-toggled": "var(--light-success)",
+        "background-agentic-untoggled": "var(--undo)",
+        "text-agentic-toggled": "var(--text-800)",
+        "text-agentic-untoggled": "var(--white)",
+        "text-chatbar-subtle": "var(--text-500)",
+        "text-chatbar": "var(--text-800)",
+
+        // Color for the star indicator on high quality search results.
+        "star-indicator": "var(--background-100)",
+
+        // Backgrounds for submit buttons on search and chat
+        "submit-background": "var(--background-800)",
+        "disabled-submit-background": "var(--background-400)",
+
         input: "var(--white)",
 
         "text-50": "var(--text-50)",
@@ -114,6 +146,8 @@ module.exports = {
         "text-900": "var(--text-900)",
         "text-950": "var(--text-950)",
 
+        "user-text": "var(--text-800)",
+
         description: "var(--text-400)",
         subtle: "var(--text-500)",
         default: "var(--text-600)",
@@ -163,10 +197,6 @@ module.exports = {
           },
         },
 
-        // bubbles in chat for each "user"
-        user: "var(--user-bubble)",
-        ai: "var(--ai-bubble)",
-
         // for display documents
         document: "var(--document-color)",