Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved theming #3204

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+541 −39
Draft

Improved theming #3204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
804887f
update
pablodanswer Nov 22, 2024
fe49e35
ensure added
pablodanswer Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions web/src/app/admin/connectors/[connector]/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ export default function Sidebar() {
];

return (
<div className="flex flex-none w-[250px] bg-background text-default">
<div className="flex flex-none w-[250px] text-default">
<div
className={`
fixed
bg-background-100
bg-background-sidebar
h-screen
transition-all
bg-opacity-80
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/chat/ChatPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1941,7 +1941,7 @@ export function ChatPage({
page="chat"
ref={innerSidebarElementRef}
toggleSidebar={toggleSidebar}
toggled={toggledSidebar && !settings?.isMobile}
toggled={toggledSidebar}
backgroundToggled={toggledSidebar || showDocSidebar}
existingChats={chatSessions}
currentChatSession={selectedChatSession}
Expand Down
10 changes: 4 additions & 6 deletions web/src/app/chat/message/Messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,6 +819,7 @@ export const HumanMessage = ({
outline-none
placeholder-gray-400
resize-none
text-text-editing-message
pl-4
overflow-y-auto
pr-12
Expand Down Expand Up @@ -877,7 +878,6 @@ export const HumanMessage = ({
py-2
px-3
w-fit
bg-hover
bg-background-strong
text-sm
rounded-lg
Expand All @@ -903,15 +903,13 @@ export const HumanMessage = ({
<TooltipProvider delayDuration={1000}>
<Tooltip>
<TooltipTrigger>
<button
className="hover:bg-hover p-1.5 rounded"
<HoverableIcon
icon={<FiEdit2 className="text-gray-600" />}
onClick={() => {
setIsEditing(true);
setIsHovered(false);
}}
>
<FiEdit2 className="!h-4 !w-4" />
</button>
/>
</TooltipTrigger>
<TooltipContent>Edit</TooltipContent>
</Tooltip>
Expand Down
8 changes: 7 additions & 1 deletion web/src/app/chat/shared_chat_search/FixedLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,13 @@ export default function FixedLogo({
</div>
</Link>
<div className="mobile:hidden fixed left-2.5 bottom-4">
<FiSidebar className="text-text-mobile-sidebar" />
<FiSidebar
className={`${
backgroundToggled
? "text-text-mobile-sidebar-toggled"
: "text-text-mobile-sidebar-untoggled"
}`}
/>
</div>
</>
);
Expand Down
12 changes: 9 additions & 3 deletions web/src/components/UserDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,9 @@ export function UserDropdown({ page }: { page?: pageType }) {
}

// Construct the current URL
const currentUrl = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
const currentUrl = `${pathname}${
searchParams.toString() ? `?${searchParams.toString()}` : ""
}`;

// Encode the current URL to use as a redirect parameter
const encodedRedirect = encodeURIComponent(currentUrl);
Expand Down Expand Up @@ -130,7 +132,7 @@ export function UserDropdown({ page }: { page?: pageType }) {
<div
className="
my-auto
bg-background-strong
bg-userdropdown-background
ring-2
ring-transparent
group-hover:ring-background-300/50
Expand Down Expand Up @@ -244,7 +246,11 @@ export function UserDropdown({ page }: { page?: pageType }) {
setShowNotifications(true);
}}
icon={<BellIcon className="h-5 w-5 my-auto mr-2" />}
label={`Notifications ${notifications && notifications.length > 0 ? `(${notifications.length})` : ""}`}
label={`Notifications ${
notifications && notifications.length > 0
? `(${notifications.length})`
: ""
}`}
/>

{showLogout &&
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/assistants/AssistantBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ export default function AssistantBanner({
<Tooltip>
<TooltipTrigger asChild>
<div
className="flex w-36 mx-3 py-1.5 scale-[1.] rounded-full border border-background-150 justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-125 transition-colors cursor-pointer"
className="flex w-36 mx-3 py-1.5 scale-[1.] rounded-full border border-border-recent-assistants justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-recent-assistants-hover transition-colors cursor-pointer"
onClick={() => onAssistantChange(assistant)}
>
<AssistantIcon
disableToolip
size="xs"
assistant={assistant}
/>
<span className="font-semibold text-text-800 text-xs truncate max-w-[120px]">
<span className="font-semibold text-text-recent-assistants text-xs truncate max-w-[120px]">
{assistant.name}
</span>
</div>
Expand Down
9 changes: 8 additions & 1 deletion web/src/components/header/LogoType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ export default function LogoType({
onClick={() => toggleSidebar()}
className="pt-[2px] flex gap-x-2 items-center ml-4 desktop:invisible mb-auto"
>
<FiSidebar size={20} className="text-text-mobile-sidebar" />
<FiSidebar
size={20}
className={`${
toggled
? "text-text-mobile-sidebar-toggled"
: "text-text-mobile-sidebar-untoggled"
}`}
/>
{!showArrow && (
<Logo className="desktop:hidden -my-2" height={24} width={24} />
)}
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/search/SearchAnswer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,9 @@ export default function SearchAnswer({
searchAnswerExpanded ? "min-h-[16rem]" : "h-[16rem]"
} ${
!searchAnswerExpanded && searchAnswerOverflowing && "overflow-y-hidden"
} p-4 border-2 border-search-answer-border rounded-lg relative`}
} p-4 border-2 border-search-answer-border text-text-search-answer bg-background-search-answer rounded-lg relative`}
>
asdfasdf
<div>
<div className="flex gap-x-2">
<h2 className="text-emphasis font-bold my-auto mb-1">AI Answer</h2>
Expand Down Expand Up @@ -152,7 +153,6 @@ export default function SearchAnswer({
{!searchAnswerExpanded && searchAnswerOverflowing && (
<div className="absolute bottom-0 left-0 w-full h-[100px] bg-gradient-to-b from-background/5 via-background/60 to-background/90"></div>
)}

{!searchAnswerExpanded && searchAnswerOverflowing && (
<div className="w-full h-12 absolute items-center content-center flex left-0 px-4 bottom-0">
<button
Expand Down
26 changes: 14 additions & 12 deletions web/src/components/search/filtering/Filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export function SourceSelector({
</div>
</PopoverTrigger>
<PopoverContent
className="bg-background border-border border rounded-md z-[200] p-0"
className="bg-background-search-filter border-border border rounded-md z-[200] p-0"
align="start"
>
<Calendar
Expand Down Expand Up @@ -466,7 +466,6 @@ export function HorizontalSourceSelector({
max-w-36
border-border
rounded-lg
bg-background
max-h-96
overflow-y-scroll
overscroll-contain
Expand All @@ -478,7 +477,6 @@ export function HorizontalSourceSelector({
w-fit
gap-x-1
hover:bg-hover
bg-hover-light
flex
items-center
bg-background-search-filter
Expand All @@ -490,22 +488,26 @@ export function HorizontalSourceSelector({
</div>
</PopoverTrigger>
<PopoverContent
className="bg-background border-border border rounded-md z-[200] p-0"
className="bg-background-search-filter border-border border rounded-md z-[200] p-0"
align="start"
>
<Calendar
mode="single"
selected={timeRange ? new Date(timeRange.from) : undefined}
onSelect={(date) => {
const selectedDate = date || new Date();
const today = new Date();
mode="range"
selected={
timeRange
? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
: undefined
}
onSelect={(daterange) => {
const initialDate = daterange?.from || new Date();
const endDate = daterange?.to || new Date();
setTimeRange({
from: selectedDate > today ? today : selectedDate,
to: today,
from: initialDate,
to: endDate,
selectValue: timeRange?.selectValue || "",
});
}}
className="rounded-md "
className="rounded-md"
/>
</PopoverContent>
</Popover>
Expand Down
25 changes: 22 additions & 3 deletions web/src/components/search/filtering/TagFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,22 @@ export function TagFilter({
<div
key={tag.tag_key + tag.tag_value}
onClick={() => onSelectTag(tag)}
className="max-w-full break-all line-clamp-1 text-ellipsis flex text-sm border border-border py-0.5 px-2 rounded cursor-pointer bg-background hover:bg-hover"
className={`
max-w-full
break-all
line-clamp-1
text-ellipsis
flex
text-sm
border
border-border
py-0.5
px-2
rounded
cursor-pointer
bg-background-search-filter
hover:bg-background-search-filter-dropdown
`}
>
{tag.tag_key}
<b>=</b>
Expand All @@ -109,7 +124,7 @@ export function TagFilter({
<div className="absolute top-0 right-0 transform translate-x-[105%] z-40">
<div
ref={popupRef}
className="p-2 border border-border rounded shadow-lg w-72 bg-background"
className="p-2 border border-border rounded shadow-lg w-72 bg-background-search-filter"
>
<div className="flex border-b border-border font-medium pb-1 text-xs mb-2">
<FiTag className="mr-1 my-auto" />
Expand All @@ -132,7 +147,11 @@ export function TagFilter({
cursor-pointer
bg-background
hover:bg-hover
${selectedTags.includes(tag) ? "bg-hover" : ""}
${
selectedTags.includes(tag)
? "bg-background-search-filter-dropdown"
: ""
}
`}
>
{tag.tag_key}
Expand Down
34 changes: 28 additions & 6 deletions web/src/components/ui/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,23 +34,45 @@ function Calendar({
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
"text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
cell: cn(
"h-9 w-9 text-center text-sm p-0 relative",
"[&:has([aria-selected].day-range-end)]:rounded-r-md",
"[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected",
"[&:has([aria-selected])]:bg-calendar-bg-selected",
"first:[&:has([aria-selected])]:rounded-l-md",
"last:[&:has([aria-selected])]:rounded-r-md",
"focus-within:relative focus-within:z-20",
"dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark",
"dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark"
),
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end !text-neutral-200",
day_selected:
"bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
day_selected: cn(
"bg-calendar-selected text-calendar-text-selected rounded-full",
"hover:bg-calendar-selected hover:text-calendar-text-selected",
"focus:bg-calendar-selected focus:text-calendar-text-selected"
),
day_range_start: cn(
"bg-calendar-range-start text-calendar-text-selected rounded-l-full",
"hover:bg-calendar-range-start hover:text-calendar-text-selected",
"focus:bg-calendar-range-start focus:text-calendar-text-selected"
),
day_range_end: cn(
"bg-calendar-range-end text-calendar-text-selected rounded-r-full",
"hover:bg-calendar-range-end hover:text-calendar-text-selected",
"focus:bg-calendar-range-end focus:text-calendar-text-selected"
),
day_today:
"bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
day_outside:
"day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
day_range_middle:
"aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
"aria-selected:bg-calendar-bg-selected aria-selected:text-calendar-text-selected dark:aria-selected:bg-calendar-bg-selected-dark dark:aria-selected:text-calendar-text-selected-dark",
day_hidden: "invisible",
...classNames,
}}
Expand Down
Loading
Loading