From 9ec902a369e61b8d981a777342a9ed417e96c575 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Mon, 15 May 2023 13:34:13 +1200
Subject: [PATCH] add a different background color on op selected, based on
 user test feedback

---
 src/web/stylesheets/components/_operation.css | 11 +++++++++++
 src/web/stylesheets/themes/_classic.css       |  2 +-
 src/web/waiters/RecipeWaiter.mjs              |  3 ++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 604c23bd..75c0f0a7 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -57,6 +57,17 @@
     color: #47d047;
 }
 
+.operation.selected {
+    background-color: var(--selected-operation-bg-colour);
+}
+
+@media only screen and (min-width: 768px){
+    .operation.selected {
+        background-color: var(--op-list-operation-bg-colour);
+    }
+}
+
+
 .operation.selected > .op-icon.check-icon {
     display: inline-block;
 }
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index 49c374b6..2196108c 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -55,7 +55,7 @@
     --rec-list-operation-border-colour: #d3e8c0;
 
     --selected-operation-font-color: #c09853;
-    --selected-operation-bg-colour: #fcf8e3;
+    --selected-operation-bg-colour: rgba(217, 237, 247, 0.5);
     --selected-operation-border-colour: #fbeed5;
 
     --breakpoint-font-colour: #b94a48;
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 50043ab2..51fc6fb8 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -613,7 +613,8 @@ class RecipeWaiter {
     addSelectedClass(opDataName) {
         const ops = document.querySelectorAll(`.operation[data-name="${opDataName}"]`);
 
-        // A selected operation can occur twice if it's in favourites and the original category op-list
+        // A selected operation can occur twice if it's in favourites
+        // and the original category op-list
         ops.forEach((op => {
             op.classList.add("selected");
         }))