4 files changed, 45 insertions, 7 deletions
diff --git a/src/client/react/components/presentational/Loading.js b/src/client/react/components/presentational/Loading.js
index e33720b..ce8f49a 100644
--- a/src/client/react/components/presentational/Loading.js
+++ b/src/client/react/components/presentational/Loading.js
@@ -24,7 +24,7 @@ import { LinearProgress } from 'rmwc/LinearProgress';
 class Loading extends React.Component {
   render() {
     return (
-      <div className="loading">
+      <div className="Loading">
         <LinearProgress determinate={false} />
       </div>
     );
diff --git a/src/client/react/components/presentational/Loading.scss b/src/client/react/components/presentational/Loading.scss
new file mode 100644
index 0000000..5748899
--- /dev/null
+++ b/src/client/react/components/presentational/Loading.scss
@@ -0,0 +1,5 @@
+.Loading {
+  .mdc-linear-progress .mdc-linear-progress__bar-inner {
+    background-color: #9C27B0;
+  }
+}
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;
+      }
+    }
+}