Update theming (#2552)

* update theming * update * update theming
onyx-dot-app · Sep 24, 2024 · f5adc30 · f5adc30
1 parent 8cfe80c
commit f5adc30
Show file tree

Hide file tree

Showing 19 changed files with 201 additions and 128 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -87,21 +87,20 @@ 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 
             flex 
             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
@@ -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
@@ -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
@@ -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
@@ -91,7 +91,6 @@ export function BasicSelectable({
       className={`
         rounded
         font-medium 
-        text-emphasis 
         text-sm
         ${padding == "normal" && "p-1"}
         ${padding == "extra" && "p-1.5"}