css: Narrow the gap between searchbox and searchbox_legacy.

This is a prep commit which combines the previous `#searchbox`
block with the newly updated `#searchbox_legacy` block which
contains the modifications related to the new navbar display.

This only consists of changes to `#searchbox` and is still broken.
But it integrates the searchbox with the new tab_bar changes so that
only one searchbox is shown (instead of two, previously).

static/js/stream_color.js

@@ -72,9 +72,7 @@ exports.update_stream_color = function (sub, color, opts) {
         update_historical_message_color(sub.name, color);
     }
     update_stream_sidebar_swatch_color(stream_id, color);
-    if (!page_params.search_pills_enabled) {
-        tab_bar.colorize_tab_bar();
-    }
+    tab_bar.colorize_tab_bar();
 };
 
 function picker_do_change_color(color) {

static/js/ui_init.js

@@ -445,9 +445,7 @@ exports.initialize_everything = function () {
     overlays.initialize();
     invite.initialize();
     timerender.initialize();
-    if (!page_params.search_pills_enabled) {
-        tab_bar.initialize();
-    }
+    tab_bar.initialize();
     server_events.initialize();
     user_status.initialize(user_status_params);
     compose_pm_pill.initialize();

static/styles/zulip.scss

@@ -1596,25 +1596,41 @@ div.focused_table {
 }
 
 #searchbox {
-    display: flex;
     width: 100%;
     height: 40px;
 
-    .navbar-search {
-        margin-top: 0px;
-        width: calc(100% - 66px);
-        float: none;
+    .navbar-search:not(.expanded) {
+        display: none;
+    }
+
+    .navbar-search.expanded {
         overflow: hidden;
-        height: 100%;
+        margin-top: 0px;
+        right: 2;
+        width: calc(100% - 2px);
+        position: absolute;
+        .search_button {
+            display: inline;
+            margin-right: 16px;
+        }
     }
 
     .input-append {
-        height: 100%;
-        align-items: center;
-        display: flex;
-        flex-wrap: nowrap;
         position: relative;
-        width: calc(100% - 28px);
+        width: 100%;
+
+        .fa-search {
+            padding: 0px;
+            font-size: 20px;
+            position: absolute;
+            left: 10px;
+            top: 10px;
+            z-index: 5;
+        }
+
+        .fa-search:not(.deactivated) {
+            cursor: pointer;
+        }
     }
 
     #search_query {
@@ -1631,18 +1647,26 @@ div.focused_table {
         line-height: 40px;
     }
 
+    #search_query:focus {
+        box-shadow: inset 0px 0px 0px 2px hsl(204, 20%, 74%);
+    }
+
     .search_button,
     .search_button[disabled]:hover {
-        position: relative;
+        position: absolute;
+        right: 2px;
+        top: 6px;
         background: none;
-        height: 40px;
+        border-radius: 0px;
+        border: none;
+        height: 30px;
+        text-align: center;
         padding: 4px;
         color: hsl(0, 0%, 80%);
         font-size: 18px;
         box-shadow: none;
         text-shadow: none;
         z-index: 5;
-        float: right;
     }
 
     .search_button:hover {
@@ -1677,8 +1701,6 @@ div.focused_table {
     #search_arrows {
         font-size: 90%;
         letter-spacing: normal;
-        border: none;
-        background-color: inherit;
     }
 
     @media (min-width: 500px) {