Minor theming

web/src/app/chat/ChatPage.tsx

@@ -2512,7 +2512,10 @@ export function ChatPage({
               )}
             </div>
           </div>
-          <FixedLogo chat />
+          <FixedLogo
+            chat
+            backgroundToggled={toggledSidebar || showDocSidebar}
+          />
         </div>
       </div>
       <DocumentSidebar

web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx

@@ -145,7 +145,7 @@ export function ChatSessionDisplay({
                     ${
                       isSelected
                         ? "to-background-chat-hover"
-                        : " to-background-chat-selected group-hover:to-background-chat-hover"
+                        : " to-background-chat-hover group-hover:to-background-chat-selected"
                     } `}
                   />
                 </p>

web/src/app/chat/shared_chat_search/FixedLogo.tsx

@@ -8,7 +8,13 @@ import Link from "next/link";
 import { useContext } from "react";
 import { FiSidebar } from "react-icons/fi";
 
-export default function FixedLogo({ chat }: { chat?: boolean }) {
+export default function FixedLogo({
+  chat,
+  backgroundToggled,
+}: {
+  chat?: boolean;
+  backgroundToggled?: boolean;
+}) {
   const combinedSettings = useContext(SettingsContext);
   const settings = combinedSettings?.settings;
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
@@ -28,15 +34,17 @@ export default function FixedLogo({ chat }: { chat?: boolean }) {
           <div className="w-full">
             {enterpriseSettings && enterpriseSettings.application_name ? (
               <div>
-                <HeaderTitle chat={chat}>
+                <HeaderTitle backgroundToggled={backgroundToggled} chat={chat}>
                   {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 chat={chat}>Danswer</HeaderTitle>
+              <HeaderTitle backgroundToggled={backgroundToggled} chat={chat}>
+                Danswer
+              </HeaderTitle>
             )}
           </div>
         </div>

web/src/components/BasicClickable.tsx

@@ -108,7 +108,7 @@ export function BasicSelectable({
               ? "bg-background-chat-selected"
               : "bg-hover"
             : chat
-              ? "bg-background-chat-hover"
+              ? "hover:bg-background-chat-hover"
               : "hover:bg-hover"
         }
         ${fullWidth ? "w-full" : ""}`}

web/src/components/header/HeaderTitle.tsx

@@ -5,17 +5,23 @@ import React from "react";
 export function HeaderTitle({
   children,
   chat,
+  backgroundToggled,
 }: {
   children: JSX.Element | string;
   chat?: boolean;
+  backgroundToggled?: boolean;
 }) {
   const isString = typeof children === "string";
   const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl";
 
   return (
     <h1
       className={`${textSize} ${
-        chat ? "text-text-sidebar-header" : "text-text-header"
+        chat
+          ? backgroundToggled
+            ? "text-text-sidebar-toggled-header"
+            : "text-text-sidebar-header"
+          : "text-text-header"
       } break-words line-clamp-2 ellipsis text-strong leading-none font-bold`}
     >
       {children}

web/src/components/header/LogoType.tsx

@@ -37,7 +37,9 @@ export default function LogoType({
 
   return (
     <div
-      className={`${hideOnMobile && "mobile:hidden"} z-[100] mb-auto shrink-0 flex items-center text-xl font-bold`}
+      className={`${
+        hideOnMobile && "mobile:hidden"
+      } z-[100] mb-auto shrink-0 flex items-center text-xl font-bold`}
     >
       {toggleSidebar && page == "chat" ? (
         <button
@@ -55,7 +57,9 @@ export default function LogoType({
         </div>
       )}
       <div
-        className={`cursor-pointer ${showArrow ? "desktop:invisible" : "invisible"} break-words inline-block w-fit ml-2 text-text-700 text-xl`}
+        className={`cursor-pointer ${
+          showArrow ? "desktop:invisible" : "invisible"
+        } break-words inline-block w-fit ml-2 text-text-700 text-xl`}
       >
         <div className="max-w-[175px]">
           {enterpriseSettings && enterpriseSettings.application_name ? (
@@ -111,9 +115,9 @@ export default function LogoType({
             }}
           >
             {!toggled && !combinedSettings?.isMobile ? (
-              <RightToLineIcon />
+              <RightToLineIcon className="text-sidebar-toggle" />
             ) : (
-              <LeftToLineIcon />
+              <LeftToLineIcon className="text-sidebar-toggle" />
             )}
           </button>
         </Tooltip>

web/src/components/search/SearchSection.tsx

@@ -851,7 +851,7 @@ export const SearchSection = ({
           </div>
         </div>
       </div>
-      <FixedLogo chat />
+      <FixedLogo chat backgroundToggled={toggledSidebar || showDocSidebar} />
     </>
   );
 };