Changed fog so it is tranparent when you can edit it

Added a show preview toggle to see how others will see it.
Refactored fog and drawing props to simplify

src/components/map/controls/FogPreviewToggle.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { IconButton } from "theme-ui";
+
+import PreviewOnIcon from "../../../icons/FogPreviewOnIcon";
+import PreviewOffIcon from "../../../icons/FogPreviewOffIcon";
+
+function FogPreviewToggle({ useFogPreview, onFogPreviewChange }) {
+  return (
+    <IconButton
+      aria-label={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
+      title={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
+      onClick={() => onFogPreviewChange(!useFogPreview)}
+    >
+      {useFogPreview ? <PreviewOnIcon /> : <PreviewOffIcon />}
+    </IconButton>
+  );
+}
+
+export default FogPreviewToggle;

src/components/map/controls/FogToolSettings.js

@@ -1,9 +1,10 @@
 import React, { useContext, useEffect } from "react";
-import { Flex } from "theme-ui";
+import { Flex, Label, Checkbox } from "theme-ui";
 import { useMedia } from "react-media";
 
 import EdgeSnappingToggle from "./EdgeSnappingToggle";
 import RadioIconButton from "./RadioIconButton";
+import FogPreviewToggle from "./FogPreviewToggle";
 
 import FogBrushIcon from "../../../icons/FogBrushIcon";
 import FogPolygonIcon from "../../../icons/FogPolygonIcon";
@@ -142,6 +143,10 @@ function BrushToolSettings({
           onSettingChange({ useEdgeSnapping })
         }
       />
+      <FogPreviewToggle
+        useFogPreview={settings.preview}
+        onFogPreviewChange={(preview) => onSettingChange({ preview })}
+      />
       <Divider vertical />
       <UndoButton
         onClick={() => onToolAction("fogUndo")}