diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js
index 5e67203..ecb1bb7 100644
--- a/src/components/AddMapButton.js
+++ b/src/components/AddMapButton.js
@@ -2,10 +2,11 @@ import React, { useRef, useState, useEffect } from "react";
import { IconButton } from "theme-ui";
import AddMapModal from "../modals/AddMapModal";
+import AddMapIcon from "../icons/AddMapIcon";
const defaultMapSize = 22;
-function AddMapButton({ onMapChanged }) {
+function AddMapButton({ onMapChange }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
@@ -37,7 +38,7 @@ function AddMapButton({ onMapChanged }) {
function handleDone() {
if (mapDataRef.current && mapSource) {
- onMapChanged(mapDataRef.current, mapSource);
+ onMapChange(mapDataRef.current, mapSource);
}
closeModal();
}
@@ -54,16 +55,7 @@ function AddMapButton({ onMapChanged }) {
return (
<>
-
+
-
+
-
+
);
- const mapActions = (
-
-
-
- );
-
return (
<>
- {mapActions}
+
+ );
+ return (
+
+
+
+
+
+ {divider}
+
+
+
+
+
+
+
+
+
+ {divider}
+
+
+
+
+
+
+
+ );
+}
+
+export default MapControls;
diff --git a/src/icons/AddMapIcon.js b/src/icons/AddMapIcon.js
new file mode 100644
index 0000000..aebdf6a
--- /dev/null
+++ b/src/icons/AddMapIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function AddMapIcon() {
+ return (
+
+ );
+}
+
+export default AddMapIcon;
diff --git a/src/icons/AddPartyMemberIcon.js b/src/icons/AddPartyMemberIcon.js
new file mode 100644
index 0000000..596e40b
--- /dev/null
+++ b/src/icons/AddPartyMemberIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function AddPartyMemberIcon() {
+ return (
+
+ );
+}
+
+export default AddPartyMemberIcon;
diff --git a/src/icons/BrushToolIcon.js b/src/icons/BrushToolIcon.js
new file mode 100644
index 0000000..e9a9c68
--- /dev/null
+++ b/src/icons/BrushToolIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function BrushToolIcon() {
+ return (
+
+ );
+}
+
+export default BrushToolIcon;
diff --git a/src/icons/ChangeNicknameIcon.js b/src/icons/ChangeNicknameIcon.js
new file mode 100644
index 0000000..3c5d1a8
--- /dev/null
+++ b/src/icons/ChangeNicknameIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function ChangeNicknameIcon() {
+ return (
+
+ );
+}
+
+export default ChangeNicknameIcon;
diff --git a/src/icons/EraseToolIcon.js b/src/icons/EraseToolIcon.js
new file mode 100644
index 0000000..710ccbf
--- /dev/null
+++ b/src/icons/EraseToolIcon.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+function EraseToolIcon() {
+ return (
+
+ );
+}
+
+export default EraseToolIcon;
diff --git a/src/icons/ExpandMoreIcon.js b/src/icons/ExpandMoreIcon.js
new file mode 100644
index 0000000..35e4078
--- /dev/null
+++ b/src/icons/ExpandMoreIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function ExpandMoreIcon() {
+ return (
+
+ );
+}
+
+export default ExpandMoreIcon;
diff --git a/src/icons/PanToolIcon.js b/src/icons/PanToolIcon.js
new file mode 100644
index 0000000..479d197
--- /dev/null
+++ b/src/icons/PanToolIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function PanToolIcon() {
+ return (
+
+ );
+}
+
+export default PanToolIcon;
diff --git a/src/icons/RedoIcon.js b/src/icons/RedoIcon.js
new file mode 100644
index 0000000..6f0896b
--- /dev/null
+++ b/src/icons/RedoIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function RedoIcon() {
+ return (
+
+ );
+}
+
+export default RedoIcon;
diff --git a/src/icons/UndoIcon.js b/src/icons/UndoIcon.js
new file mode 100644
index 0000000..da08de0
--- /dev/null
+++ b/src/icons/UndoIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function UndoIcon() {
+ return (
+
+ );
+}
+
+export default UndoIcon;