Mobile Web: Auto-focus cursor in the search box (#5284)

* Mobile Web: Auto-focus cursor in the search box and open keyboard when the search icon is tapped

* fixed issue with safari mobile view

* added isFocus props to search_bar.jsx component

* used 'x' and fixed spacing

* changed 'x' icon and fixed css

* added aria-hidden='true'

webapp/sass/components/_search.scss

@@ -51,7 +51,7 @@
     top: 15px;
 }
 
-.sidebar__clear-icon {
+.sidebar__search-clear {
     @include opacity(.5);
     color: $dark-gray;
     width: 40px;

webapp/sass/responsive/_mobile.scss

@@ -933,7 +933,7 @@
             .icon--refresh {
                 @include opacity(.6);
                 color: $black;
-                right: 33px;
+                right: 30px;
                 top: 15px;
             }
 
@@ -955,12 +955,19 @@
         @include single-transition(transform, .35s, ease);
         @include translate3d(290px, 0, 0);
         border: none;
-        display: block;
         width: 290px;
+        visibility: hidden;
+
+        &.visible {
+            display: block;
+            visibility: visible;
+        }
 
         &.move--left,
         &.webrtc--show {
             @include translate3d(0, 0, 0);
+            display: block;
+            visibility: visible;
         }
     }
 
@@ -1099,15 +1106,22 @@
             display: block;
         }
 
-        .sidebar__clear-icon {
+        .sidebar__search-clear {
             display: block;
+            top: 6px;
+            height: 30px;
+            width: 35px;
+            margin-right: 18px;
             &.visible {
                 visibility: visible;
             }
         }
 
-        .fa-times {
-            margin-left: 15px;
+        .sidebar__search-clear-x {
+            margin-left: 14px;
+            font-size: 22px;
+            font-weight: 700;
+            opacity: .7;
         }
 
         .sidebar--right__close {