UX: Update search panel styles, consistency (#13262)

app/assets/javascripts/discourse/app/widgets/search-menu-controls.js

@@ -80,7 +80,6 @@ createWidget("search-context", {
       );
     }
 
-    result.push(h("div.clearfix"));
     return result;
   },
 

app/assets/stylesheets/common/base/header.scss

@@ -213,19 +213,6 @@
   background-color: var(--highlight-medium);
 }
 
-.search-highlight {
-  font-weight: bold;
-}
-
-#search-help table td {
-  padding-right: 10px;
-}
-
-// we don't need this X to clear field
-#search-term::-ms-clear {
-  display: none;
-}
-
 // topic info in the header
 .extra-info-wrapper {
   display: flex;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -68,6 +68,7 @@
     flex-wrap: wrap;
 
     .show-all {
+      display: flex;
       flex: 1 1 auto;
       button {
         width: 100%;
@@ -115,22 +116,19 @@
 }
 
 .menu-panel {
-  li,
+  .widget-link,
-  li.heading {
+  .categories-link {
-    a.widget-link,
+    padding: 0.25em 0.5em;
-    a.categories-link {
+    display: block;
-      padding: 0.25em 0.5em;
+    color: var(--primary);
-      display: block;
+    &:hover,
-      color: var(--primary);
+    &:focus {
-      &:hover,
+      background-color: var(--highlight-medium);
-      &:focus {
+      outline: none;
-        background-color: var(--highlight-medium);
+    }
-        outline: none;
-      }
 
-      .d-icon {
+    .d-icon {
-        color: var(--primary-medium);
+      color: var(--primary-medium);
-      }
     }
 
     .new {
@@ -138,6 +136,11 @@
       margin-left: 0.5em;
       color: var(--primary-med-or-secondary-med);
     }
+
+    &.show-help,
+    &.filter {
+      color: var(--tertiary);
+    }
   }
 
   li.category-link {

app/assets/stylesheets/common/base/search-menu.scss

@@ -1,15 +1,22 @@
 .search-menu {
+  --search-padding: 0.5em;
   .menu-panel .panel-body-contents {
     overflow-y: auto;
   }
 
   .search-input {
     position: relative;
-    padding: 0.5em 3px;
+    padding: var(--search-padding);
   }
 
-  .search-context .show-help {
+  .search-context {
-    float: right;
+    label {
+      padding: 0.25em var(--search-padding);
+    }
+    .show-help {
+      margin-left: auto;
+      line-height: var(--line-height-medium);
+    }
   }
 
   .heading {
@@ -21,12 +28,14 @@
 
   input[type="text"] {
     box-sizing: border-box;
-    width: calc(100% - 6px);
+    width: 100%;
-    height: 32px;
+    min-height: 32px;
+    margin-bottom: 0;
   }
 
   .search-context {
-    padding: 0 5px;
+    display: flex;
+    align-items: center;
 
     label {
       margin-bottom: 0;
@@ -34,7 +43,7 @@
   }
 
   .search-context + .results {
-    margin-top: 5px;
+    margin-top: 1em;
   }
 
   .results {
@@ -66,7 +75,6 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        margin-top: 0.15em;
 
         .discourse-tags {
           .discourse-tag {
@@ -76,6 +84,12 @@
       }
     }
 
+    .search-result-post {
+      .blurb {
+        font-size: var(--font-down-1);
+      }
+    }
+
     .main-results {
       display: flex;
       flex: 1 1 auto;
@@ -97,8 +111,7 @@
       flex: 1 1 auto;
 
       .separator {
-        margin-bottom: 1em;
+        margin: 1em 0.25em;
-        margin-top: 1em;
         height: 1px;
         background: var(--primary-low);
       }
@@ -185,7 +198,7 @@
             .widget-link.search-link {
               flex: 1;
               font-size: $font-0;
-              padding: 5px;
+              padding: 0.25em;
             }
           }
         }
@@ -233,16 +246,11 @@
         }
       }
     }
-
-    .show-more {
-      box-sizing: border-box;
-      padding: 5px;
-    }
   }
 
   .searching {
     position: absolute;
-    top: 1.15em;
+    top: 1.1em;
     right: 1em;
 
     .spinner {
@@ -254,18 +262,11 @@
   }
 
   .no-results {
-    padding: 5px;
+    padding: var(--search-padding);
-  }
-
-  .filter {
-    padding: 0;
-    &:hover {
-      background: transparent;
-    }
   }
 
   .search-link {
-    margin-bottom: 0.25em;
+    padding: var(--search-padding);
 
     .badge-category-parent {
       line-height: $line-height-small;
@@ -273,11 +274,13 @@
 
     .topic {
       display: inline-block;
-      line-height: $line-height-medium;
     }
 
     .topic-title {
       overflow-wrap: anywhere;
+      font-size: var(--font-up-1);
+      line-height: $line-height-medium;
+
       @supports not (overflow-wrap: anywhere) {
         word-break: break-word;
       }

app/assets/stylesheets/common/base/search.scss

@@ -1,3 +1,8 @@
+.search-highlight {
+  font-weight: bold;
+  background: var(--highlight-medium);
+}
+
 .search-container {
   display: flex;
   justify-content: space-between;