Skip to content

feat(webapp): add light mode support to dashboard #2975

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

Closed
ericallam wants to merge 2 commits into from
Closed

feat(webapp): add light mode support to dashboard #2975

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
9caff5a
feat(webapp): add light mode support to dashboard
claude Jan 30, 2026
b5a1402
do some light mode stuff
ericallam Jan 30, 2026
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
2 changes: 1 addition & 1 deletion apps/webapp/app/components/AskAI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@ function GradientSpinnerBackground({
>
<div
className={`flex h-full w-full items-center justify-center rounded-full bg-charcoal-600 ${
hoverEffect ? "transition group-hover:bg-charcoal-550" : ""
hoverEffect ? "transition group-hover:bg-secondary" : ""
}`}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/BlankStatePanels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ export function DeploymentsNoneDev() {
organization={organization}
project={project}
environment={environment}
className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-charcoal-600"
className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-secondary"
/>
</StepContentContainer>
</>
Expand Down
8 changes: 4 additions & 4 deletions apps/webapp/app/components/code/ChartConfigPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
updateConfig({ yAxisColumns: newColumns });
}}
className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
className="rounded p-1 text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
title="Remove series"
>
<XIcon className="h-3.5 w-3.5" />
Expand All @@ -400,7 +400,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
});
}
}}
className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
>
<Plus className="h-3 w-3" />
Add series
Expand Down Expand Up @@ -546,7 +546,7 @@ function SortDirectionToggle({
"rounded px-2 py-1 text-xs transition-colors",
direction === "asc"
? "bg-charcoal-700 text-text-bright"
: "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
: "text-text-dimmed hover:bg-hover hover:text-text-bright"
)}
title="Ascending"
>
Expand All @@ -559,7 +559,7 @@ function SortDirectionToggle({
"rounded px-2 py-1 text-xs transition-colors",
direction === "desc"
? "bg-charcoal-700 text-text-bright"
: "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
: "text-text-dimmed hover:bg-hover hover:text-text-bright"
)}
title="Descending"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/code/InlineCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { cn } from "~/utils/cn";

const inlineCode =
"px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
"px-1 py-0.5 rounded border border-grid-bright bg-tertiary text-text-bright font-mono text-wrap";

