From 77df9b6f357880ad150e9efce53a37ac4cbc365a Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 20 Apr 2020 15:26:36 +1000
Subject: [PATCH] Added icon to erase all submenu

---
 src/components/MapControls.js | 29 +++++++++++++++++++++--------
 src/icons/EraseAllIcon.js     | 18 ++++++++++++++++++
 2 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 src/icons/EraseAllIcon.js

diff --git a/src/components/MapControls.js b/src/components/MapControls.js
index 36b82d6..d6c2a07 100644
--- a/src/components/MapControls.js
+++ b/src/components/MapControls.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Box, IconButton, Button, Label } from "theme-ui";
+import { Flex, Box, IconButton, Label } from "theme-ui";
 
 import AddMapButton from "./AddMapButton";
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
@@ -14,6 +14,7 @@ import GridOffIcon from "../icons/GridOffIcon";
 import colors, { colorOptions } from "../helpers/colors";
 
 import MapMenu from "./MapMenu";
+import EraseAllIcon from "../icons/EraseAllIcon";
 
 function MapControls({
   onMapChange,
@@ -100,16 +101,28 @@ function MapControls({
       </Box>
     ),
     erase: (
-      <Box p={1}>
-        <Button
-          variant="secondary"
-          onClick={() => {
-            onEraseAll();
-            setCurrentSubmenu({});
+      <Box p={1} pr={3}>
+        <Label
+          sx={{
+            fontSize: 1,
+            alignItems: "center",
+            ":hover": { color: "primary", cursor: "pointer" },
+            ":active": { color: "secondary" },
           }}
         >
+          <IconButton
+            aria-label="Erase All"
+            title="Erase All"
+            onClick={() => {
+              onEraseAll();
+              setCurrentSubmenu(null);
+              setCurrentSubmenuOptions({});
+            }}
+          >
+            <EraseAllIcon />
+          </IconButton>
           Erase All
-        </Button>
+        </Label>
       </Box>
     ),
   };
diff --git a/src/icons/EraseAllIcon.js b/src/icons/EraseAllIcon.js
new file mode 100644
index 0000000..d5e66a9
--- /dev/null
+++ b/src/icons/EraseAllIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function EraseAllIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zm3.17-7.83c.39-.39 1.02-.39 1.41 0L12 12.59l1.42-1.42c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 14l1.42 1.42c.39.39.39 1.02 0 1.41-.39.39-1.02.39-1.41 0L12 15.41l-1.42 1.42c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 14l-1.42-1.42c-.39-.38-.39-1.02 0-1.41zM15.5 4l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z" />
+    </svg>
+  );
+}
+
+export default EraseAllIcon;