From a300e6bd7982fe14082538cc43c80c1756c7bb10 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 21 Jun 2020 13:18:03 +1000
Subject: [PATCH] Moved fog add toggle to two separate icons

---
 .../map/controls/FogSubtractToggle.js         | 19 ---------------
 .../map/controls/FogToolSettings.js           | 23 +++++++++++++------
 2 files changed, 16 insertions(+), 26 deletions(-)
 delete mode 100644 src/components/map/controls/FogSubtractToggle.js

diff --git a/src/components/map/controls/FogSubtractToggle.js b/src/components/map/controls/FogSubtractToggle.js
deleted file mode 100644
index 841ee57..0000000
--- a/src/components/map/controls/FogSubtractToggle.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { IconButton } from "theme-ui";
-
-import FogAddIcon from "../../../icons/FogAddIcon";
-import FogSubtractIcon from "../../../icons/FogSubtractIcon";
-
-function FogSubtractToggle({ useFogSubtract, onFogSubtractChange }) {
-  return (
-    <IconButton
-      aria-label={useFogSubtract ? "Add Fog" : "Subtract Fog"}
-      title={useFogSubtract ? "Add Fog" : "Subtract Fog"}
-      onClick={() => onFogSubtractChange(!useFogSubtract)}
-    >
-      {useFogSubtract ? <FogSubtractIcon /> : <FogAddIcon />}
-    </IconButton>
-  );
-}
-
-export default FogSubtractToggle;
diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/map/controls/FogToolSettings.js
index 616fc5a..0ab7c10 100644
--- a/src/components/map/controls/FogToolSettings.js
+++ b/src/components/map/controls/FogToolSettings.js
@@ -3,12 +3,13 @@ import { Flex } from "theme-ui";
 
 import EdgeSnappingToggle from "./EdgeSnappingToggle";
 import RadioIconButton from "./RadioIconButton";
-import FogSubtractToggle from "./FogSubtractToggle";
 
 import FogBrushIcon from "../../../icons/FogBrushIcon";
 import FogPolygonIcon from "../../../icons/FogPolygonIcon";
 import FogRemoveIcon from "../../../icons/FogRemoveIcon";
 import FogToggleIcon from "../../../icons/FogToggleIcon";
+import FogAddIcon from "../../../icons/FogAddIcon";
+import FogSubtractIcon from "../../../icons/FogSubtractIcon";
 
 import UndoButton from "./UndoButton";
 import RedoButton from "./RedoButton";
@@ -38,12 +39,20 @@ function BrushToolSettings({
         <FogBrushIcon />
       </RadioIconButton>
       <Divider vertical />
-      <FogSubtractToggle
-        useFogSubtract={settings.useFogSubtract}
-        onFogSubtractChange={(useFogSubtract) =>
-          onSettingChange({ useFogSubtract })
-        }
-      />
+      <RadioIconButton
+        title="Add Fog"
+        onClick={() => onSettingChange({ useFogSubtract: false })}
+        isSelected={!settings.useFogSubtract}
+      >
+        <FogAddIcon />
+      </RadioIconButton>
+      <RadioIconButton
+        title="Subtract Fog"
+        onClick={() => onSettingChange({ useFogSubtract: true })}
+        isSelected={settings.useFogSubtract}
+      >
+        <FogSubtractIcon />
+      </RadioIconButton>
       {/* TODO: Re-enable edge snapping when holes are fixed */}
       {/* <EdgeSnappingToggle
         useEdgeSnapping={settings.useEdgeSnapping}