aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 18:27:39 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 18:27:39 +0100
commit69974c9613b85b5cd0895c921975b9e781d7e7ee (patch)
treeb5451601e6e8885bac6b5af261000c7c78c61391 /src/client/react/components
parent87fc845b89730f98a15a0b81f765a10a6f45838a (diff)
Migrate Result(s)
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/Results.js6
-rw-r--r--src/client/react/components/container/Results.scss5
-rw-r--r--src/client/react/components/presentational/Result.js15
-rw-r--r--src/client/react/components/presentational/Result.scss30
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;
+ }
+ }
+}