[PLT-1412] Updated search buttons on mobile GH-5261 (#5306)

* Update search buttons on mobile

* removed commented codes in _mobile.scss

* deleted 'search_bar.cancel'  from webapp/i18n/en.json

2 files changed, 24 insertions, 33 deletions

diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 58216fefd..bdc285300 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -15,18 +15,6 @@
     @include animation(spin .7s infinite linear);
 }
 
-.search__clear {
-    @include single-transition(all, .2s, linear);
-    @include translateX(60px);
-    cursor: pointer;
-    display: none;
-    line-height: 45px;
-    margin-right: 13px;
-    position: absolute;
-    right: 0;
-    z-index: 5;
-}
-
 .search-item-snippet {
     @include clearfix;
     text-overflow: ellipsis;
@@ -63,6 +51,18 @@
     top: 15px;
 }
 
+.sidebar__clear-icon {
+    @include opacity(.5);
+    color: $dark-gray;
+    width: 40px;
+    margin-right: 20px;
+    position: absolute;
+    top: 12px;
+    right: 0;
+    cursor: pointer;
+    visibility: hidden;
+}
+
 .search__form {
     position: relative;
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4ce100836..a7dd68b87 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -896,32 +896,12 @@
         }
     }
 
-    .search__clear {
-        display: block;
-    }
-
     .search-bar__container {
         @include flex(0 0 44px);
         background: $primary-color;
         color: $white;
         padding: 0;
 
-        &.focused {
-            .sidebar__collapse {
-                @include translateX(-45px);
-            }
-
-            .search__form {
-                @include translateX(-45px);
-                padding-left: 55px;
-                padding-right: 24px;
-            }
-
-            .search__clear {
-                @include translateX(0);
-            }
-        }
-
         .search__form {
             @include single-transition(all, .2s, linear);
             @include translateX(0);
@@ -945,7 +925,7 @@
                 background: $white;
                 border: none;
                 color: $dark-gray;
-                padding: 0 10px 0 31px;
+                padding: 0 31px 0 31px;
             }
         }
 
@@ -1102,6 +1082,17 @@
             display: block;
         }
 
+        .sidebar__clear-icon {
+            display: block;
+            &.visible {
+                visibility: visible;
+            }
+        }
+
+        .fa-times {
+            margin-left: 15px;
+        }
+
         .sidebar--right__close {
             display: none;
         }