aboutsummaryrefslogtreecommitdiff
path: root/src/client/react
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 18:34:56 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 18:34:56 +0100
commit53d983023808633e5d4bf8c6c297731614533d59 (patch)
tree65ba1a114aaabf65d82268b9992e094bd06b0ec8 /src/client/react
parent69974c9613b85b5cd0895c921975b9e781d7e7ee (diff)
Migrate Menu styling
Diffstat (limited to 'src/client/react')
-rw-r--r--src/client/react/components/container/Menu.js30
-rw-r--r--src/client/react/components/container/Menu.scss25
2 files changed, 42 insertions, 13 deletions
diff --git a/src/client/react/components/container/Menu.js b/src/client/react/components/container/Menu.js
index 920973b..0b5c4dc 100644
--- a/src/client/react/components/container/Menu.js
+++ b/src/client/react/components/container/Menu.js
@@ -28,6 +28,8 @@ import { Icon } from 'rmwc/Icon';
import users from '../../users';
import { setUser, userFromMatch } from '../../lib/url';
+import './Menu.scss';
+
class Menu extends React.Component {
static propTypes = {
// redux
@@ -59,19 +61,21 @@ class Menu extends React.Component {
render() {
return (
- <SimpleMenu
- handle={<Button><ButtonIcon use="more_vert" /></Button>}
- onSelected={(event) => {
- // Send the `data-type` of the selected <MenuItem />
- this.onItemSelected(event.detail.item.dataset.type);
- }}
- >
- <MenuItem data-type="add_label"><Icon use="bookmark_border" />Voeg label toe</MenuItem>
- <MenuItem data-type="make_favorite"><Icon use="star_border" />Maak favoriet</MenuItem>
- <div className="mdc-list-divider" role="separator" />
- <MenuItem data-type="room_finder"><Icon use="location_searching" />Lokaal zoeken</MenuItem>
- <MenuItem data-type="use_legacy_schedule"><Icon use="launch" />Oud rooster gebruiken</MenuItem>
- </SimpleMenu>
+ <div className="Menu">
+ <SimpleMenu
+ handle={<Button><ButtonIcon use="more_vert" /></Button>}
+ onSelected={(event) => {
+ // Send the `data-type` of the selected <MenuItem />
+ this.onItemSelected(event.detail.item.dataset.type);
+ }}
+ >
+ <MenuItem data-type="add_label"><Icon use="bookmark_border" />Voeg label toe</MenuItem>
+ <MenuItem data-type="make_favorite"><Icon use="star_border" />Maak favoriet</MenuItem>
+ <div className="mdc-list-divider" role="separator" />
+ <MenuItem data-type="room_finder"><Icon use="location_searching" />Lokaal zoeken</MenuItem>
+ <MenuItem data-type="use_legacy_schedule"><Icon use="launch" />Oud rooster gebruiken</MenuItem>
+ </SimpleMenu>
+ </div>
);
}
}
diff --git a/src/client/react/components/container/Menu.scss b/src/client/react/components/container/Menu.scss
new file mode 100644
index 0000000..3d84507
--- /dev/null
+++ b/src/client/react/components/container/Menu.scss
@@ -0,0 +1,25 @@
+.Menu {
+ .mdc-menu-anchor {
+ height: 100%;
+ }
+
+ .mdc-button {
+ height: 100%;
+ min-width: unset;
+ color: black;
+
+ &::before, &::after {
+ background-color: black;
+ }
+
+ i {
+ font-size: 24px;
+ }
+ }
+
+ .mdc-list-item {
+ i {
+ padding-right: 8px;
+ }
+ }
+}