personality colour implementations

This commit is contained in:
2026-01-27 11:43:11 +00:00
parent 97eaa6d58a
commit 33b38c6f27
10 changed files with 47 additions and 40 deletions

View File

@@ -118,7 +118,6 @@ export function IssueComments({ issueId, className }: { issueId: number; classNa
</div>
{isAuthor ? (
<IconButton
variant="ghost"
onClick={() => handleDelete(comment)}
disabled={deletingId === comment.Comment.id}
title="Delete comment"

View File

@@ -147,32 +147,33 @@ export function IssuesTable({
e.preventDefault();
};
const showId = columns.id == null || columns.id === true;
const showTitle = columns.title == null || columns.title === true;
const showDescription = columns.description == null || columns.description === true;
const showAssignee = columns.assignee == null || columns.assignee === true;
return (
<Table className={cn("table-fixed", className)}>
<TableHeader>
<TableRow hoverEffect={false} className="bg-secondary">
{(columns.id == null || columns.id === true) && (
{showId && (
<TableHead className="text-right w-10 border-r text-xs font-medium text-muted-foreground">
ID
</TableHead>
)}
{(columns.title == null || columns.title === true) && (
<TableHead className="text-xs font-medium text-muted-foreground">Title</TableHead>
)}
{(columns.description == null || columns.description === true) && (
{showTitle && <TableHead className="text-xs font-medium text-muted-foreground">Title</TableHead>}
{showDescription && (
<TableHead className="text-xs font-medium text-muted-foreground">Description</TableHead>
)}
{/* below is kept blank to fill the space, used as the "Assignee" column */}
{(columns.assignee == null || columns.assignee === true) && (
<TableHead className="w-[1%]"></TableHead>
)}
{showAssignee && <TableHead className="w-[1%]"></TableHead>}
</TableRow>
</TableHeader>
<TableBody>
{issues.map((issueData) => (
<TableRow
key={issueData.Issue.id}
className="cursor-pointer max-w-full"
className={cn("cursor-pointer max-w-full")}
onClick={() => {
if (issueData.Issue.id === selectedIssueId) {
selectIssue(null);
@@ -181,8 +182,13 @@ export function IssuesTable({
selectIssue(issueData);
}}
>
{(columns.id == null || columns.id === true) && (
<TableCell className="font-medium border-r text-right p-0">
{showId && (
<TableCell
className={cn(
"font-medium border-r text-right p-0",
issueData.Issue.id === selectedIssueId && "shadow-[inset_2px_0_0_0_var(--personality)]",
)}
>
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
@@ -192,8 +198,15 @@ export function IssuesTable({
</a>
</TableCell>
)}
{(columns.title == null || columns.title === true) && (
<TableCell className="min-w-0 p-0">
{showTitle && (
<TableCell
className={cn(
"min-w-0 p-0",
!showId &&
issueData.Issue.id === selectedIssueId &&
"shadow-[inset_2px_0_0_0_var(--personality)]",
)}
>
<a
href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick}
@@ -215,7 +228,7 @@ export function IssuesTable({
</a>
</TableCell>
)}
{(columns.description == null || columns.description === true) && (
{showDescription && (
<TableCell className="overflow-hidden p-0">
<a
href={getIssueUrl(issueData.Issue.number)}
@@ -226,7 +239,7 @@ export function IssuesTable({
</a>
</TableCell>
)}
{(columns.assignee == null || columns.assignee === true) && (
{showAssignee && (
<TableCell className="h-[32px] p-0">
<a
href={getIssueUrl(issueData.Issue.number)}

View File

@@ -724,7 +724,7 @@ function Organisations({ trigger }: { trigger?: ReactNode }) {
});
}}
>
<Icon icon="trash" className="size-4" />
<Icon icon="trash" className="size-4" color="white" />
Delete
</Button>
)}
@@ -872,7 +872,7 @@ function Organisations({ trigger }: { trigger?: ReactNode }) {
});
}}
>
<Icon icon="trash" className="size-4" />
<Icon icon="trash" className="size-4" color="white" />
Delete
</Button>
)}
@@ -951,7 +951,7 @@ function Organisations({ trigger }: { trigger?: ReactNode }) {
}}
className="hover:bg-destructive/10"
>
<Icon icon="trash" className="size-4" />
<Icon icon="trash" className="size-4" color="white" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>

View File

@@ -75,11 +75,9 @@ export function TimerControls({
<div className={cn("ml-auto flex items-center", isCompact ? "gap-1" : "gap-2")}>
<IconButton
size={"sm"}
variant="dummy"
aria-label={running ? "Pause timer" : "Resume timer"}
disabled={disabled}
onClick={handleToggle}
className={"hover:opacity-70"}
>
{running ? (
<Icon icon="pause" size={isCompact ? 14 : 16} />
@@ -87,14 +85,7 @@ export function TimerControls({
<Icon icon="play" size={isCompact ? 14 : 16} />
)}
</IconButton>
<IconButton
size={"sm"}
variant="destructive"
aria-label="End timer"
disabled={disabled || !hasTimer}
onClick={handleEnd}
className={"hover:opacity-70"}
>
<IconButton size={"sm"} aria-label="End timer" disabled={disabled || !hasTimer} onClick={handleEnd}>
<Icon icon="stop" size={isCompact ? 14 : 16} color={"var(--destructive)"} />
</IconButton>
</div>

View File

@@ -11,7 +11,7 @@ const buttonVariants = cva(
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
"bg-destructive text-white hover:bg-destructive/80 active:bg-destructive/70 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:hover:bg-destructive/70",
outline: "bg-transparent border dark:hover:bg-muted/40",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",

View File

@@ -7,8 +7,8 @@ const iconButtonVariants = cva(
{
variants: {
variant: {
default: "hover:text-foreground/70",
destructive: "text-destructive hover:text-destructive/70",
default: "hover:text-foreground/70 hover:opacity-70",
destructive: "text-destructive hover:opacity-70",
yellow: "text-yellow-500 hover:text-yellow-500/70",
green: "text-green-500 hover:text-green-500/70",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",

View File

@@ -26,7 +26,7 @@ function Input({
className={cn(
"border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center border bg-transparent",
"transition-[color,box-shadow]",
"has-[:focus-visible]:border-ring",
"has-[:focus-visible]:border-[var(--personality)] ",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"aria-invalid:border-destructive",
className,

View File

@@ -15,7 +15,7 @@ function Switch({
data-slot="switch"
data-size={size}
className={cn(
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
"peer data-[state=checked]:bg-personality data-[state=unchecked]:bg-input",
"focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80",
"group/switch inline-flex shrink-0 items-center rounded-full border border-transparent",
"outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
@@ -27,7 +27,7 @@ function Switch({
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
"bg-background dark:data-[state=unchecked]:bg-personality dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
)}
/>
</SwitchPrimitive.Root>