diff --git a/src/components/Modal.js b/src/components/Modal.js
index 28526e0..eb847e6 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -7,6 +7,7 @@ function StyledModal({
onRequestClose,
children,
allowClose,
+ style,
...props
}) {
const { theme } = useThemeUI();
@@ -26,6 +27,7 @@ function StyledModal({
marginRight: "-50%",
transform: "translate(-50%, -50%)",
maxHeight: "100%",
+ ...style,
},
}}
{...props}
@@ -44,6 +46,7 @@ function StyledModal({
StyledModal.defaultProps = {
allowClose: true,
+ style: {},
};
export default StyledModal;
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index c8675d4..9d274bb 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -16,6 +16,7 @@ function MapTile({
onMapRemove,
onMapReset,
onDone,
+ large,
}) {
const [isMapTileMenuOpen, setIsTileMenuOpen] = useState(false);
const isDefault = map.type === "default";
@@ -46,7 +47,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
- m={1}
+ m={2}
>
@@ -65,7 +66,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
- m={1}
+ m={2}
>
@@ -85,7 +86,7 @@ function MapTile({
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
- m={1}
+ m={2}
>
@@ -96,18 +97,17 @@ function MapTile({
{
e.stopPropagation();
@@ -123,7 +123,14 @@ function MapTile({
}}
>
+
{/* Show expand button only if both reset and remove is available */}
{isSelected && (
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 96060c9..f44272f 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -1,6 +1,7 @@
import React, { useContext } from "react";
import { Flex, Box, Text } from "theme-ui";
import SimpleBar from "simplebar-react";
+import { useMedia } from "react-media";
import AddIcon from "../../icons/AddIcon";
@@ -20,16 +21,18 @@ function MapTiles({
onDone,
}) {
const { databaseStatus } = useContext(DatabaseContext);
+ const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+
return (
-
+
onMapSelect(null)}
>
@@ -45,19 +48,31 @@ function MapTiles({
":active": {
color: "secondary",
},
- width: "150px",
- height: "150px",
+ width: isSmallScreen ? "49%" : "32%",
+ height: "0",
+ paddingTop: isSmallScreen ? "49%" : "32%",
borderRadius: "4px",
- justifyContent: "center",
- alignItems: "center",
+ position: "relative",
cursor: "pointer",
}}
- m={2}
+ my={1}
bg="muted"
aria-label="Add Map"
title="Add Map"
>
-
+
+
+
{maps.map((map) => {
const isSelected = selectedMap && map.id === selectedMap.id;
@@ -73,6 +88,7 @@ function MapTiles({
onMapRemove={onMapRemove}
onMapReset={onMapReset}
onDone={onDone}
+ large={isSmallScreen}
/>
);
})}
diff --git a/src/components/token/TokenTile.js b/src/components/token/TokenTile.js
index 511d071..0518d66 100644
--- a/src/components/token/TokenTile.js
+++ b/src/components/token/TokenTile.js
@@ -9,7 +9,7 @@ import {
unknownSource,
} from "../../tokens";
-function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
+function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove, large }) {
const tokenSource = useDataSource(token, defaultTokenSources, unknownSource);
const isDefault = token.type === "default";
@@ -17,22 +17,28 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
onTokenSelect(token)}
sx={{
- borderColor: "primary",
- borderStyle: isSelected ? "solid" : "none",
- borderWidth: "4px",
position: "relative",
- width: "150px",
- height: "150px",
+ width: large ? "49%" : "32%",
+ height: "0",
+ paddingTop: large ? "49%" : "32%",
borderRadius: "4px",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
+ overflow: "hidden",
}}
- m={2}
+ my={1}
bg="muted"
>
+
{isSelected && !isDefault && (
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js
index f9ae7e2..d83990a 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.js
@@ -1,10 +1,14 @@
-import React from "react";
-import { Flex } from "theme-ui";
+import React, { useContext } from "react";
+import { Flex, Box, Text } from "theme-ui";
import SimpleBar from "simplebar-react";
+import { useMedia } from "react-media";
import AddIcon from "../../icons/AddIcon";
import TokenTile from "./TokenTile";
+import Link from "../Link";
+
+import DatabaseContext from "../../contexts/DatabaseContext";
function TokenTiles({
tokens,
@@ -13,54 +17,90 @@ function TokenTiles({
selectedToken,
onTokenRemove,
}) {
+ const { databaseStatus } = useContext(DatabaseContext);
+ const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
+
return (
-
-
+
+
-
+
+
+
+
+
+ {tokens.map((token) => (
+
+ ))}
- {tokens.map((token) => (
-
- ))}
-
-
+
+ {databaseStatus === "disabled" && (
+
+
+ Token saving is unavailable. See FAQ{" "}
+ for more information.
+
+
+ )}
+
);
}
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index def4c2b..388617e 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -272,7 +272,11 @@ function SelectMapModal({
};
return (
-
+
handleImagesUpload(event.target.files)}
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js
index 0c0933e..b54c1c4 100644
--- a/src/modals/SelectTokensModal.js
+++ b/src/modals/SelectTokensModal.js
@@ -131,7 +131,11 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
const selectedTokenWithChanges = { ...selectedToken, ...tokenSettingChanges };
return (
-
+
handleImagesUpload(event.target.files)}