From bdda522971f7cc3acd1e63b0d0eb4358e132417a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 26 Aug 2026 12:33:32 -0600 Subject: [PATCH] Make the selected-card dashed outline thicker so the ants box reads more clearly in the create flow. Co-authored-by: Cursor --- app/components/cards/Selection/Selection.view.tsx | 2 +- tests/unit/Selection.test.jsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/cards/Selection/Selection.view.tsx b/app/components/cards/Selection/Selection.view.tsx index 290c900..49baedc 100644 --- a/app/components/cards/Selection/Selection.view.tsx +++ b/app/components/cards/Selection/Selection.view.tsx @@ -40,7 +40,7 @@ export function SelectionView({ }: SelectionViewProps) { const borderClass = "border border-[var(--color-border-default-primary)]"; const selectedBorder = selected - ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]" + ? "outline outline-4 outline-dashed outline-black outline-offset-[-4px]" : ""; // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev). diff --git a/tests/unit/Selection.test.jsx b/tests/unit/Selection.test.jsx index 52af666..97a8cfa 100644 --- a/tests/unit/Selection.test.jsx +++ b/tests/unit/Selection.test.jsx @@ -38,6 +38,8 @@ describe("Selection Component", () => { expect(screen.getByText("SELECTED")).toBeInTheDocument(); const card = screen.getByRole("button"); expect(card).toHaveClass("outline-dashed"); + expect(card).toHaveClass("outline-4"); + expect(card).toHaveClass("outline-offset-[-4px]"); }); it("applies horizontal layout by default", () => {