Add misc CSS

src/components/Button.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 
+import './css/Button.css';
+
+
 class Button extends Component {
     // Multiple onClick functions
     onClick = () => {
@@ -21,7 +24,7 @@ class Button extends Component {
 
     render() {
         return (
-            <button onClick={this.onClick}>
+            <button className={this.props.className} onClick={this.onClick}>
                 {this.props.children}
             </button>
         );

src/components/NavigationDrawer.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
-import './css/NavigationDrawer.css';
 
 import DisruptionButton from "./DisruptionButton.js";
 import Popup from './Popup.js';
 import Button from './Button.js';
 
+import './css/NavigationDrawer.css';
+
 import userIcon from '../img/user.svg';
 
 

src/components/css/Button.css

@@ -0,0 +1,3 @@
+button:active {
+    background: rgba(0, 0, 0, 0.1);
+}

src/components/css/NavigationDrawer.css

@@ -66,11 +66,6 @@
     transition: .15s;
 }
 
-.hidden {
-    opacity: 0;
-    pointer-events: none;
-}
-
 #navDrawer hr {
     width: 90%;
     margin: 0 10px 5px 0;

src/components/css/Popup.css

@@ -5,8 +5,9 @@
     transform: translate(-50%, -50%) scale(0);
     transform-origin: center;
     background: white;
-    width: 65vw;
-    height: 45vh;
+    width: 55vw;
+    height: 39vh;
+    padding: 3vh 5vw;
     box-shadow: var(--boxShadow);
     border-radius: var(--borderRadius);
     transition: .35s;
@@ -16,4 +17,28 @@
 .visible {
     pointer-events: all;
     transform: translate(-50%, -50%) scale(1);
+}
+
+.popup h3 {
+    margin-bottom: 20px;
+}
+
+.popup ul {
+    list-style: none;
+}
+
+.popup li button {
+    width: 100%;
+    padding: 8% 0;
+    font-size: 16px;
+}
+
+.popupClose {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.75);
+    z-index: 11;
 }

src/index.css

@@ -27,4 +27,9 @@ html, body, #root, #app {
 button {
     background: none;
     border: none;
+}
+
+.hidden {
+    opacity: 0;
+    pointer-events: none;
 }