diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-03-20 14:46:51 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-03-20 14:48:02 +0100 |
commit | 24f2d1ca1f762d0cc634b650cc68591e9b46a9fe (patch) | |
tree | 9d6231af16437f6beb2f1b9537704fa91945ee96 | |
parent | 9148952ef11996201ed25f137550ef71e7274de9 (diff) |
Add basic styling to room finder
-rw-r--r-- | src/client/react/components/container/RoomFinder.js | 8 | ||||
-rw-r--r-- | src/client/style/_component-room-finder.scss | 23 | ||||
-rw-r--r-- | src/client/style/index.scss | 5 |
3 files changed, 35 insertions, 1 deletions
diff --git a/src/client/react/components/container/RoomFinder.js b/src/client/react/components/container/RoomFinder.js index ddc793c..94257f7 100644 --- a/src/client/react/components/container/RoomFinder.js +++ b/src/client/react/components/container/RoomFinder.js @@ -99,7 +99,13 @@ class HelpBox extends React.Component { <div className="room-finder"> <Button onClick={() => this.changeRoom(-1)}>Vorige</Button> <Button onClick={() => this.changeRoom(+1)}>Volgende</Button> - <Button onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/HIDE' })}><ButtonIcon use="close" /></Button> + <div className="grow" /> + <Button + className="close-button" + onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/HIDE' })} + > + <ButtonIcon use="close" /> + </Button> </div> ); } diff --git a/src/client/style/_component-room-finder.scss b/src/client/style/_component-room-finder.scss new file mode 100644 index 0000000..1798ef9 --- /dev/null +++ b/src/client/style/_component-room-finder.scss @@ -0,0 +1,23 @@ +.room-finder { + display: flex; + margin: 8px; + padding: 8px; + border-radius: 2px; + background-color: #D32F2F; + + .mdc-button:not(:disabled) { + color: white; + + &::before, &::after { + background-color: white; + } + } + + .close-button { + min-width: 48px; + + .mdc-button__icon { + margin-right: 0; + } + } +} diff --git a/src/client/style/index.scss b/src/client/style/index.scss index b74420c..5e31141 100644 --- a/src/client/style/index.scss +++ b/src/client/style/index.scss @@ -27,6 +27,10 @@ body { margin: 0; } +.grow { + flex-grow: 1; +} + @import "page-index"; @import "page-user"; @@ -34,3 +38,4 @@ body { @import "component-help-box"; @import "component-week-selector"; @import "component-loading"; +@import "component-room-finder"; |