From 5444ca067504a9b0a20232c5e1535b571967b994 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Mon, 28 Oct 2024 17:19:04 -0400
Subject: [PATCH] Styling `number` input types.

---
 .../core/components/DateRangeInput/index.js   |  4 +---
 src/stylesheets/main.css                      | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/modules/core/components/DateRangeInput/index.js b/src/modules/core/components/DateRangeInput/index.js
index 8bbed47e..5985473f 100644
--- a/src/modules/core/components/DateRangeInput/index.js
+++ b/src/modules/core/components/DateRangeInput/index.js
@@ -44,9 +44,7 @@ const DateRangeInput = ({ currentFilter = '', datastoreUid, filterGroupUid }) =>
 
   useEffect(() => {
     let filterValue = '';
-    if (years.some((year) => {
-      return year;
-    })) {
+    if (years.some(Boolean)) {
       if (range === 'between') {
         filterValue = years.filter(Number).join(' to ');
       } else {
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index c143b58e..95db1aa7 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -329,15 +329,17 @@ input[type="url"],
 input[type="search"],
 input[type="email"],
 input[type="tel"],
-input[type="date"] {
+input[type="date"],
+input[type="number"] {
+  background: white;
+  border: solid 1px var(--search-color-grey-400);
+  border-radius: 4px;
+  box-shadow: inset 0 1px 4px var(--search-color-grey-300);
+  font-size: 1rem;
+  line-height: 1.4;
   margin: 0;
   padding: 0;
-  font-size: 1rem;
-  border: solid 1px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
   padding: 0.5rem 0.75rem;
-  line-height: 1.4;
   width: 100%;
 }
 
@@ -354,9 +356,11 @@ input[type="tel"]:read-only,
 input[type="text"]:disabled,
 input[type="text"]:read-only,
 input[type="url"]:disabled,
-input[type="url"]:read-only {
-  background: #FAFAFA;
-  border-color: #CCC;
+input[type="url"]:read-only,
+input[type="number"]:disabled,
+input[type="number"]:read-only {
+  background: var(--search-color-grey-200);
+  border-color: var(--search-color-grey-400);
   color: var(--search-color-grey-600);
   cursor: not-allowed;
 }