feat(dashboard): redesign UI to match production design #3
Annotations
6 errors
|
Run pnpm test:coverage
Process completed with exit code 1.
|
|
Run pnpm test:coverage:
apps/web/src/components/templates/__tests__/TaskDetailPanel.test.tsx#L532
TestingLibraryElementError: Unable to find an element by: [data-testid="task-detail-close-action"]
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
data-testid="task-detail-overlay"
style="pointer-events: auto;"
/>
<div
aria-describedby="task-detail-description"
aria-labelledby="task-detail-title"
class="fixed right-0 top-0 z-50 h-full w-full max-w-[480px] flex flex-col bg-background-card shadow-xl border-l border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-300"
data-state="open"
data-testid="task-detail-panel"
id="radix-_r_17_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<h2
class="sr-only"
id="task-detail-title"
>
Test Task
</h2>
<div
class="flex items-center justify-between border-b border-border px-4 py-3"
data-testid="task-detail-header"
>
<div
class="flex items-center gap-2"
>
<span
aria-label="Active"
class="relative inline-flex shrink-0 rounded-full bg-status-active h-2 w-2"
role="status"
>
<span
aria-hidden="true"
class="absolute inset-0 animate-ping rounded-full opacity-75 bg-status-active"
/>
</span>
<span
class="font-medium font-mono text-xs uppercase tracking-wider text-text-muted"
>
TASK DETAIL
</span>
</div>
<button
aria-label="Close panel"
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-text-secondary hover:bg-background-elevated hover:text-text focus-visible:ring-border text-sm h-8 w-8 p-0"
data-testid="task-detail-close-button"
type="button"
>
<svg
aria-hidden="true"
class="lucide lucide-x shrink-0"
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6 6 18"
/>
<path
d="m6 6 12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 overflow-y-auto p-6"
data-testid="task-detail-body"
>
<div
class="flex flex-col gap-4"
>
<h2
class="text-xl font-semibold text-text"
data-testid="task-detail-visible-title"
>
Test Task
</h2>
<div
class="flex items-center gap-2"
>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-status-active/15 text-status-active px-2 py-0.5 text-xs"
>
In Progress
</span>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-priority-high/15 text-priority-high px-2 py-0.5 text-xs"
>
High
</span>
</div>
<p
class="text-sm text-text-secondary"
id="task-detail-description"
>
Test task description
</p>
</div>
|
|
Run pnpm test:coverage:
apps/web/src/components/templates/__tests__/TaskDetailPanel.test.tsx#L502
TestingLibraryElementError: Unable to find an element by: [data-testid="task-detail-delete-button"]
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
data-testid="task-detail-overlay"
style="pointer-events: auto;"
/>
<div
aria-describedby="task-detail-description"
aria-labelledby="task-detail-title"
class="fixed right-0 top-0 z-50 h-full w-full max-w-[480px] flex flex-col bg-background-card shadow-xl border-l border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-300"
data-state="open"
data-testid="task-detail-panel"
id="radix-_r_14_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<h2
class="sr-only"
id="task-detail-title"
>
Test Task
</h2>
<div
class="flex items-center justify-between border-b border-border px-4 py-3"
data-testid="task-detail-header"
>
<div
class="flex items-center gap-2"
>
<span
aria-label="Active"
class="relative inline-flex shrink-0 rounded-full bg-status-active h-2 w-2"
role="status"
>
<span
aria-hidden="true"
class="absolute inset-0 animate-ping rounded-full opacity-75 bg-status-active"
/>
</span>
<span
class="font-medium font-mono text-xs uppercase tracking-wider text-text-muted"
>
TASK DETAIL
</span>
</div>
<button
aria-label="Close panel"
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-text-secondary hover:bg-background-elevated hover:text-text focus-visible:ring-border text-sm h-8 w-8 p-0"
data-testid="task-detail-close-button"
type="button"
>
<svg
aria-hidden="true"
class="lucide lucide-x shrink-0"
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6 6 18"
/>
<path
d="m6 6 12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 overflow-y-auto p-6"
data-testid="task-detail-body"
>
<div
class="flex flex-col gap-4"
>
<h2
class="text-xl font-semibold text-text"
data-testid="task-detail-visible-title"
>
Test Task
</h2>
<div
class="flex items-center gap-2"
>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-status-active/15 text-status-active px-2 py-0.5 text-xs"
>
In Progress
</span>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-priority-high/15 text-priority-high px-2 py-0.5 text-xs"
>
High
</span>
</div>
<p
class="text-sm text-text-secondary"
id="task-detail-description"
>
Test task description
</p>
</div>
|
|
Run pnpm test:coverage:
apps/web/src/components/templates/__tests__/TaskDetailPanel.test.tsx#L375
TestingLibraryElementError: Unable to find an element by: [data-testid="task-detail-close-action"]
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent/50 h-10 px-4 text-base"
data-testid="trigger-button"
>
Open Panel
</button>
</div>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
data-testid="task-detail-overlay"
style="pointer-events: auto;"
/>
<div
aria-describedby="task-detail-description"
aria-labelledby="task-detail-title"
class="fixed right-0 top-0 z-50 h-full w-full max-w-[480px] flex flex-col bg-background-card shadow-xl border-l border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-300"
data-state="open"
data-testid="task-detail-panel"
id="radix-_r_r_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<h2
class="sr-only"
id="task-detail-title"
>
Test Task
</h2>
<div
class="flex items-center justify-between border-b border-border px-4 py-3"
data-testid="task-detail-header"
>
<div
class="flex items-center gap-2"
>
<span
aria-label="Active"
class="relative inline-flex shrink-0 rounded-full bg-status-active h-2 w-2"
role="status"
>
<span
aria-hidden="true"
class="absolute inset-0 animate-ping rounded-full opacity-75 bg-status-active"
/>
</span>
<span
class="font-medium font-mono text-xs uppercase tracking-wider text-text-muted"
>
TASK DETAIL
</span>
</div>
<button
aria-label="Close panel"
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-text-secondary hover:bg-background-elevated hover:text-text focus-visible:ring-border text-sm h-8 w-8 p-0"
data-testid="task-detail-close-button"
type="button"
>
<svg
aria-hidden="true"
class="lucide lucide-x shrink-0"
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6 6 18"
/>
<path
d="m6 6 12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 overflow-y-auto p-6"
data-testid="task-detail-body"
>
<div
class="flex flex-col gap-4"
>
<h2
class="text-xl font-semibold text-text"
data-testid="task-detail-visible-title"
>
Test Task
</h2>
<div
class="flex items-center gap-2"
>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-status-active/15 text-status-active px-2 py-0.5 text-xs"
>
In Progress
|
|
Run pnpm test:coverage:
apps/web/src/components/templates/__tests__/TaskDetailPanel.test.tsx#L206
TestingLibraryElementError: Unable to find an element by: [data-testid="task-detail-close-action"]
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent/50 h-10 px-4 text-base"
data-testid="trigger-button"
>
Open Panel
</button>
</div>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
data-testid="task-detail-overlay"
style="pointer-events: auto;"
/>
<div
aria-describedby="task-detail-description"
aria-labelledby="task-detail-title"
class="fixed right-0 top-0 z-50 h-full w-full max-w-[480px] flex flex-col bg-background-card shadow-xl border-l border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-300"
data-state="open"
data-testid="task-detail-panel"
id="radix-_r_c_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<h2
class="sr-only"
id="task-detail-title"
>
Test Task
</h2>
<div
class="flex items-center justify-between border-b border-border px-4 py-3"
data-testid="task-detail-header"
>
<div
class="flex items-center gap-2"
>
<span
aria-label="Active"
class="relative inline-flex shrink-0 rounded-full bg-status-active h-2 w-2"
role="status"
>
<span
aria-hidden="true"
class="absolute inset-0 animate-ping rounded-full opacity-75 bg-status-active"
/>
</span>
<span
class="font-medium font-mono text-xs uppercase tracking-wider text-text-muted"
>
TASK DETAIL
</span>
</div>
<button
aria-label="Close panel"
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-text-secondary hover:bg-background-elevated hover:text-text focus-visible:ring-border text-sm h-8 w-8 p-0"
data-testid="task-detail-close-button"
type="button"
>
<svg
aria-hidden="true"
class="lucide lucide-x shrink-0"
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6 6 18"
/>
<path
d="m6 6 12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 overflow-y-auto p-6"
data-testid="task-detail-body"
>
<div
class="flex flex-col gap-4"
>
<h2
class="text-xl font-semibold text-text"
data-testid="task-detail-visible-title"
>
Test Task
</h2>
<div
class="flex items-center gap-2"
>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-status-active/15 text-status-active px-2 py-0.5 text-xs"
>
In Progress
|
|
Run pnpm test:coverage:
apps/web/src/components/templates/__tests__/TaskDetailPanel.test.tsx#L76
TestingLibraryElementError: Unable to find an element by: [data-testid="task-detail-delete-button"]
Ignored nodes: comments, script, style
<body
data-scroll-locked="1"
style="pointer-events: none;"
>
<span
aria-hidden="true"
data-aria-hidden="true"
data-radix-focus-guard=""
style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
tabindex="0"
/>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent/50 h-10 px-4 text-base"
data-testid="trigger-button"
>
Open Panel
</button>
</div>
<div
aria-hidden="true"
class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
data-aria-hidden="true"
data-state="open"
data-testid="task-detail-overlay"
style="pointer-events: auto;"
/>
<div
aria-describedby="task-detail-description"
aria-labelledby="task-detail-title"
class="fixed right-0 top-0 z-50 h-full w-full max-w-[480px] flex flex-col bg-background-card shadow-xl border-l border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:duration-300 data-[state=open]:duration-300"
data-state="open"
data-testid="task-detail-panel"
id="radix-_r_0_"
role="dialog"
style="pointer-events: auto;"
tabindex="-1"
>
<h2
class="sr-only"
id="task-detail-title"
>
Test Task
</h2>
<div
class="flex items-center justify-between border-b border-border px-4 py-3"
data-testid="task-detail-header"
>
<div
class="flex items-center gap-2"
>
<span
aria-label="Active"
class="relative inline-flex shrink-0 rounded-full bg-status-active h-2 w-2"
role="status"
>
<span
aria-hidden="true"
class="absolute inset-0 animate-ping rounded-full opacity-75 bg-status-active"
/>
</span>
<span
class="font-medium font-mono text-xs uppercase tracking-wider text-text-muted"
>
TASK DETAIL
</span>
</div>
<button
aria-label="Close panel"
class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent text-text-secondary hover:bg-background-elevated hover:text-text focus-visible:ring-border text-sm h-8 w-8 p-0"
data-testid="task-detail-close-button"
type="button"
>
<svg
aria-hidden="true"
class="lucide lucide-x shrink-0"
fill="none"
height="16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6 6 18"
/>
<path
d="m6 6 12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 overflow-y-auto p-6"
data-testid="task-detail-body"
>
<div
class="flex flex-col gap-4"
>
<h2
class="text-xl font-semibold text-text"
data-testid="task-detail-visible-title"
>
Test Task
</h2>
<div
class="flex items-center gap-2"
>
<span
class="inline-flex items-center justify-center rounded-full font-medium bg-status-active/15 text-status-active px-2 py-0.5 text-xs"
>
In Progress
|
Loading