highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-09-20 13:05:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Minor theming (#2993)

Browse Source 
* ensure functionality

* naming

* ensure tailwind theme updated

* add comments

* nit

* remove pr

* enforce colors

* update our tailwind config
This commit is contained in:
pablodanswer
2024-10-30 16:05:32 -07:00
committed by GitHub
parent 7384ca8768
commit f318e302c5
12 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/assistants/SidebarWrapper.tsx
View File

@@ -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>
);
}

2
web/src/app/chat/ChatPage.tsx
View File

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

6
web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
View File

@@ -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>

1
web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
View File

@@ -27,7 +27,6 @@ function BackToDanswerButton() {
Back to {enterpriseSettings?.application_name || "Danswer Chat"}
</Button>
</div>
pr
</div>
);
}

13
web/src/app/chat/shared_chat_search/FixedLogo.tsx
View File

@@ -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,7 +33,7 @@ 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 && (
@@ -36,7 +41,9 @@ export default function FixedLogo({ chat }: { chat?: boolean }) {
)}
</div>
) : (
<HeaderTitle chat={chat}>Danswer</HeaderTitle>
<HeaderTitle backgroundToggled={backgroundToggled}>
Danswer
</HeaderTitle>
)}
</div>
</div>

8
web/src/components/BasicClickable.tsx
View File

@@ -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"
: "hover:bg-background-chat-hover"
}
${fullWidth ? "w-full" : ""}`}
>

2
web/src/components/admin/ClientLayout.tsx
View File

@@ -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={[
{

6
web/src/components/admin/connectors/AdminSidebar.tsx
View File

@@ -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{" "}

8
web/src/components/header/HeaderTitle.tsx
View File

@@ -4,10 +4,10 @@ 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";
@@ -15,7 +15,9 @@ export function HeaderTitle({
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}

12
web/src/components/header/LogoType.tsx
View File

@@ -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>

2
web/src/components/search/SearchSection.tsx
View File

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

12
web/tailwind-themes/tailwind.config.js
View File

@@ -103,10 +103,15 @@ 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)",
@@ -114,9 +119,14 @@ module.exports = {
"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)",