aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/presentational
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components/presentational')
-rw-r--r--src/client/react/components/presentational/Loading.js2
-rw-r--r--src/client/react/components/presentational/Loading.scss5
-rw-r--r--src/client/react/components/presentational/Result.js15
-rw-r--r--src/client/react/components/presentational/Result.scss30
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;
+ }
+ }
+}