From eeaa250ca2df9a52eae178566acacec485d30fa6 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 20 Apr 2020 15:47:52 +1000
Subject: [PATCH] Added background color to menu to make it easier to see on a
 light background

---
 src/components/MapControls.js | 9 +++++++--
 src/components/MapMenu.js     | 7 ++++++-
 src/theme.js                  | 1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/MapControls.js b/src/components/MapControls.js
index c980384..3e8716a 100644
--- a/src/components/MapControls.js
+++ b/src/components/MapControls.js
@@ -138,7 +138,7 @@ function MapControls({
       setCurrentSubmenu(tool);
       setCurrentSubmenuOptions({
         // Align the right of the submenu to the left of the tool and center vertically
-        left: `${toolRect.left - 4}px`,
+        left: `${toolRect.left - 16}px`,
         top: `${toolRect.bottom - toolRect.height / 2}px`,
         style: { transform: "translate(-100%, -50%)" },
       });
@@ -162,7 +162,6 @@ function MapControls({
   return (
     <>
       <Flex
-        p={2}
         sx={{
           position: "absolute",
           top: 0,
@@ -178,7 +177,10 @@ function MapControls({
           sx={{
             transform: `rotate(${isExpanded ? "0" : "180deg"})`,
             display: "block",
+            backgroundColor: "overlay",
+            borderRadius: "50%",
           }}
+          m={2}
         >
           <ExpandMoreIcon />
         </IconButton>
@@ -187,7 +189,10 @@ function MapControls({
             flexDirection: "column",
             alignItems: "center",
             display: isExpanded ? "flex" : "none",
+            backgroundColor: "overlay",
+            borderRadius: "4px",
           }}
+          p={2}
         >
           <AddMapButton onMapChange={onMapChange} />
           {divider}
diff --git a/src/components/MapMenu.js b/src/components/MapMenu.js
index 5f63b49..3be5c31 100644
--- a/src/components/MapMenu.js
+++ b/src/components/MapMenu.js
@@ -1,6 +1,8 @@
 import React from "react";
 import Modal from "react-modal";
 
+import { useThemeUI } from "theme-ui";
+
 function MapMenu({
   isOpen,
   onRequestClose,
@@ -35,6 +37,9 @@ function MapMenu({
     }
     onModalContent(node);
   }
+
+  const { theme } = useThemeUI();
+
   return (
     <Modal
       isOpen={isOpen}
@@ -42,7 +47,7 @@ function MapMenu({
       style={{
         overlay: { top: "0", bottom: "initial" },
         content: {
-          backgroundColor: "hsla(230, 25%, 18%, 0.8)",
+          backgroundColor: theme.colors.overlay,
           top,
           left,
           right,
diff --git a/src/theme.js b/src/theme.js
index 24e2cdd..5823fb6 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -8,6 +8,7 @@ export default {
     purple: "hsl(290, 100%, 80%)",
     muted: "hsla(230, 20%, 0%, 20%)",
     gray: "hsl(0, 0%, 70%)",
+    overlay: "hsla(230, 25%, 18%, 0.8)",
   },
   fonts: {
     body: "'Bree Serif', serif",