Updating search results

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;
+  }
+}

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;

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>
         ))
         }

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;