Added background color to menu to make it easier to see on a light background
This commit is contained in:
parent
06f5d3ab42
commit
eeaa250ca2
@ -138,7 +138,7 @@ function MapControls({
|
|||||||
setCurrentSubmenu(tool);
|
setCurrentSubmenu(tool);
|
||||||
setCurrentSubmenuOptions({
|
setCurrentSubmenuOptions({
|
||||||
// Align the right of the submenu to the left of the tool and center vertically
|
// 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`,
|
top: `${toolRect.bottom - toolRect.height / 2}px`,
|
||||||
style: { transform: "translate(-100%, -50%)" },
|
style: { transform: "translate(-100%, -50%)" },
|
||||||
});
|
});
|
||||||
@ -162,7 +162,6 @@ function MapControls({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Flex
|
<Flex
|
||||||
p={2}
|
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 0,
|
top: 0,
|
||||||
@ -178,7 +177,10 @@ function MapControls({
|
|||||||
sx={{
|
sx={{
|
||||||
transform: `rotate(${isExpanded ? "0" : "180deg"})`,
|
transform: `rotate(${isExpanded ? "0" : "180deg"})`,
|
||||||
display: "block",
|
display: "block",
|
||||||
|
backgroundColor: "overlay",
|
||||||
|
borderRadius: "50%",
|
||||||
}}
|
}}
|
||||||
|
m={2}
|
||||||
>
|
>
|
||||||
<ExpandMoreIcon />
|
<ExpandMoreIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -187,7 +189,10 @@ function MapControls({
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
display: isExpanded ? "flex" : "none",
|
display: isExpanded ? "flex" : "none",
|
||||||
|
backgroundColor: "overlay",
|
||||||
|
borderRadius: "4px",
|
||||||
}}
|
}}
|
||||||
|
p={2}
|
||||||
>
|
>
|
||||||
<AddMapButton onMapChange={onMapChange} />
|
<AddMapButton onMapChange={onMapChange} />
|
||||||
{divider}
|
{divider}
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Modal from "react-modal";
|
import Modal from "react-modal";
|
||||||
|
|
||||||
|
import { useThemeUI } from "theme-ui";
|
||||||
|
|
||||||
function MapMenu({
|
function MapMenu({
|
||||||
isOpen,
|
isOpen,
|
||||||
onRequestClose,
|
onRequestClose,
|
||||||
@ -35,6 +37,9 @@ function MapMenu({
|
|||||||
}
|
}
|
||||||
onModalContent(node);
|
onModalContent(node);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { theme } = useThemeUI();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
@ -42,7 +47,7 @@ function MapMenu({
|
|||||||
style={{
|
style={{
|
||||||
overlay: { top: "0", bottom: "initial" },
|
overlay: { top: "0", bottom: "initial" },
|
||||||
content: {
|
content: {
|
||||||
backgroundColor: "hsla(230, 25%, 18%, 0.8)",
|
backgroundColor: theme.colors.overlay,
|
||||||
top,
|
top,
|
||||||
left,
|
left,
|
||||||
right,
|
right,
|
||||||
|
@ -8,6 +8,7 @@ export default {
|
|||||||
purple: "hsl(290, 100%, 80%)",
|
purple: "hsl(290, 100%, 80%)",
|
||||||
muted: "hsla(230, 20%, 0%, 20%)",
|
muted: "hsla(230, 20%, 0%, 20%)",
|
||||||
gray: "hsl(0, 0%, 70%)",
|
gray: "hsl(0, 0%, 70%)",
|
||||||
|
overlay: "hsla(230, 25%, 18%, 0.8)",
|
||||||
},
|
},
|
||||||
fonts: {
|
fonts: {
|
||||||
body: "'Bree Serif', serif",
|
body: "'Bree Serif', serif",
|
||||||
|
Loading…
Reference in New Issue
Block a user