From 780374d2239c6dc62543a9088d60369f48fbc930 Mon Sep 17 00:00:00 2001
From: "Daniel W. Hieber" <dwhieb@gmail.com>
Date: Wed, 17 Jul 2024 13:22:22 -0500
Subject: [PATCH] NEW: Reset Button (#154)

closes #154
---
 classes/button.css      | 27 +++++++++++++++++++++++----
 pages/Search/Search.css |  8 +++++++-
 pages/Search/Search.hbs |  1 +
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/classes/button.css b/classes/button.css
index ce445a6c..4983094e 100644
--- a/classes/button.css
+++ b/classes/button.css
@@ -4,9 +4,8 @@
   --gray-saturation: 15%;
 
   background-color: hsl(var(--gray-hue) var(--gray-saturation) 85%);
-  border:           1px solid #CCC;
   border-radius:    var(--border-radius);
-  box-shadow:       inset 0px 0px 3px 2px hsl(var(--gray-hue) var(--gray-saturation) 95%),
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--gray-hue) var(--gray-saturation) 95%),
                     1px 1px 2px #CCC;
   color:            black;
   cursor:           pointer;
@@ -34,8 +33,7 @@
   --green-saturation: 15%;
 
   background-color: hsl(var(--green-hue) var(--green-saturation) 45%);
-  border:           1px solid var(--asparagus);
-  box-shadow:       inset 0px 0px 3px 2px hsl(var(--green-hue) var(--green-saturation) 55%),
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--green-hue) var(--green-saturation) 55%),
                     1px 1px 2px #CCC;
   color:            white;
 
@@ -48,4 +46,25 @@
     box-shadow:       inset 0px 1px 2px #000;
   }
 
+}
+
+.button.blue {
+
+  --blue-hue:        180;
+  --blue-saturation: 30%;
+
+  background-color: hsl(var(--blue-hue) var(--blue-saturation) 45%);
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--blue-hue) var(--blue-saturation) 55%),
+                    1px 1px 2px #CCC;
+  color:            white;
+
+  &:hover {
+    background-color: hsl(var(--blue-hue) var(--blue-saturation) 35%);
+  }
+
+  &:active {
+    background-color: hsl(var(--blue-hue) var(--blue-saturation) 25%);
+    box-shadow:       inset 0px 1px 2px #000;
+  }
+
 }
\ No newline at end of file
diff --git a/pages/Search/Search.css b/pages/Search/Search.css
index 60a28a20..656c4b41 100644
--- a/pages/Search/Search.css
+++ b/pages/Search/Search.css
@@ -207,7 +207,13 @@ search {
 }
 
 .search-form {
-  max-inline-size: 30em;
+
+  max-inline-size: 35em;
+
+  & button {
+    inline-size: 5em;
+  }
+
 }
 
 .sort-button {
diff --git a/pages/Search/Search.hbs b/pages/Search/Search.hbs
index 538f2ef7..1242209e 100644
--- a/pages/Search/Search.hbs
+++ b/pages/Search/Search.hbs
@@ -17,6 +17,7 @@
           type=search
         >
         <button class='button green' type=submit>Search</button>
+        <button class='button blue' type=reset>Reset</button>
       </div>
       <span class=help-text>Searches forms (in any orthography) and definitions for a match anywhere within the string. Search is not case sensitive. Leave blank and press "Search" to display all components.</span>
     </form>