From f490c89954829b24bd8a1fa8756721428578bba8 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Mon, 29 Jun 2020 17:38:04 -0700
Subject: [PATCH] fix: Center align the search icon in the search input

---
 src/components/FeatherIcon.js          |  3 ++-
 src/components/SearchInput.js          | 10 ++++++++--
 src/components/SearchInput.module.scss | 14 +++++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index e1bd4dfb2..8ba59a63d 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './FeatherIcon.module.scss';
 
-const FeatherIcon = ({ className, name, size = '1em' }) => {
+const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
   const paths = ICONS[name];
 
   return paths ? (
     <svg
+      {...props}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={cx(styles.icon, className)}
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index 94a491f7f..a2504062d 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -24,11 +24,17 @@ const SearchInput = ({ className, onClear, value, ...props }) => {
       <div className={styles.buttonContainer}>
         <button
           onClick={handleClick}
-          className={styles.button}
+          className={cx(styles.button, {
+            [styles.clearButton]: Boolean(value),
+          })}
           onKeyDown={(e) => e.preventDefault()}
           type="button"
         >
-          <FeatherIcon name={value ? 'x' : 'search'} className={styles.icon} />
+          <FeatherIcon
+            name={value ? 'x' : 'search'}
+            className={styles.icon}
+            onClick={handleClick}
+          />
         </button>
       </div>
     </div>
diff --git a/src/components/SearchInput.module.scss b/src/components/SearchInput.module.scss
index 6a5d7a54b..e30271e18 100644
--- a/src/components/SearchInput.module.scss
+++ b/src/components/SearchInput.module.scss
@@ -6,6 +6,7 @@
 }
 
 .icon {
+  display: block;
   stroke: var(--color-neutrals-700);
 }
 
@@ -16,15 +17,22 @@
   padding-right: calc(1rem + 1em);
 }
 
-.button[type='button'] {
+.button {
+  display: block;
   background-color: transparent;
   border: none;
   margin: 0;
-  padding: 0.25rem;
+  padding: 0;
+  outline: none;
+}
+
+.clearButton {
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .buttonContainer {
   position: absolute;
   right: 0.5rem;
-  bottom: 0.25rem;
 }