Migrate Result(s)

4 files changed, 48 insertions, 8 deletions

diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 4fc9987..82e37cb 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -28,6 +28,8 @@ import users from '../../users';
 import { setUser, userFromMatch } from '../../lib/url';
 import Result from '../presentational/Result';
 
+import './Results.scss';
+
 class Results extends React.Component {
   static propTypes = {
     results: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -56,8 +58,8 @@ class Results extends React.Component {
 
     return (
       <div
-        className={classnames('search__results', {
-          'search__results--has-results': !isExactMatch && this.props.results.length > 0,
+        className={classnames('Results', {
+          hasResults: !isExactMatch && this.props.results.length > 0,
         })}
         style={{
           minHeight: isExactMatch ? 0 : this.props.results.length * 54,
diff --git a/src/client/react/components/container/Results.scss b/src/client/react/components/container/Results.scss
new file mode 100644
index 0000000..60379cf
--- /dev/null
+++ b/src/client/react/components/container/Results.scss
@@ -0,0 +1,5 @@
+.Results {
+  &.hasResults {
+    border-top: 1px #BDBDBD solid;
+  }
+}
diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js
index 18e4eb9..900d3ac 100644
--- a/src/client/react/components/presentational/Result.js
+++ b/src/client/react/components/presentational/Result.js
@@ -25,6 +25,8 @@ import users from '../../users';
 
 import IconFromUserType from './IconFromUserType';
 
+import './Result.scss';
+
 class Result extends React.Component {
   static propTypes = {
     userId: PropTypes.string.isRequired,
@@ -34,20 +36,21 @@ class Result extends React.Component {
 
   render() {
     return (
-      // eslint-disable-next-line
+      /* eslint-disable jsx-a11y/click-events-have-key-events */
+      /* eslint-disable jsx-a11y/no-static-element-interactions */
       <div
-        className={classnames('search__result', {
-          'search__result--selected': this.props.isSelected,
+        className={classnames('Result', {
+          isSelected: this.props.isSelected,
         })}
         onClick={this.props.onClick}
       >
-        <div className="search__icon-wrapper">
+        <div className="iconWrapper">
           <IconFromUserType userType={users.byId[this.props.userId].type} />
         </div>
-        <div className="search__result__text">
+        <div className="text">
           {users.byId[this.props.userId].value}
           {users.byId[this.props.userId].alt &&
-            <span className="search__result__text__alt">
+            <span className="alt">
               {` ${users.byId[this.props.userId].alt}`}
             </span>
           }
diff --git a/src/client/react/components/presentational/Result.scss b/src/client/react/components/presentational/Result.scss
new file mode 100644
index 0000000..1ca0dd8
--- /dev/null
+++ b/src/client/react/components/presentational/Result.scss
@@ -0,0 +1,30 @@
+.Result {
+  display: flex;
+  cursor: pointer;
+
+  &:hover, &.isSelected {
+    background-color: lightgray;
+  }
+
+  .iconWrapper {
+    height: 54px;
+    padding: 15px;
+
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  .text {
+      padding: 15px;
+      padding-left: 0px;
+      font-size: 16px;
+      transform: translate(0, 3px);
+
+      .alt {
+        font-style: italic;
+        color: gray;
+      }
+    }
+}