From 58da5e93c041e071056ff8a0532b2d9995554f86 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Thu, 28 Mar 2019 14:24:04 +0100
Subject: [PATCH] Port search results styling to glitch-soc

---
 .../glitch/features/drawer/results/index.js   |  8 ++--
 .../glitch/styles/components/drawer.scss      | 46 ++++++++-----------
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/drawer/results/index.js b/app/javascript/flavours/glitch/features/drawer/results/index.js
index ac7a14ef4a..4574c0e1e8 100644
--- a/app/javascript/flavours/glitch/features/drawer/results/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/results/index.js
@@ -10,6 +10,7 @@ import spring from 'react-motion/lib/spring';
 import { Link } from 'react-router-dom';
 
 //  Components.
+import Icon from 'flavours/glitch/components/icon';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import Hashtag from 'flavours/glitch/components/hashtag';
@@ -62,6 +63,7 @@ export default function DrawerResults ({
           }}
         >
           <header>
+            <Icon icon='search' fixedWidth />
             <FormattedMessage
               {...messages.total}
               values={{ count }}
@@ -69,7 +71,7 @@ export default function DrawerResults ({
           </header>
           {accounts && accounts.size ? (
             <section>
-              <h5><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
+              <h5><Icon icon='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
 
               {accounts.map(
                 accountId => (
@@ -83,7 +85,7 @@ export default function DrawerResults ({
           ) : null}
           {statuses && statuses.size ? (
             <section>
-              <h5><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
+              <h5><Icon icon='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
 
               {statuses.map(
                 statusId => (
@@ -97,7 +99,7 @@ export default function DrawerResults ({
           ) : null}
           {hashtags && hashtags.size ? (
             <section>
-              <h5><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
+              <h5><Icon icon='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
 
               {hashtags.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
             </section>
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index f4931c36cc..d22783b94b 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -196,43 +196,35 @@
   overflow-y: auto;
 
   & > header {
-    border-bottom: 1px solid darken($ui-base-color, 4%);
-    padding: 15px 10px;
     color: $dark-text-color;
     background: lighten($ui-base-color, 2%);
-    font-size: 14px;
+    padding: 15px;
     font-weight: 500;
+    font-size: 16px;
+    cursor: default;
+
+    .fa {
+      display: inline-block;
+      margin-right: 5px;
+    }
   }
 
   & > section {
-    background: $ui-base-color;
-    margin-bottom: 20px;
+    margin-bottom: 5px;
 
     h5 {
-      position: relative;
+      background: darken($ui-base-color, 4%);
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      cursor: default;
+      display: flex;
+      padding: 15px;
+      font-weight: 500;
+      font-size: 16px;
+      color: $dark-text-color;
 
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 50%;
-        width: 100%;
-        height: 0;
-        border-top: 1px solid lighten($ui-base-color, 8%);
-      }
-
-      span {
+      .fa {
         display: inline-block;
-        background: $ui-base-color;
-        color: $darker-text-color;
-        font-size: 14px;
-        font-weight: 500;
-        padding: 10px;
-        position: relative;
-        z-index: 1;
-        cursor: default;
+        margin-right: 5px;
       }
     }