Responsive CSS updates.

components/common/Button.module.css

@@ -19,7 +19,7 @@
 }
 
 .button:active {
-  color: var(--gray700);
+  color: var(--gray900);
 }
 
 .large {

components/common/Calendar.module.css

@@ -17,7 +17,7 @@
   text-align: center;
   vertical-align: center;
   height: 40px;
-  min-width: 40px;
+  width: 40px;
   border-radius: 5px;
   border: 1px solid transparent;
 }
@@ -103,3 +103,9 @@
 .icon {
   margin-left: 10px;
 }
+
+@media only screen and (max-width: 992px) {
+  .calendar table {
+    max-width: calc(100vw - 30px);
+  }
+}

components/common/MenuButton.js

@@ -37,7 +37,7 @@ export default function MenuButton({
     <div className={styles.container} ref={ref}>
       <Button
         icon={icon}
-        className={classNames({ [styles.open]: showMenu })}
+        className={classNames(styles.button, { [styles.open]: showMenu })}
         onClick={toggleMenu}
         variant="light"
       >

components/common/MenuButton.module.css

@@ -4,6 +4,11 @@
   cursor: pointer;
 }
 
+.button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
 .menu {
   z-index: 100;
 }
@@ -12,10 +17,8 @@
   font-size: var(--font-size-small);
 }
 
-.open {
-  background: var(--gray200);
-}
-
+.open,
 .open:hover {
-  background: var(--gray200);
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
 }