From 895c1bdce8d7c788fd759d9ba5eac312aef6b3d6 Mon Sep 17 00:00:00 2001
From: adjeiessel <essel.adjei-mensah@zeppelin.com>
Date: Tue, 31 Mar 2020 16:28:54 +0200
Subject: [PATCH 1/5] style(component): 1 . added a new class modifier
 searchfield

#146
---
 src/elements/search/SearchPage.jsx |  2 +-
 src/elements/search/_search.scss   | 36 ++++++++++++++++++++----------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx
index d4a3743..d9dc322 100644
--- a/src/elements/search/SearchPage.jsx
+++ b/src/elements/search/SearchPage.jsx
@@ -13,7 +13,7 @@ function SearchPage() {
         >
           <input
             type="text"
-            className="zep-search__input"
+            className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left"
             placeholder="Search"
             id={`search-${elem}`}
           />
diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss
index ecb0ddd..5b86a73 100644
--- a/src/elements/search/_search.scss
+++ b/src/elements/search/_search.scss
@@ -10,20 +10,32 @@
     color: map-deep-get($guidelines, 'color', 'font');
     width: 100%;
     height: 3rem;
-    border: none;
     background-color: white;
-    padding-left: 1.25rem;
+    padding-left: 3.25rem;
     padding-top: 0.25rem;
-    border-bottom: 3px solid;
-    border-bottom-color: map-deep-get(
-      $guidelines,
-      'color',
-      'global',
-      lightGray
-    );
+    border: 1px solid map-deep-get($guidelines, 'color', 'global', lightGray);
+    &--rounded-left {
+      background: rgb(255, 255, 255);
+      border-radius: 30px 0px 0px 30px;
+    }
+    &--searchfield {
+      border: none;
+      padding-left: 1.25rem;
+      border-bottom: 1px solid
+        map-deep-get($guidelines, 'color', 'global', lightGray);
+      @include themify($color_themes) {
+        &:focus {
+          border-bottom-color: themed('primary');
+        }
+      }
+      + .#{$prefix}search__icon {
+        right: 0;
+        left: unset;
+      }
+    }
     @include themify($color_themes) {
       &:focus {
-        border-bottom-color: themed('primary');
+        border-color: themed('primary');
         @extend %typo-bold-body1;
         outline: none;
       }
@@ -35,8 +47,8 @@
 
   .#{$prefix}search__icon {
     position: absolute;
-    top: 11px;
-    right: 0;
+    top: 15px;
+    left: 20px;
     width: 24px;
     height: 24px;
     color: black;

From d3b4a9ed7064cd6d061e1513eb2dd8bcf3b74e27 Mon Sep 17 00:00:00 2001
From: Alyssa <ca.butler10@gmail.com>
Date: Wed, 1 Apr 2020 08:43:10 +0200
Subject: [PATCH 2/5] fix(searchbar): added different views

---
 src/elements/search/SearchPage.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx
index d9dc322..2b7fdf8 100644
--- a/src/elements/search/SearchPage.jsx
+++ b/src/elements/search/SearchPage.jsx
@@ -5,6 +5,29 @@ function SearchPage() {
   const themes = ['indigo', 'yellow', 'red'];
   return (
     <>
+      <div style={{ padding: 30, background: '#000', marginBottom: 15 }}>
+        <p style={{ color: '#FFF' }}>Search Default</p>
+        {themes.map(elem => (
+          <div
+            className={`theme-${elem} zep-search`}
+            style={{ marginBottom: 15 }}
+            key={elem}
+          >
+            <input
+              type="text"
+              className="zep-search__input zep-search__input--rounded-left"
+              placeholder="Search"
+              id={`search-${elem}`}
+            />
+            <Icon icon="zepicons-search" className="zep-search__icon" />
+            <label className="zep-visually-hidden" htmlFor={`search-${elem}`}>
+              Search {elem}
+            </label>
+          </div>
+        ))}
+      </div>
+
+      <p>Header Default</p>
       {themes.map(elem => (
         <div
           className={`theme-${elem} zep-search`}
@@ -13,7 +36,7 @@ function SearchPage() {
         >
           <input
             type="text"
-            className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left"
+            className="zep-search__input zep-search__input--searchfield"
             placeholder="Search"
             id={`search-${elem}`}
           />

From 4eddc3b3cadc61b5da838165c497370f2b4e5d84 Mon Sep 17 00:00:00 2001
From: adjeiessel <essel.adjei-mensah@zeppelin.com>
Date: Wed, 1 Apr 2020 08:45:31 +0200
Subject: [PATCH 3/5] fix: liniting

---
 src/elements/search/SearchPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx
index d9dc322..3c3cfc7 100644
--- a/src/elements/search/SearchPage.jsx
+++ b/src/elements/search/SearchPage.jsx
@@ -13,7 +13,7 @@ function SearchPage() {
         >
           <input
             type="text"
-            className="zep-search__input zep-search__input--searchfield zep-search__input--rounded-left"
+            className="zep-search__input zep-search__input--rounded-left"
             placeholder="Search"
             id={`search-${elem}`}
           />

From 80abdae34e1b62f78e2203515c6beb5ee24b56e5 Mon Sep 17 00:00:00 2001
From: adjeiessel <essel.adjei-mensah@zeppelin.com>
Date: Thu, 2 Apr 2020 09:15:22 +0200
Subject: [PATCH 4/5] style: border size change

#146
---
 src/elements/search/_search.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss
index 35fdb87..9dbf46f 100644
--- a/src/elements/search/_search.scss
+++ b/src/elements/search/_search.scss
@@ -21,7 +21,7 @@
     &--searchfield {
       border: none;
       padding-left: 1.25rem;
-      border-bottom: 1px solid
+      border-bottom: 2px solid
         map-deep-get($guidelines, 'color', 'global', lightGray);
       @include themify($color_themes) {
         &:focus {
@@ -50,7 +50,7 @@
     left: 20px;
     width: 24px;
     height: 24px;
-    color: rgba($color: #000000, $alpha: 0.5);
+    color: rgba($color: #000000, $alpha: 0.8);
   }
 }
 

From e300cf3f1ac9cec3e4edddfa56f3f8c865132022 Mon Sep 17 00:00:00 2001
From: adjeiessel <essel.adjei-mensah@zeppelin.com>
Date: Thu, 2 Apr 2020 13:25:17 +0200
Subject: [PATCH 5/5] style: update search UI and remove theming style

#146
---
 src/elements/search/SearchPage.jsx |  2 +-
 src/elements/search/_search.scss   | 34 ++++++++++++++----------------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/elements/search/SearchPage.jsx b/src/elements/search/SearchPage.jsx
index 2b7fdf8..eb337ad 100644
--- a/src/elements/search/SearchPage.jsx
+++ b/src/elements/search/SearchPage.jsx
@@ -5,7 +5,7 @@ function SearchPage() {
   const themes = ['indigo', 'yellow', 'red'];
   return (
     <>
-      <div style={{ padding: 30, background: '#000', marginBottom: 15 }}>
+      <div style={{ padding: 30, background: '#fff', marginBottom: 15 }}>
         <p style={{ color: '#FFF' }}>Search Default</p>
         {themes.map(elem => (
           <div
diff --git a/src/elements/search/_search.scss b/src/elements/search/_search.scss
index 9dbf46f..001efb8 100644
--- a/src/elements/search/_search.scss
+++ b/src/elements/search/_search.scss
@@ -7,25 +7,33 @@
 
   .#{$prefix}search__input {
     @extend %typo-normal-body1;
-    color: map-deep-get($guidelines, 'color', 'font');
+    color: rgba($color: #000000, $alpha: 0.6);
     width: 100%;
     height: 3rem;
     background-color: white;
     padding-left: 3.25rem;
     padding-top: 0.25rem;
-    border: 1px solid map-deep-get($guidelines, 'color', 'global', lightGray);
+    border: 1px solid rgba($color: #000000, $alpha: 0.6);
     &--rounded-left {
       background: rgb(255, 255, 255);
       border-radius: 30px 0px 0px 30px;
+      &:focus {
+        border: 2px solid rgba($color: #000000, $alpha: 0.8);
+        outline: none;
+        + .#{$prefix}search__icon {
+          color: rgba($color: #000000, $alpha: 0.8);
+        }
+      }
     }
     &--searchfield {
       border: none;
       padding-left: 1.25rem;
-      border-bottom: 2px solid
-        map-deep-get($guidelines, 'color', 'global', lightGray);
-      @include themify($color_themes) {
-        &:focus {
-          border-bottom-color: themed('primary');
+      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.6);
+      &:focus {
+        border-bottom: 2px solid rgba($color: #000000, $alpha: 0.8);
+        outline: none;
+        + .#{$prefix}search__icon {
+          color: rgba($color: #000000, $alpha: 0.8);
         }
       }
       + .#{$prefix}search__icon {
@@ -33,24 +41,14 @@
         left: unset;
       }
     }
-    @include themify($color_themes) {
-      &:focus {
-        border-color: themed('primary');
-        outline: none;
-      }
-      &:focus + .#{$prefix}search__icon {
-        color: themed('primary');
-      }
-    }
   }
-
   .#{$prefix}search__icon {
     position: absolute;
     top: 15px;
     left: 20px;
     width: 24px;
     height: 24px;
-    color: rgba($color: #000000, $alpha: 0.8);
+    color: rgba($color: #000000, $alpha: 0.6);
   }
 }