Update button styles and icon for search

Author: LanesGood

public/static/icon-magnifier-left.svg

@@ -6,7 +6,7 @@ import Link from 'next/link'
 
 const URL = process.env.APP_URL
 
-const style = css.global`
+const ButtonStyles = css.global`
   .button {
     display: inline-block;
     text-align: center;
@@ -100,7 +100,7 @@ const style = css.global`
   }
 
   .button.submit {
-    background: ${theme.colors.primaryLite};
+    background-color: ${theme.colors.primaryLite};
   }
 
   .button.disabled {
@@ -159,7 +159,30 @@ export default function Button({
         value='value'
       >
         {children || value}
-        <style jsx>{style}</style>
+        <style jsx>{ButtonStyles}</style>
+        <style jsx>{`
+          .button {
+            box-shadow: ${flat && 'none'};
+            position: relative;
+          }
+          .button::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            mask: ${useIcon
+              ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
+              : 'none'};
+            mask-repeat: no-repeat;
+            mask-position: center;
+            z-index: 2;
+            background-color: ${useIcon
+              ? theme.colors.primaryColor
+              : 'initial'};
+          }
+        `}</style>
       </button>
     )
   }
@@ -173,7 +196,30 @@ export default function Button({
         id={id}
       >
         {children || value}
-        <style jsx>{style}</style>
+        <style jsx>{ButtonStyles}</style>
+        <style jsx>{`
+          .button {
+            box-shadow: ${flat && 'none'};
+            position: relative;
+          }
+          .button::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            mask: ${useIcon
+              ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
+              : 'none'};
+            mask-repeat: no-repeat;
+            mask-position: center;
+            z-index: 2;
+            background-color: ${useIcon
+              ? theme.colors.primaryColor
+              : 'initial'};
+          }
+        `}</style>
       </Link>
     )
   }
@@ -185,15 +231,28 @@ export default function Button({
       disabled={disabled}
     >
       {children}
-      <style jsx>{style}</style>
+      <style jsx>{ButtonStyles}</style>
       <style jsx>{`
         .button {
           box-shadow: ${flat && 'none'};
-          background-image: ${useIcon
+          position: relative;
+          min-width: 1.75rem;
+          min-height: 1.75rem;
+        }
+        .button::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          mask: ${useIcon
             ? `url(${join(URL, `/static/icon-${useIcon}.svg`)})`
             : 'none'};
-          min-height: ${useIcon && '1.75rem'};
-          min-width: ${useIcon && '1.75rem'};
+          mask-repeat: no-repeat;
+          mask-position: center;
+          z-index: 2;
+          background-color: ${useIcon ? theme.colors.primaryColor : 'initial'};
         }
       `}</style>
     </div>

src/components/button.js

@@ -216,6 +216,14 @@ export const globalStyles = css.global`
     height: 2.5rem;
   }
 
+  .form-control input#search {
+    margin: 0;
+    padding: 0.375rem 1rem 0.375rem 0.5rem;
+  }
+
+  .form-control input#search + .button {
+    margin-left: -2px;
+  }
   .status--alert {
     font-size: 0.875rem;
     color: ${theme.colors.secondaryColor};

src/components/layout.js

@@ -48,7 +48,10 @@ const SearchInput = ({ onSearch, 'data-cy': dataCy }) => {
       initialValues={{ search: '' }}
       onSubmit={({ search }) => onSearch(search)}
     >
-      <Form className='form-control justify-start'>
+      <Form
+        className='form-control justify-start'
+        style={{ alignItems: 'stretch' }}
+      >
         <Field
           data-cy={`${dataCy}-search-input`}
           type='search'
@@ -61,9 +64,9 @@ const SearchInput = ({ onSearch, 'data-cy': dataCy }) => {
           data-cy={`${dataCy}-search-submit`}
           type='submit'
           variant='submit'
-        >
-          Search
-        </Button>
+          useIcon='magnifier-left'
+          flat
+        />
         <AutoSubmitSearch />
       </Form>
     </Formik>