Migrate RoomFinder styles

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;
+    }
+  }
+}