Migrate Menu styling

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