From a9b0917179ca397873c2b7fea1e5489bc7561b59 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 27 Oct 2022 16:25:05 +0000
Subject: [PATCH] Bug 31943: Date inputs wider than other inputs

This patch sets a width on Flatpickr instances so that they better match
the typical width of a text input field.

The patch also corrects the "X" ("clear date") link color to return it
to the original red color. In doing this I've defined a new
$warning-text-color variable and replaced other instances of #CC0000
with this variable.

I've also tweaked the appearance of the Flatpickr shortcut links
("Today," "Tomorrow," etc) so that they match other links in Koha.

To test, apply the patch and rebuild the staff interface CSS.

- Go to patrons and locate a patron record.
- Edit the patron.
- In the patron entry form, confirm that the "Date of birth" field
  matches the width of the text fields around it.
- The "X" should be red.
- Click the date of birth field to trigger the calendar popup.
- The "Yesterday" and "Today" links should be colored the default green
  seen elsewhere in the staff interface.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/css/src/_flatpickr.scss              |  9 +++++--
 .../prog/css/src/_variables.scss              |  1 +
 .../prog/css/src/staff-global.scss            | 26 +++++++++----------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
index 34d1ce6ffe..1c2357c406 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
@@ -946,6 +946,7 @@ span.flatpickr-weekday {
     border-style: inset;
     border-width: 1px;
     padding: 3px 3px 3px 20px;
+    width: calc( 100% - 40px );
 
     &:focus {
         border-radius: 0;
@@ -986,10 +987,14 @@ span.flatpickr-weekday {
         .shortcut-buttons-flatpickr-button {
             background: transparent none;
             border: 0;
-            color: #004D99;
+            color: #006100;
             font-size: 90%;
             margin: 2px;
 
+            &:active {
+                box-shadow: none;
+            }
+
             &:disabled {
                 color: #999;
 
@@ -999,7 +1004,7 @@ span.flatpickr-weekday {
             }
 
             &:hover {
-                color: #538200;
+                text-decoration: underline;
             }
         }
     }
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
index 3222c5caa5..55c2111c92 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
@@ -1,4 +1,5 @@
 $green-text-color: #006100;
+$warning-text-color: #CC0000;
 $background-color-primary: #408540;
 $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9);
 $background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 40 );
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 497b060314..065a3ed280 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -69,12 +69,12 @@ a {
     }
 
     &.clear_date {
-        color: $green-text-color;
+        color: $warning-text-color;
         font-size: 130%;
         vertical-align: middle;
 
         &:hover {
-            color: $green-text-color;
+            color: lighten( $warning-text-color, 35% );
             text-decoration: none;
         }
     }
@@ -629,7 +629,7 @@ label,
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
     }
 }
 
@@ -761,7 +761,7 @@ ol {
 
 .overdue,
 .debit {
-    color: #CC0000;
+    color: $warning-text-color;
     font-weight: bold;
 }
 
@@ -1007,7 +1007,7 @@ div {
 
         i {
             &.fa-exclamation {
-                color: #CC0000;
+                color: $warning-text-color;
                 font-style: italic;
                 padding: 0 .3em;
             }
@@ -1430,13 +1430,13 @@ input[type='text']:read-only:focus {
 }
 
 .error {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 // Font Awesome icons
 i {
     &.error {
-        color: #CC0000;
+        color: $warning-text-color;
     }
 
     &.success {
@@ -1712,7 +1712,7 @@ i {
 .deny {
     i {
         &.fa {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2491,7 +2491,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2514,7 +2514,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -3581,7 +3581,7 @@ span {
     }
 
     &.circ-hlt {
-        color: #CC0000;
+        color: $warning-text-color;
         font-weight: bold;
     }
 
@@ -3596,7 +3596,7 @@ span {
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
         font-style: italic;
         margin-left: .5em;
     }
@@ -3736,7 +3736,7 @@ input.renew {
 }
 
 .onsite_checkout {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 .onsite-checkout-only {
-- 
2.39.5