personality colour implementations

packages/frontend/src/App.css

@@ -66,10 +66,10 @@
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(61.275% 0.20731 24.986);
   --border: oklch(73.802% 0.00008 271.152);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: var(--personality);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -105,7 +105,7 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(100% 0.00011 271.152 / 0.22);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --ring: var(--personality);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -132,6 +132,10 @@
     background-color: var(--personality);
     color: var(--background);
   }
+  a:focus-visible {
+    outline: 1px solid var(--personality);
+    outline-offset: 2px;
+  }
 }
 
 * {

packages/frontend/src/components/issue-comments.tsx

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

packages/frontend/src/components/issues-table.tsx

@@ -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) && (
+          {showTitle && <TableHead className="text-xs font-medium text-muted-foreground">Title</TableHead>}
-            <TableHead className="text-xs font-medium text-muted-foreground">Title</TableHead>
+          {showDescription && (
-          )}
-          {(columns.description == null || columns.description === true) && (
             <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) && (
+          {showAssignee && <TableHead className="w-[1%]"></TableHead>}
-            <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) && (
+            {showId && (
-              <TableCell className="font-medium border-r text-right p-0">
+              <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) && (
+            {showTitle && (
-              <TableCell className="min-w-0 p-0">
+              <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)}

packages/frontend/src/components/organisations.tsx

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

packages/frontend/src/components/timer-controls.tsx

@@ -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
+          <IconButton size={"sm"} aria-label="End timer" disabled={disabled || !hasTimer} onClick={handleEnd}>
-            size={"sm"}
-            variant="destructive"
-            aria-label="End timer"
-            disabled={disabled || !hasTimer}
-            onClick={handleEnd}
-            className={"hover:opacity-70"}
-          >
             <Icon icon="stop" size={isCompact ? 14 : 16} color={"var(--destructive)"} />
           </IconButton>
         </div>

packages/frontend/src/components/ui/button.tsx

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

packages/frontend/src/components/ui/icon-button.tsx

@@ -7,8 +7,8 @@ const iconButtonVariants = cva(
   {
     variants: {
       variant: {
-        default: "hover:text-foreground/70",
+        default: "hover:text-foreground/70 hover:opacity-70",
-        destructive: "text-destructive hover:text-destructive/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",

packages/frontend/src/components/ui/input.tsx

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

packages/frontend/src/components/ui/switch.tsx

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

packages/frontend/src/pages/Timeline.tsx

@@ -330,13 +330,13 @@ export default function Timeline() {
                                 >
                                   <div
                                     className={cn(
-                                      "absolute inset-y-0 w-px bg-primary",
+                                      "absolute inset-y-0 w-px bg-[var(--personality)]",
                                       showTodayLabel && "mt-1",
                                     )}
                                   />
                                   {showTodayLabel && (
                                     <div className="absolute -top-1.5">
-                                      <span className="bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground whitespace-nowrap">
+                                      <span className="bg-[var(--personality)] px-1 py-0.5 text-[10px] font-semibold text-[var(--background)] whitespace-nowrap">
                                         TODAY
                                       </span>
                                     </div>