From 2216d1ceed02e54620f16fb826e5947b6c2cb9bf Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 20:43:07 +0100
Subject: Add line between results and search

---
 src/client/react/components/container/Results.jsx | 21 ++++++++++++++++++---
 src/client/style/index.scss                       |  6 ++----
 2 files changed, 20 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx
index 04d1f84..1c38c8b 100644
--- a/src/client/react/components/container/Results.jsx
+++ b/src/client/react/components/container/Results.jsx
@@ -1,13 +1,28 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 import Result from '../presentational/Result';
 
 const Results = (({ results }) => (
-  results.map(user => (
-    <Result key={user.value} user={user} />
-  ))
+  <div
+    className={classnames('search__results', {
+      'search__results--has-results': results.length > 0,
+    })}
+  >
+    {results.map(user => (
+      <Result key={user.value} user={user} />
+    ))}
+  </div>
 ));
 
+Results.propTypes = {
+  results: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.string,
+    value: PropTypes.value,
+  })).isRequired,
+};
+
 const mapStateToProps = state => ({
   results: state.search.results,
 });
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 19ef748..8e1b4d0 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -16,10 +16,8 @@ body {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   }
 
-  &--has-results {
-    .search__input-wrapper {
-      border-bottom: 1px #BDBDBD solid;
-    }
+  &__results--has-results {
+    border-top: 1px #BDBDBD solid;
   }
 
   &__icon-wrapper {
-- 
cgit v1.1