const variants = {
"extra-extra-small": "text-xxs",
Expand Down
6 changes: 3 additions & 3 deletions apps/webapp/app/components/code/TSQLResultsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,7 @@ function CopyableCell({
"flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
copied
? "text-green-500"
: "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
: "text-text-dimmed hover:border-charcoal-600 hover:bg-hover-bright hover:text-text-bright"
)}
>
{copied ? (
Expand Down Expand Up @@ -831,7 +831,7 @@ function HeaderCellContent({
e.stopPropagation();
onFilterClick();
}}
className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-hover-bright hover:text-text-bright"
title="Toggle column filters"
>
<FunnelIcon className="size-3" />
Expand Down Expand Up @@ -1147,7 +1147,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
<tr
key={row.id}
data-index={virtualRow.index}
className="group/row hover:bg-charcoal-800"
className="group/row hover:bg-hover"
style={{
display: "flex",
position: "absolute",
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/logs/LogsSearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function LogsSearchInput() {
<button
type="button"
onClick={handleClear}
className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
title="Clear search"
>
<XMarkIcon className="size-4" />
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/logs/LogsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export function LogsTable({
key={log.id}
className={cn(
"cursor-pointer transition-colors",
isSelected ? "bg-charcoal-750" : "hover:bg-charcoal-850"
isSelected ? "bg-hover" : "hover:bg-hover"
)}
isSelected={isSelected}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/webapp/app/components/navigation/EnvironmentSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function EnvironmentSelector({
button={
<PopoverTrigger
className={cn(
"group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
"group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-hover",
isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
className
)}
Expand Down Expand Up @@ -230,7 +230,7 @@ function Branches({
<PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
<ButtonContent
variant="small-menu-item"
className="hover:bg-charcoal-750"
className="hover:bg-hover"
TrailingIcon={ChevronRightIcon}
trailingIconClassName="text-text-dimmed"
textAlignLeft
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function HelpAndFeedback({
button={
<PopoverTrigger
className={cn(
"group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750",
"group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-hover",
isCollapsed ? "w-full" : "w-full justify-between"
)}
>
Expand Down
12 changes: 8 additions & 4 deletions apps/webapp/app/components/navigation/SideMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ import { TextLink } from "../primitives/TextLink";
import { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
import { ShortcutsAutoOpen } from "../Shortcuts";
import { UserProfilePhoto } from "../UserProfilePhoto";
import { ThemeToggle } from "../primitives/ThemeToggle";
import { EnvironmentSelector } from "./EnvironmentSelector";
import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
import { SideMenuHeader } from "./SideMenuHeader";
Expand Down Expand Up @@ -583,7 +584,7 @@ function ProjectSelector({
button={
<PopoverTrigger
className={cn(
"group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
"group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-hover",
isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
)}
>
Expand Down Expand Up @@ -779,7 +780,7 @@ function SwitchOrganizations({
<PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
<ButtonContent
variant="small-menu-item"
className="hover:bg-charcoal-750"
className="hover:bg-hover"
LeadingIcon={ArrowPathRoundedSquareIcon}
leadingIconClassName="text-text-dimmed"
TrailingIcon={ChevronRightIcon}
Expand Down Expand Up @@ -892,7 +893,10 @@ function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
<LayoutGroup>
<div className={cn("flex w-full", isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between")}>
<ShortcutsAutoOpen />
<HelpAndFeedback isCollapsed={isCollapsed} />
<div className={cn("flex", isCollapsed ? "flex-col gap-1" : "items-center gap-0.5")}>
<ThemeToggle isCollapsed={isCollapsed} />
<HelpAndFeedback isCollapsed={isCollapsed} />
</div>
<AskAI isCollapsed={isCollapsed} />
</div>
</LayoutGroup>
Expand Down Expand Up @@ -1006,7 +1010,7 @@ function CollapseToggle({
className={cn(
"group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200 focus-custom",
isHovering
? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
? "border border-grid-bright bg-background-bright shadow-md hover:bg-hover hover:text-text-bright"
: "border border-transparent bg-transparent"
)}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/navigation/SideMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function SideMenuItem({
to={to}
target={target}
className={cn(
"flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-charcoal-750",
"flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-hover",
isActive ? "bg-tertiary" : ""
)}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/navigation/SideMenuSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function SideMenuSection({
<div className="relative w-full">
{/* Header - fades out when sidebar is collapsed */}
<motion.div
className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-hover hover:text-text-bright"
onClick={isSideMenuCollapsed ? undefined : handleToggle}
style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
initial={false}
Expand Down
4 changes: 2 additions & 2 deletions apps/webapp/app/components/primitives/AppliedFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { cn } from "~/utils/cn";

const variants = {
"secondary/small": {
box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600 group-hover:border-charcoal-550 text-text-bright border border-charcoal-600",
box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-secondary group-hover:border-charcoal-550 text-text-bright border border-charcoal-600",
clear: "size-6 text-text-bright hover:text-text-bright transition-colors",
Comment on lines 6 to 8
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Hover class is now a no-op for secondary/small.
bg-secondary + group-hover:bg-secondary removes hover feedback. If hover affordance is still desired, use a distinct token (e.g., a “hover” variant) or drop the redundant class to avoid confusion.

🤖 Prompt for AI Agents 
In `@apps/webapp/app/components/primitives/AppliedFilter.tsx` around lines 6 - 8,
The "secondary/small" style in AppliedFilter.tsx defines box with both
bg-secondary and group-hover:bg-secondary which makes the hover class a no-op;
update the "secondary/small" entry (the box string) to either remove the
redundant group-hover:bg-secondary or replace it with a distinct hover token
(e.g., group-hover:bg-secondary-hover or a different color utility) so hover
affordance is actually visible; ensure any corresponding hover token used
matches your design tokens and adjust the clear class only if it should also
reflect the new hover behavior.

},
"tertiary/small": {
box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600",
box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-secondary",
clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
},
"minimal/medium": {
Expand Down
10 changes: 5 additions & 5 deletions apps/webapp/app/components/primitives/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { cn } from "~/utils/cn";
export type CalendarProps = React.ComponentProps<typeof DayPicker>;

const navButtonClass =
"size-7 rounded-[3px] bg-secondary border border-charcoal-600 text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550 transition inline-flex items-center justify-center";
"size-7 rounded-[3px] bg-secondary border border-charcoal-600 text-text-bright hover:bg-secondary hover:border-charcoal-550 transition inline-flex items-center justify-center";

function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }) {
const { goToMonth, nextMonth, previousMonth } = useDayPicker();
Expand All @@ -27,7 +27,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
</button>
<div className="flex items-center gap-2">
<select
className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
className="rounded border border-charcoal-600 bg-tertiary px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
value={calendarMonth.date.getMonth()}
onChange={(e) => {
const newDate = new Date(calendarMonth.date);
Expand All @@ -42,7 +42,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
))}
</select>
<select
className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
className="rounded border border-charcoal-600 bg-tertiary px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
value={calendarMonth.date.getFullYear()}
onChange={(e) => {
const newDate = new Date(calendarMonth.date);
Expand Down Expand Up @@ -97,7 +97,7 @@ export function Calendar({
day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-charcoal-700 [&:has([aria-selected].day-outside)]:bg-charcoal-700/50 [&:has([aria-selected].day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
day_button: cn(
"size-8 p-0 font-normal text-text-bright rounded-md",
"hover:bg-charcoal-700 hover:text-text-bright",
"hover:bg-hover-bright hover:text-text-bright",
"focus:bg-charcoal-700 focus:text-text-bright focus:outline-none",
"aria-selected:opacity-100"
),
Expand All @@ -113,7 +113,7 @@ export function Calendar({
hidden: "invisible",
dropdowns: "flex gap-2 items-center justify-center",
dropdown:
"bg-charcoal-750 border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-none focus:border-charcoal-500",
"bg-tertiary border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-none focus:border-charcoal-500",
...classNames,
}}
components={{
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/primitives/Callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const variantClasses = {
className: "border-charcoal-700 bg-charcoal-800",
icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
textColor: "text-text-bright",
linkClassName: "transition hover:bg-charcoal-750",
linkClassName: "transition hover:bg-hover",
},
warning: {
className: "border-warning/20 bg-warning/10",
Expand Down
16 changes: 8 additions & 8 deletions apps/webapp/app/components/primitives/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,28 @@ const variants = {
},
"button/small": {
button:
"flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
"flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-hover hover:border-charcoal-500 transition",
label: "text-sm text-text-bright select-none",
description: "text-text-dimmed",
inputPosition: "mt-0",
isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
isChecked: "bg-hover border-charcoal-750 hover:!bg-hover",
isDisabled: "opacity-70 hover:bg-transparent",
},
button: {
button:
"w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
"w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-hover hover:border-charcoal-500 transition",
label: "text-text-bright select-none",
description: "text-text-dimmed",
inputPosition: "mt-1",
isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
isChecked: "bg-hover border-charcoal-750 hover:!bg-hover",
isDisabled: "opacity-70 hover:bg-transparent",
},
description: {
button: "w-full py-2 pl-3 pr-4 checked:hover:bg-charcoal-850 transition",
button: "w-full py-2 pl-3 pr-4 checked:hover:bg-hover transition",
label: "text-text-bright font-semibold",
description: "text-text-dimmed",
inputPosition: "mt-1",
isChecked: "bg-charcoal-850",
isChecked: "bg-hover",
isDisabled: "opacity-70",
},
};
Expand Down Expand Up @@ -139,7 +139,7 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
className={cn(
inputPositionClasses,
props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
"read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
"read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-hover group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
)}
id={id}
ref={ref}
Expand Down Expand Up @@ -185,7 +185,7 @@ export const Checkbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(
type="checkbox"
className={cn(
props.readOnly || props.disabled ? "cursor-default" : "cursor-pointer",
"read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
"read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-hover group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
)}
{...props}
ref={ref}
Expand Down
Loading