Refactor control components file structure

src/components/controls/DrawingToolSettings.tsx

@@ -2,34 +2,34 @@ import { useEffect } from "react";
 import { Flex, IconButton } from "theme-ui";
 import { useMedia } from "react-media";
 
-import RadioIconButton from "../../RadioIconButton";
+import RadioIconButton from "../RadioIconButton";
 
-import ColorControl from "./ColorControl";
-import AlphaBlendToggle from "./AlphaBlendToggle";
-import ToolSection from "./ToolSection";
+import ColorControl from "./shared/ColorControl";
+import AlphaBlendToggle from "./shared/AlphaBlendToggle";
+import ToolSection from "./shared/ToolSection";
 
-import BrushIcon from "../../../icons/BrushToolIcon";
-import BrushPaintIcon from "../../../icons/BrushPaintIcon";
-import BrushLineIcon from "../../../icons/BrushLineIcon";
-import BrushRectangleIcon from "../../../icons/BrushRectangleIcon";
-import BrushCircleIcon from "../../../icons/BrushCircleIcon";
-import BrushTriangleIcon from "../../../icons/BrushTriangleIcon";
-import EraseAllIcon from "../../../icons/EraseAllIcon";
-import EraseIcon from "../../../icons/EraseToolIcon";
+import BrushIcon from "../../icons/BrushToolIcon";
+import BrushPaintIcon from "../../icons/BrushPaintIcon";
+import BrushLineIcon from "../../icons/BrushLineIcon";
+import BrushRectangleIcon from "../../icons/BrushRectangleIcon";
+import BrushCircleIcon from "../../icons/BrushCircleIcon";
+import BrushTriangleIcon from "../../icons/BrushTriangleIcon";
+import EraseAllIcon from "../../icons/EraseAllIcon";
+import EraseIcon from "../../icons/EraseToolIcon";
 
-import UndoButton from "./UndoButton";
-import RedoButton from "./RedoButton";
+import UndoButton from "./shared/UndoButton";
+import RedoButton from "./shared/RedoButton";
 
-import Divider from "../../Divider";
+import Divider from "../Divider";
 
-import { useKeyboard } from "../../../contexts/KeyboardContext";
+import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import shortcuts from "../../../shortcuts";
+import shortcuts from "../../shortcuts";
 
 import {
   DrawingToolSettings as DrawingToolSettingsType,
   DrawingToolType,
-} from "../../../types/Drawing";
+} from "../../types/Drawing";
 
 type DrawingToolSettingsProps = {
   settings: DrawingToolSettingsType;

src/components/controls/FogToolSettings.tsx

@@ -1,32 +1,32 @@
 import { Flex } from "theme-ui";
 import { useMedia } from "react-media";
 
-import RadioIconButton from "../../RadioIconButton";
+import RadioIconButton from "../RadioIconButton";
 
-import MultilayerToggle from "./MultilayerToggle";
-import FogPreviewToggle from "./FogPreviewToggle";
-import FogCutToggle from "./FogCutToggle";
+import MultilayerToggle from "./shared/MultilayerToggle";
+import FogPreviewToggle from "./shared/FogPreviewToggle";
+import FogCutToggle from "./shared/FogCutToggle";
 
-import FogBrushIcon from "../../../icons/FogBrushIcon";
-import FogPolygonIcon from "../../../icons/FogPolygonIcon";
-import FogRemoveIcon from "../../../icons/FogRemoveIcon";
-import FogToggleIcon from "../../../icons/FogToggleIcon";
-import FogRectangleIcon from "../../../icons/FogRectangleIcon";
+import FogBrushIcon from "../../icons/FogBrushIcon";
+import FogPolygonIcon from "../../icons/FogPolygonIcon";
+import FogRemoveIcon from "../../icons/FogRemoveIcon";
+import FogToggleIcon from "../../icons/FogToggleIcon";
+import FogRectangleIcon from "../../icons/FogRectangleIcon";
 
-import UndoButton from "./UndoButton";
-import RedoButton from "./RedoButton";
-import ToolSection from "./ToolSection";
+import UndoButton from "./shared/UndoButton";
+import RedoButton from "./shared/RedoButton";
+import ToolSection from "./shared/ToolSection";
 
-import Divider from "../../Divider";
+import Divider from "../Divider";
 
-import { useKeyboard } from "../../../contexts/KeyboardContext";
+import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import shortcuts from "../../../shortcuts";
+import shortcuts from "../../shortcuts";
 
 import {
   FogToolSettings as FogToolSettingsType,
   FogToolType,
-} from "../../../types/Fog";
+} from "../../types/Fog";
 
 type FogToolSettingsProps = {
   settings: FogToolSettingsType;

src/components/controls/PointerToolSettings.tsx

@@ -1,8 +1,8 @@
 import { Flex } from "theme-ui";
 
-import ColorControl from "./ColorControl";
+import ColorControl from "./shared/ColorControl";
 
-import { PointerToolSettings as PointerToolSettingsType } from "../../../types/Pointer";
+import { PointerToolSettings as PointerToolSettingsType } from "../../types/Pointer";
 
 type PointerToolSettingsProps = {
   settings: PointerToolSettingsType;

src/components/controls/SelectToolSettings.tsx

@@ -3,16 +3,16 @@ import { Flex } from "theme-ui";
 import {
   SelectToolSettings as SelectToolSettingsType,
   SelectToolType,
-} from "../../../types/Select";
+} from "../../types/Select";
 
-import { useKeyboard } from "../../../contexts/KeyboardContext";
+import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import ToolSection from "./ToolSection";
+import ToolSection from "./shared/ToolSection";
 
-import shortcuts from "../../../shortcuts";
+import shortcuts from "../../shortcuts";
 
-import RectIcon from "../../../icons/SelectRectangleIcon";
-import PathIcon from "../../../icons/SelectPathIcon";
+import RectIcon from "../../icons/SelectRectangleIcon";
+import PathIcon from "../../icons/SelectPathIcon";
 
 type SelectToolSettingsProps = {
   settings: SelectToolSettingsType;

src/components/controls/shared/ColorControl.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Box, SxProp } from "theme-ui";
 
 import colors, { colorOptions, Color } from "../../../helpers/colors";
-import MapMenu from "../MapMenu";
+import MapMenu from "../../map/MapMenu";
 
 type ColorCircleProps = {
   color: Color;

src/components/map/MapControls.tsx

@@ -6,10 +6,10 @@ import Divider from "../Divider";
 
 import SelectMapButton from "./SelectMapButton";
 
-import FogToolSettings from "./controls/FogToolSettings";
-import DrawingToolSettings from "./controls/DrawingToolSettings";
-import PointerToolSettings from "./controls/PointerToolSettings";
-import SelectToolSettings from "./controls/SelectToolSettings";
+import FogToolSettings from "../controls/FogToolSettings";
+import DrawingToolSettings from "../controls/DrawingToolSettings";
+import PointerToolSettings from "../controls/PointerToolSettings";
+import SelectToolSettings from "../controls/SelectToolSettings";
 
 import MoveToolIcon from "../../icons/MoveToolIcon";
 import FogToolIcon from "../../icons/FogToolIcon";