Minor theming (#2993)

* ensure functionality * naming * ensure tailwind theme updated * add comments * nit * remove pr * enforce colors * update our tailwind config
onyx-dot-app · Oct 30, 2024 · f318e30 · f318e30
1 parent 7384ca8
commit f318e30
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 31 deletions.
diff --git a/web/src/app/assistants/SidebarWrapper.tsx b/web/src/app/assistants/SidebarWrapper.tsx
@@ -153,13 +153,15 @@ export default function SidebarWrapper<T extends object>({
           />
 
           <div
-            className={`mt-4 w-full ${size == "lg" ? "max-w-4xl" : "max-w-3xl"} mx-auto`}
+            className={`mt-4 w-full ${
+              size == "lg" ? "max-w-4xl" : "max-w-3xl"
+            } mx-auto`}
           >
             {children}
           </div>
         </div>
       </div>
-      <FixedLogo />
+      <FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
     </div>
   );
 }
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
@@ -2512,7 +2512,7 @@ export function ChatPage({
               )}
             </div>
           </div>
-          <FixedLogo chat />
+          <FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
         </div>
       </div>
       <DocumentSidebar

diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -122,7 +122,7 @@ export function ChatSessionDisplay({
           );
         }}
       >
-        <BasicSelectable chat padding="extra" fullWidth selected={isSelected}>
+        <BasicSelectable padding="extra" fullWidth selected={isSelected}>
           <>
             <div className="flex relative">
               {isRenamingChat ? (
@@ -144,8 +144,8 @@ export function ChatSessionDisplay({
                     className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent 
                     ${
                       isSelected
-                        ? "to-background-chat-hover"
-                        : " to-background-chat-selected group-hover:to-background-chat-hover"
+                        ? "to-background-chat-selected"
+                        : "group-hover:to-background-chat-hover"
                     } `}
                   />
                 </p>

diff --git a/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx b/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
@@ -27,7 +27,6 @@ function BackToDanswerButton() {
           Back to {enterpriseSettings?.application_name || "Danswer Chat"}
         </Button>
       </div>
-      pr
     </div>
   );
 }

diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -8,7 +8,12 @@ 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({
+  // Whether the sidebar is toggled or not
+  backgroundToggled,
+}: {
+  backgroundToggled?: boolean;
+}) {
   const combinedSettings = useContext(SettingsContext);
   const settings = combinedSettings?.settings;
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
@@ -28,15 +33,17 @@ export default function FixedLogo({ chat }: { chat?: boolean }) {
           <div className="w-full">
             {enterpriseSettings && enterpriseSettings.application_name ? (
               <div>
-                <HeaderTitle chat={chat}>
+                <HeaderTitle backgroundToggled={backgroundToggled}>
                   {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}>
+                Danswer
+              </HeaderTitle>
             )}
           </div>
         </div>

diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
@@ -81,14 +81,12 @@ export function BasicSelectable({
   children,
   selected,
   hasBorder,
-  chat,
   fullWidth = false,
   padding = "normal",
 }: {
   children: string | JSX.Element;
   selected: boolean;
   hasBorder?: boolean;
-  chat?: boolean;
   fullWidth?: boolean;
   padding?: "none" | "normal" | "extra";
 }) {
@@ -104,12 +102,8 @@ export function BasicSelectable({
         ${hasBorder ? "border border-border" : ""}
         ${
           selected
-            ? chat
-              ? "bg-background-chat-selected"
-              : "bg-hover"
-            : chat
-              ? "bg-background-chat-hover"
-              : "hover:bg-hover"
+            ? "bg-background-chat-selected"
+            : "hover:bg-background-chat-hover"
         }
         ${fullWidth ? "w-full" : ""}`}
     >

diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
@@ -58,7 +58,7 @@ export function ClientLayout({
   return (
     <div className="h-screen overflow-y-hidden">
       <div className="flex h-full">
-        <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">
+        <div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] z-20 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto">
           <AdminSidebar
             collections={[
               {

diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -55,7 +55,7 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
                 <div className="flex-grow min-w-0 my-auto">
                   {enterpriseSettings && enterpriseSettings.application_name ? (
                     <div className="w-full">
-                      <HeaderTitle>
+                      <HeaderTitle backgroundToggled={true}>
                         {enterpriseSettings.application_name}
                       </HeaderTitle>
                       {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
@@ -65,7 +65,7 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
                       )}
                     </div>
                   ) : (
-                    <HeaderTitle>Danswer</HeaderTitle>
+                    <HeaderTitle backgroundToggled={true}>Danswer</HeaderTitle>
                   )}
                 </div>
               </div>
@@ -74,7 +74,7 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
         </div>
         <div className="flex w-full justify-center">
           <Link href={"/chat"}>
-            <button className="text-sm flex items-center block w-52 py-2.5 flex px-2 text-left bg-background-200 hover:bg-background-200/80 cursor-pointer rounded">
+            <button className="text-sm flex items-center block w-52 py-2.5 flex px-2 text-left text-text-back-button bg-background-back-button hover:bg-opacity-80 cursor-pointer rounded">
               <BackIcon className="my-auto" size={18} />
               <p className="ml-1 break-words line-clamp-2 ellipsis leading-none">
                 Back to{" "}

diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
@@ -4,18 +4,20 @@ 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"
+        backgroundToggled
+          ? "text-text-sidebar-toggled-header"
+          : "text-text-sidebar-header"
       } break-words line-clamp-2 ellipsis text-strong leading-none font-bold`}
     >
       {children}

diff --git a/web/src/components/header/LogoType.tsx b/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>

diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
@@ -851,7 +851,7 @@ export const SearchSection = ({
           </div>
         </div>
       </div>
-      <FixedLogo chat />
+      <FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
     </>
   );
 };
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
@@ -103,20 +103,30 @@ module.exports = {
 
         // 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)",
 
+        "toggled-background": "var(--background-400)",
+        "untoggled-background": "var(--background-200)",
+
+        "background-back-button": "var(--background-200)",
+        "text-back-button": "var(--text-800)",
+
         // 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-chat-hover": "var(--background-200)",
+        "background-chat-selected": "var(--background-200)",
+
         // Background for chat messages (user bubbles)
         user: "var(--user-bubble)",
 
+        "background-toggle": "var(--background-100)",
+
         // Colors for the search toggle buttons
         "background-agentic-toggled": "var(--light-success)",
         "background-agentic-untoggled": "var(--undo)",
-Original file line number
+Diff line change
@@ Expand Up / @@ -2512,7 +2512,7 @@ export function ChatPage({ @@
                   )}
                 </div>
               </div>
-              <FixedLogo chat />
+              <FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
             </div>
           </div>
           <DocumentSidebar
@@ Expand Down @@