From 5d3301341e2bb9a5e1f60041f96ddb5b9c5fb3e3 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Fri, 14 Apr 2023 19:37:50 +0000
Subject: [PATCH] LP1984007 Acq warning/stop percentage styles

Styles the background and font color of warning and stop percentages and
adds an icon prefix, in both the dropdown options and the PO summary
table. These colors are in keeping with the less intense badges in my
branch for bug 1999282.

The margin/padding styles for the dropdown buttons are not ideal; it
would be better to have the warning/stop classes applied to the parent
button rather than the inner span. We should revisit this when the CSS
:has() selector has full support in Firefox.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../staff/acq/lineitem/copy-attrs.component.css    | 49 +++++++++++++++++++---
 .../eg2/src/app/staff/acq/po/summary.component.css | 26 ++++++++++++
 .../eg2/src/app/staff/acq/po/summary.component.ts  |  1 +
 3 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
index ca6cb05f1a..3065883727 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
@@ -1,7 +1,46 @@
-.fund-balance-state-stop {
-    color: #c00;
-    font-weight: bold;
+button.dropdown-item {
+    padding: 0;
 }
-.fund-balance-state-warning {
-    color: #c93;
+
+button.dropdown-item span {
+    display: block;
+    padding: .25rem 1.5rem;
+}
+
+button.dropdown-item .fund-balance-state-stop {
+    background: #f8d7da;
+    color: #58151c;
+    font-weight: 600;
+    padding-left: .2rem;
+}
+
+button.dropdown-item.active .fund-balance-state-stop {
+    background-color: #F1AFB5;
+}
+
+/* show octagon/stop ! ("report") icon */
+.fund-balance-state-stop::before {
+    content: "\e160";
+    font-family: "Material Icons";
+    font-weight: normal;
+    margin-right: .3ch;
+}
+
+button.dropdown-item .fund-balance-state-warning {
+    background-color: #ffe69c;
+    color: #723809;
+    font-weight: 600;
+    padding-left: .2rem;
+}
+
+button.dropdown-item.active .fund-balance-state-warning {
+    background-color: #FFDA6A;
+}
+
+/* show triangle ! ("warning") icon */
+.fund-balance-state-warning::before {
+    content: "\e002";
+    font-family: "Material Icons";
+    font-weight: normal;
+    margin-right: .3ch;
 }
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
new file mode 100644
index 0000000000..363536b9e1
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
@@ -0,0 +1,26 @@
+.text-danger {
+  background-color: #f8d7da;
+  color: #58151c !important;
+  font-weight: 600;
+  padding: 0 .25rem;
+}
+
+.text-danger::before {
+  content: "\e160";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}
+
+.bg-warning {
+  background-color: #ffe69c !important;
+  color: #723809;
+  font-weight: 600;
+}
+
+.bg-warning::before {
+  content: "\e002";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
index 8484cf0693..db1e66c0ed 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
@@ -23,6 +23,7 @@ const PO_ACTIVATION_WARNINGS = [
 
 @Component({
   templateUrl: 'summary.component.html',
+  styleUrls: ['./summary.component.css'],
   selector: 'eg-acq-po-summary'
 })
 export class PoSummaryComponent implements OnInit, OnDestroy {
-- 
2.11.0