From f96c0e39c93cb89067d9355c2b43450d48982080 Mon Sep 17 00:00:00 2001
From: Ian Wienand <iwienand@redhat.com>
Date: Mon, 19 Sep 2022 11:22:34 +1000
Subject: web: Show failed tasks in red on task page

To keep consistency with the console page
(I6df896497f3a20d639fc67f256e1d2566aa2903c), put the failed tasks in a
light red box to highlight the failure case.

Change-Id: I48e1b616663919787fb52d53ee27882efea825f9
---
 web/src/containers/build/BuildOutput.jsx | 2 +-
 web/src/index.css                        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx
index 2066852da..4220bdd1a 100644
--- a/web/src/containers/build/BuildOutput.jsx
+++ b/web/src/containers/build/BuildOutput.jsx
@@ -89,7 +89,7 @@ class BuildOutput extends React.Component {
   renderFailedTask (host, task) {
     const max_lines = 42
     return (
-      <Card key={host + task.zuul_log_id}>
+      <Card key={host + task.zuul_log_id} className="zuul-task-summary-failed">
         <CardHeader>
           <TimesIcon style={{ color: 'var(--pf-global--danger-color--100)' }}/>
             &nbsp;Task&nbsp;<strong>{task.name}</strong>&nbsp;
diff --git a/web/src/index.css b/web/src/index.css
index 7536641cd..6fec50911 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -432,3 +432,7 @@ details.foldable[open] summary::before {
 {
     background: var(--pf-global--active-color--400);
 }
+
+.zuul-task-summary-failed.pf-c-card {
+    background: var(--pf-global--palette--red-50);
+}
-- 
cgit v1.2.1