From d055bc8e73fb60969656e768fa5246dc32a511e1 Mon Sep 17 00:00:00 2001
From: Ian Wienand <iwienand@redhat.com>
Date: Mon, 19 Sep 2022 09:18:09 +1000
Subject: web: Differentiate console entries

I've noticed that when making the console page very narrow (mobile)
the entries are difficult to differentiate in their compressed form.

This proposes adding alternating colors on the play entries to
differentiate them.  Since the grey is used between elements, the
highlight is modified to the the lightest blue in the PF family.
Putting a small border-radius on this makes it look a bit more
differentiated.

Change-Id: I7afcb64a5e41348f14bd297c8c8bde27312dff97
---
 web/src/containers/build/Console.jsx | 5 ++++-
 web/src/index.css                    | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index 8fa79a125..94c5f6f07 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -428,7 +428,10 @@ class PlayBook extends React.Component {
         <DataListContent isHidden={!this.state.expanded}>
 
           {playbook.plays.map((play, idx) => (
-            <DataList isCompact={true} key={this.makePlayId(play, idx)}  style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
+            <DataList isCompact={true}
+                      key={this.makePlayId(play, idx)}
+                      className="zuul-console-plays"
+                      style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
               <DataListItem isExpanded={this.state.playsExpanded.includes(this.makePlayId(play, idx))}>
                 <DataListItemRow>
                   <DataListToggle
diff --git a/web/src/index.css b/web/src/index.css
index 380598f95..ce5470357 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -315,9 +315,14 @@ pre.version {
     border: none
 }
 
+.zuul-console-plays .pf-c-data-list__item:nth-child(even) {
+    background: var(--pf-global--BackgroundColor--200);
+    border-radius: 5px;
+}
+
 .zuul-console .pf-c-data-list__item:hover
 {
-    background: var(--pf-global--BackgroundColor--light-200);
+    background: var(--pf-global--palette--blue-50);
 }
 
 .zuul-console .pf-c-data-list__item:hover::before
-- 
cgit v1.2.1