From bd7a3d5b14ac4293b8958b2c2db809bd4a108da2 Mon Sep 17 00:00:00 2001
From: Sharyn <sharyn@nonacreative.com>
Date: Tue, 17 Jul 2018 15:06:53 +0200
Subject: [PATCH] Updating search results

---
 assets/styles/base/mixins.scss      | 13 +++++++++++++
 assets/styles/base/variables.scss   |  2 +-
 components/searchResults/index.js   | 15 +++++++++++----
 components/searchResults/style.scss |  9 ++++++++-
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/assets/styles/base/mixins.scss b/assets/styles/base/mixins.scss
index e69de29..c512d6b 100644
--- a/assets/styles/base/mixins.scss
+++ b/assets/styles/base/mixins.scss
@@ -0,0 +1,13 @@
+@mixin hasRedUnderline() {
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: calculateRem(1);
+    background-color: $red;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+}
diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss
index 1179d4b..0e06cfd 100644
--- a/assets/styles/base/variables.scss
+++ b/assets/styles/base/variables.scss
@@ -24,6 +24,6 @@ $primary-font: 'Roboto Mono', monospace;
 $secondary-font: 'bebas_neuebold', sans-serif;
 
 // layout
-$container-width: 750;
+$container-width: 600;
 $browse-left-width: 180;
 $container-padding: 24;
diff --git a/components/searchResults/index.js b/components/searchResults/index.js
index 6576e90..210ca0f 100644
--- a/components/searchResults/index.js
+++ b/components/searchResults/index.js
@@ -27,7 +27,7 @@ const SearchResults = (props) => {
     return text.replace(regex, `<span>${cleanTerm}</span>`);
   };
 
-  const processText = (text, length = 1500) => highlightTerm(trimText(text, length));
+  const processText = (text, length = 500) => highlightTerm(trimText(text, length));
 
   const findFirstQuestion = (interview) => {
     let { answer } = interview.interview[interview.matchedIndex];
@@ -48,6 +48,10 @@ const SearchResults = (props) => {
     };
   };
 
+  const interviewNameContainsTerm = (name, searchTerm) => {
+    return name.toLowerCase().includes(searchTerm.toLowerCase());
+  };
+
   return (
     <div className="search-results">
       <ul>
@@ -58,12 +62,15 @@ const SearchResults = (props) => {
             key={interview.id}
             onClick={props.toggleSingleInterview}
           >
-            <h3>{ interview.name }</h3>
+            <h3 className={interviewNameContainsTerm(interview.name, props.term) ? 'matched-name' : ''}>
+              { Parser(interview.name) }
+            </h3>
             <h5>{interview.matchedIndex + 1})&nbsp;
               { findFirstQuestion(interview).question }
             </h5>
-            <p>{ Parser(findFirstQuestion(interview).answer) }
-            </p>
+            <div>
+              { Parser(findFirstQuestion(interview).answer) }
+            </div>
           </li>
         ))
         }
diff --git a/components/searchResults/style.scss b/components/searchResults/style.scss
index 33d04e9..c112352 100644
--- a/components/searchResults/style.scss
+++ b/components/searchResults/style.scss
@@ -7,9 +7,15 @@
     cursor: pointer;
 
     h3 {
-      font-size: calculateRem(18);
+      font-size: calculateRem(24);
       margin-bottom: calculateRem(8);
       color: #fff;
+      display: inline-block;
+
+      &.matched-name {
+        @include hasRedUnderline;
+        position: relative;
+      }
     }
 
     h5 {
@@ -20,6 +26,7 @@
 
     p {
       font-size: calculateRem(14);
+      display: inline;
 
       span {
         position: relative;