diff options
Diffstat (limited to 'src/client')
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; + } + } +} |