Search: greatly improve design of standalone search section

app/soapbox/features/search/index.js

@@ -11,9 +11,8 @@ const messages = defineMessages({
 
 const Search = ({ intl }) => (
   <div className='column search-page'>
-    <SearchContainer />
-
     <ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
+    <SearchContainer />
     <div className='drawer__pager'>
       <div className='drawer__inner darker'>
         <SearchResultsContainer />

app/styles/components/columns.scss

@@ -342,6 +342,10 @@
 
 .columns-area--mobile .column {
   @include standard-panel;
+
+  @media screen and (max-width: 450px) {
+    border-radius: 0;
+  }
 }
 
 .columns-area--transparent .column {
@@ -876,4 +880,8 @@
   justify-content: center;
   padding: 15px;
   border-radius: 0 0 10px 10px;
+
+  @media screen and (max-width: 450px) {
+    border-radius: 0;
+  }
 }

app/styles/components/search.scss

@@ -1,21 +1,3 @@
-.search-page {
-  .drawer__inner:not(:empty) {
-    min-height: 48px;
-  }
-}
-
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
-  .search-page .search {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1) - 1px) {
-  .search-page .column-header__wrapper {
-    display: none;
-  }
-}
-
 .search {
   position: relative;
 }
@@ -41,8 +23,9 @@
     cursor: default;
     display: inline-block;
     position: absolute;
-    top: 8px;
+    top: 50%;
     right: 8px;
+    transform: translateY(-50%);
     z-index: 2;
     width: 18px;
     height: 18px;
@@ -65,7 +48,6 @@
     color: var(--highlight-text-color);
     width: 22px;
     height: 22px;
-    top: 5px;
 
     &:hover {
       color: var(--brand-color);
@@ -182,3 +164,36 @@
 .search__filter-bar:last-child {
   border-bottom: none;
 }
+
+.search-page {
+  .drawer__inner:not(:empty) {
+    min-height: 48px;
+  }
+
+  .search {
+    padding: 10px 15px;
+    border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
+  }
+
+  .search__input {
+    background-color: var(--background-color);
+    border-radius: 8px;
+    padding: 12px 36px 12px 16px;
+  }
+
+  .search__icon .svg-icon {
+    right: 24px;
+  }
+
+  .drawer__pager {
+    border-radius: 0 0 10px 10px;
+
+    @media screen and (max-width: 450px) {
+      border-radius: 0;
+    }
+  }
+}
+
+.search-results {
+  padding: 15px;
+}