Added background color to menu to make it easier to see on a light background

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}

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,

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",