aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 18:38:20 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 18:38:20 +0100
commitc7b9b8007ae3ba41c85da1f6d420a8e26bea5a46 (patch)
treeecfe62e1ac5bdcc247a4924d3a9435a999ad4743 /src/client
parent53d983023808633e5d4bf8c6c297731614533d59 (diff)
Migrate RoomFinder styles
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/RoomFinder.js6
-rw-r--r--src/client/react/components/container/RoomFinder.scss23
2 files changed, 27 insertions, 2 deletions
diff --git a/src/client/react/components/container/RoomFinder.js b/src/client/react/components/container/RoomFinder.js
index 97ed175..ed3fa96 100644
--- a/src/client/react/components/container/RoomFinder.js
+++ b/src/client/react/components/container/RoomFinder.js
@@ -26,6 +26,8 @@ import { Button, ButtonIcon } from 'rmwc/Button';
import users from '../../users';
import { setUser, userFromMatch } from '../../lib/url';
+import './RoomFinder.scss';
+
class RoomFinder extends React.Component {
static propTypes = {
// redux
@@ -81,12 +83,12 @@ class RoomFinder extends React.Component {
}
return (
- <div className="room-finder">
+ <div className="RoomFinder">
<Button onClick={() => this.changeRoom(-1)}>Vorige</Button>
<Button onClick={() => this.changeRoom(+1)}>Volgende</Button>
<div className="grow" />
<Button
- className="close-button"
+ className="closeButton"
onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/HIDE' })}
>
<ButtonIcon use="close" />
diff --git a/src/client/react/components/container/RoomFinder.scss b/src/client/react/components/container/RoomFinder.scss
new file mode 100644
index 0000000..d4b16d9
--- /dev/null
+++ b/src/client/react/components/container/RoomFinder.scss
@@ -0,0 +1,23 @@
+.RoomFinder {
+ display: flex;
+ margin: 8px;
+ padding: 8px;
+ border-radius: 2px;
+ background-color: #D32F2F;
+
+ .mdc-button {
+ color: white;
+
+ &::before, &::after {
+ background-color: white;
+ }
+ }
+
+ .closeButton {
+ min-width: 48px;
+
+ .mdc-button__icon {
+ margin-right: 0;
+ }
+ }
+}