null
/
Pipeline
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

bug: streamline shadcn

This commit is contained in:
null 2026-05-20 00:21:34 -05:00
parent 74d26afffa
commit a97331ae3f
16 changed files with 140 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/agents/[agentId]/edit/page.tsx
View File

@ -332,9 +332,9 @@ export default function EditAgentPage() {
}
searchPlaceholder="Search boards..."
emptyMessage="No matching boards."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
disabled={boards.length === 0}
/>
{resolvedIsGatewayMain ? (

6
frontend/src/app/agents/new/page.tsx
View File

@ -191,9 +191,9 @@ export default function NewAgentPage() {
placeholder="Select board"
searchPlaceholder="Search boards..."
emptyMessage="No matching boards."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
disabled={boards.length === 0}
/>
{boards.length === 0 ? (

37
frontend/src/app/board-groups/[groupId]/page.tsx
View File

@ -43,6 +43,13 @@ import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { BoardChatComposer } from "@/components/BoardChatComposer";
import { Button, buttonVariants } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { createExponentialBackoff } from "@/lib/backoff";
import { apiDatetimeToMs } from "@/lib/datetime";
import { formatTimestamp } from "@/lib/formatters";
@ -892,22 +899,28 @@ export default function BoardGroupDetailPage() {
step={1}
disabled={!canManageHeartbeat}
/>
<select
<Select
value={heartbeatUnit}
onChange={(event) =>
setHeartbeatUnit(event.target.value as HeartbeatUnit)
onValueChange={(value) =>
setHeartbeatUnit(value as HeartbeatUnit)
}
className={cn(
"h-8 rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-900 shadow-sm",
!canManageHeartbeat && "opacity-60 cursor-not-allowed",
)}
disabled={!canManageHeartbeat}
>
<option value="s">sec</option>
<option value="m">min</option>
<option value="h">hr</option>
<option value="d">day</option>
</select>
<SelectTrigger
className={cn(
"h-8 w-[74px] rounded-md px-2 text-xs shadow-sm",
!canManageHeartbeat && "opacity-60 cursor-not-allowed",
)}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="s">sec</SelectItem>
<SelectItem value="m">min</SelectItem>
<SelectItem value="h">hr</SelectItem>
<SelectItem value="d">day</SelectItem>
</SelectContent>
</Select>
<label className="inline-flex items-center gap-2 text-xs text-slate-700">
<input
type="checkbox"

12
frontend/src/app/boards/[boardId]/edit/page.tsx
View File

@ -818,9 +818,9 @@ export default function EditBoardPage() {
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
/>
</div>
</div>
@ -872,9 +872,9 @@ export default function EditBoardPage() {
placeholder="No group"
searchPlaceholder="Search groups..."
emptyMessage="No groups found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
disabled={isLoading}
/>
<p className="text-xs text-slate-500">

12
frontend/src/app/boards/new/page.tsx
View File

@ -188,9 +188,9 @@ export default function NewBoardPage() {
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
/>
</div>
</div>
@ -208,9 +208,9 @@ export default function NewBoardPage() {
placeholder="No group"
searchPlaceholder="Search groups..."
emptyMessage="No groups found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
disabled={isLoading}
/>
<p className="text-xs text-slate-500">

20
frontend/src/app/globals.css
View File

@ -199,6 +199,26 @@ body {
color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea {
background-color: var(--surface);
color: var(--text);
caret-color: var(--text);
}
input::placeholder,
textarea::placeholder {
color: var(--text-muted);
}
.app-input:-webkit-autofill,
.app-input:-webkit-autofill:hover,
.app-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--input-text, var(--text));
caret-color: var(--input-text, var(--text));
box-shadow: 0 0 0 1000px var(--input-bg, var(--surface)) inset;
}
* {
border-color: var(--border);
}

6
frontend/src/app/onboarding/page.tsx
View File

@ -178,9 +178,9 @@ export default function OnboardingPage() {
placeholder="Select timezone"
searchPlaceholder="Search timezones..."
emptyMessage="No matching timezones."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
/>
</div>
</div>

10
frontend/src/app/settings/page.tsx
View File

@ -182,7 +182,7 @@ export default function SettingsPage() {
}}
placeholder="Your name"
disabled={isSaving}
className="border-slate-300 text-slate-900 focus-visible:ring-blue-500"
className="border-slate-300 [--input-bg:#fff] [--input-text:#0f172a] placeholder:text-slate-500 focus-visible:ring-blue-500"
/>
</div>
<div className="space-y-2">
@ -202,9 +202,9 @@ export default function SettingsPage() {
searchPlaceholder="Search timezones..."
emptyMessage="No matching timezones."
disabled={isSaving}
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
triggerClassName="h-11 w-full px-3 py-2"
contentClassName="shadow-lg"
itemClassName="px-4 py-3"
/>
</div>
</div>
@ -218,7 +218,7 @@ export default function SettingsPage() {
value={displayEmail}
readOnly
disabled
className="border-slate-200 bg-slate-50 text-slate-600"
className="border-slate-200 [--input-bg:#f8fafc] [--input-text:#475569]"
/>
</div>

16
frontend/src/components/organisms/OrgSwitcher.tsx
View File

@ -144,14 +144,14 @@ export function OrgSwitcher() {
return (
<div className="relative">
<Select value={orgValue} onValueChange={handleOrgChange}>
<SelectTrigger className="h-9 w-[220px] rounded-md border-slate-200 bg-white px-3 text-sm font-medium text-slate-900 shadow-none focus:ring-2 focus:ring-blue-500/30 focus:ring-offset-0">
<SelectTrigger className="h-9 w-[220px] rounded-md px-3 text-sm font-medium shadow-none focus:ring-2 focus:ring-ring focus:ring-offset-0">
<span className="flex items-center gap-2">
<Building2 className="h-4 w-4 text-slate-400" />
<Building2 className="h-4 w-4 text-muted-foreground" />
<SelectValue placeholder="Select organization" />
</span>
</SelectTrigger>
<SelectContent className="min-w-[220px] rounded-md border-slate-200 p-1 shadow-xl">
<div className="px-3 pb-2 pt-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
<SelectContent className="min-w-[220px] rounded-md p-1 shadow-xl">
<div className="px-3 pb-2 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
Org switcher
</div>
{orgs.length ? (
@ -159,7 +159,7 @@ export function OrgSwitcher() {
<SelectItem
key={org.id}
value={org.id}
className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700 data-[state=checked]:bg-slate-50 data-[state=checked]:text-slate-900 focus:bg-slate-100"
className="rounded-md py-2 pl-7 pr-3 text-sm data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
>
{org.name}
</SelectItem>
@ -167,7 +167,7 @@ export function OrgSwitcher() {
) : (
<SelectItem
value={orgValue}
className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700"
className="rounded-md py-2 pl-7 pr-3 text-sm"
>
Organization
</SelectItem>
@ -175,10 +175,10 @@ export function OrgSwitcher() {
<SelectSeparator className="my-2" />
<SelectItem
value="__create__"
className="rounded-md py-2 pl-3 pr-3 text-sm font-medium text-slate-600 hover:text-slate-900 focus:bg-slate-100 [&>span:first-child]:hidden"
className="rounded-md py-2 pl-3 pr-3 text-sm font-medium [&>span:first-child]:hidden"
>
<span className="flex items-center gap-2">
<Plus className="h-4 w-4 text-slate-400" />
<Plus className="h-4 w-4 text-muted-foreground" />
Create new org
</span>
</SelectItem>

6
frontend/src/components/ui/command.tsx
View File

@ -25,13 +25,13 @@ const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="border-b border-slate-200 p-2" cmdk-input-wrapper="">
<div className="border-b border-border p-2" cmdk-input-wrapper="">
<div className="relative">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-slate-400" />
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<CommandPrimitive.Input
ref={ref}
className={cn(
"w-full rounded-md border border-slate-300 bg-white py-2 pl-8 pr-3 text-sm text-slate-900 placeholder:text-slate-500 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
"w-full rounded-md border border-input bg-background py-2 pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}

22
frontend/src/components/ui/dropdown-select.tsx
View File

@ -137,20 +137,20 @@ export default function DropdownSelect({
aria-haspopup="listbox"
disabled={disabled}
className={cn(
"inline-flex h-10 w-auto cursor-pointer items-center justify-between gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
open && "bg-slate-50",
"inline-flex h-10 w-auto cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
open && "bg-accent text-accent-foreground",
triggerClassName,
)}
>
<span
className={cn(
"flex min-w-0 items-center gap-2 truncate",
showPlaceholder && "text-slate-500",
showPlaceholder && "text-muted-foreground",
)}
>
{SelectedIcon ? (
<SelectedIcon
className={cn("h-4 w-4 text-slate-600", selectedIconClassName)}
className={cn("h-4 w-4 text-muted-foreground", selectedIconClassName)}
/>
) : null}
<span className="truncate">
@ -159,7 +159,7 @@ export default function DropdownSelect({
</span>
<ChevronDown
className={cn(
"h-4 w-4 shrink-0 text-slate-400 transition-transform",
"h-4 w-4 shrink-0 text-muted-foreground transition-transform",
open && "rotate-180",
)}
/>
@ -169,7 +169,7 @@ export default function DropdownSelect({
align="start"
sideOffset={6}
className={cn(
"w-[var(--radix-popover-trigger-width)] min-w-[12rem] overflow-hidden rounded-md border border-slate-200 bg-white p-0 text-slate-900 shadow-lg",
"w-[var(--radix-popover-trigger-width)] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-lg",
contentClassName,
)}
>
@ -184,7 +184,7 @@ export default function DropdownSelect({
/>
) : null}
<CommandList ref={listRef} className="max-h-64 p-1">
<CommandEmpty className="px-3 py-6 text-center text-sm text-slate-500">
<CommandEmpty className="px-3 py-6 text-center text-sm text-muted-foreground">
{emptyMessage ?? "No results found."}
</CommandEmpty>
{options.map((option) => {
@ -198,9 +198,9 @@ export default function DropdownSelect({
disabled={option.disabled}
onSelect={handleSelect}
className={cn(
"flex items-center justify-between gap-2 rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900",
"flex items-center justify-between gap-2 rounded-lg px-4 py-3 text-sm text-foreground transition-colors data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
isSelected && "font-semibold",
!isSelected && "hover:bg-gray-50",
!isSelected && "hover:bg-accent hover:text-accent-foreground",
itemClassName,
)}
>
@ -209,7 +209,7 @@ export default function DropdownSelect({
<OptionIcon
className={cn(
"h-4 w-4",
isSelected ? "text-gray-700" : "text-gray-500",
isSelected ? "text-accent-foreground" : "text-muted-foreground",
option.iconClassName,
)}
/>
@ -217,7 +217,7 @@ export default function DropdownSelect({
<span className="truncate font-medium">{option.label}</span>
</span>
{isSelected ? (
<Check className="h-4 w-4 text-gray-400" />
<Check className="h-4 w-4 text-current" />
) : null}
</CommandItem>
);

2
frontend/src/components/ui/input.tsx
View File

@ -10,7 +10,7 @@ const Input = React.forwardRef<
ref={ref}
type={type}
className={cn(
"flex h-11 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
"app-input flex h-11 w-full rounded-xl border border-[color:var(--border)] [--input-bg:var(--surface)] [--input-text:var(--text)] bg-[color:var(--input-bg)] px-4 text-sm text-[color:var(--input-text)] shadow-sm placeholder:text-[color:var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:[--input-bg:var(--surface-muted)] disabled:[--input-text:var(--text-muted)]",
className,
)}
{...props}

2
frontend/src/components/ui/popover.tsx
View File

@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border border-popover bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}

6
frontend/src/components/ui/searchable-select.tsx
View File

@ -23,11 +23,11 @@ type SearchableSelectProps = {
};
const baseTriggerClassName =
"w-auto h-auto rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-gray-900 focus:ring-4 focus:ring-gray-100";
"h-auto w-auto rounded-xl border border-input bg-background px-4 py-3 text-left text-sm font-semibold text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:border-ring focus:ring-2 focus:ring-ring";
const baseContentClassName =
"rounded-xl border-2 border-gray-200 bg-white shadow-xl";
"rounded-xl border border-border bg-popover shadow-xl";
const baseItemClassName =
"px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900 data-[selected=true]:font-semibold hover:bg-gray-50";
"px-4 py-3 text-sm text-foreground transition-colors data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[selected=true]:font-semibold hover:bg-accent hover:text-accent-foreground";
export default function SearchableSelect({
value,

14
frontend/src/components/ui/select.tsx
View File

@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
ref={ref}
type="button"
className={cn(
"flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2",
"flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-input bg-background px-4 text-sm text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
@ -71,9 +71,9 @@ const SelectContent = React.forwardRef<
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
@ -104,7 +104,7 @@ const SelectLabel = React.forwardRef<
<SelectPrimitive.Label
ref={ref}
className={cn(
"py-1.5 pl-8 pr-2 text-sm font-semibold text-strong",
"py-1.5 pl-8 pr-2 text-sm font-semibold text-foreground",
className,
)}
{...props}
@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm text-strong outline-none focus:bg-[color:var(--surface-strong)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-[color:var(--border)]", className)}
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
));

35
frontend/tailwind.config.cjs
View File

@ -4,6 +4,41 @@ module.exports = {
content: ["./src/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
border: "var(--border)",
input: "var(--input)",
ring: "var(--ring)",
background: "var(--background)",
foreground: "var(--foreground)",
primary: {
DEFAULT: "var(--primary)",
foreground: "var(--primary-foreground)",
},
secondary: {
DEFAULT: "var(--secondary)",
foreground: "var(--secondary-foreground)",
},
destructive: {
DEFAULT: "var(--destructive)",
foreground: "var(--destructive-foreground)",
},
muted: {
DEFAULT: "var(--muted)",
foreground: "var(--muted-foreground)",
},
accent: {
DEFAULT: "var(--accent-shadcn)",
foreground: "var(--accent-foreground)",
},
popover: {
DEFAULT: "var(--popover)",
foreground: "var(--popover-foreground)",
},
card: {
DEFAULT: "var(--card)",
foreground: "var(--card-foreground)",
},
},
fontFamily: {
heading: ["var(--font-heading)", "sans-serif"],
body: ["var(--font-body)", "sans-serif"],