Refactored component folder structure to be a little clearer

src/components/map/AddMapButton.js

@@ -1,8 +1,8 @@
 import React, { useRef, useState, useEffect } from "react";
 import { IconButton } from "theme-ui";
 
-import AddMapModal from "../modals/AddMapModal";
-import AddMapIcon from "../icons/AddMapIcon";
+import AddMapModal from "../../modals/AddMapModal";
+import AddMapIcon from "../../icons/AddMapIcon";
 
 const defaultMapSize = 22;
 

src/components/map/Map.js

@@ -2,13 +2,13 @@ import React, { useRef, useEffect, useState } from "react";
 import { Box, Image } from "theme-ui";
 import interact from "interactjs";
 
-import ProxyToken from "./ProxyToken";
-import TokenMenu from "./TokenMenu";
+import ProxyToken from "../token/ProxyToken";
+import TokenMenu from "../token/TokenMenu";
 import MapToken from "./MapToken";
 import MapDrawing from "./MapDrawing";
 import MapControls from "./MapControls";
 
-import { omit } from "../helpers/shared";
+import { omit } from "../../helpers/shared";
 
 const mapTokenProxyClassName = "map-token__proxy";
 const mapTokenMenuClassName = "map-token__menu";

src/components/map/MapControls.js

@@ -2,23 +2,23 @@ import React, { useState, useEffect, useRef } from "react";
 import { Flex, Box, IconButton, Label } from "theme-ui";
 
 import AddMapButton from "./AddMapButton";
-import ExpandMoreIcon from "../icons/ExpandMoreIcon";
-import PanToolIcon from "../icons/PanToolIcon";
-import BrushToolIcon from "../icons/BrushToolIcon";
-import EraseToolIcon from "../icons/EraseToolIcon";
-import UndoIcon from "../icons/UndoIcon";
-import RedoIcon from "../icons/RedoIcon";
-import GridOnIcon from "../icons/GridOnIcon";
-import GridOffIcon from "../icons/GridOffIcon";
-import BlendOnIcon from "../icons/BlendOnIcon";
-import BlendOffIcon from "../icons/BlendOffIcon";
-import GestureOnIcon from "../icons/GestureOnIcon";
-import GestureOffIcon from "../icons/GestureOffIcon";
+import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
+import PanToolIcon from "../../icons/PanToolIcon";
+import BrushToolIcon from "../../icons/BrushToolIcon";
+import EraseToolIcon from "../../icons/EraseToolIcon";
+import UndoIcon from "../../icons/UndoIcon";
+import RedoIcon from "../../icons/RedoIcon";
+import GridOnIcon from "../../icons/GridOnIcon";
+import GridOffIcon from "../../icons/GridOffIcon";
+import BlendOnIcon from "../../icons/BlendOnIcon";
+import BlendOffIcon from "../../icons/BlendOffIcon";
+import GestureOnIcon from "../../icons/GestureOnIcon";
+import GestureOffIcon from "../../icons/GestureOffIcon";
 
-import colors, { colorOptions } from "../helpers/colors";
+import colors, { colorOptions } from "../../helpers/colors";
 
 import MapMenu from "./MapMenu";
-import EraseAllIcon from "../icons/EraseAllIcon";
+import EraseAllIcon from "../../icons/EraseAllIcon";
 
 function MapControls({
   onMapChange,

src/components/map/MapDrawing.js

@@ -2,10 +2,10 @@ import React, { useRef, useEffect, useState } from "react";
 import simplify from "simplify-js";
 import shortid from "shortid";
 
-import colors from "../helpers/colors";
-import { snapPositionToGrid } from "../helpers/shared";
+import colors from "../../helpers/colors";
+import { snapPositionToGrid } from "../../helpers/shared";
 
-import { pointsToGesture, gestureToData } from "../helpers/gestures";
+import { pointsToGesture, gestureToData } from "../../helpers/gestures";
 
 function MapDrawing({
   width,

src/components/map/MapToken.js

@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 import { Box, Image } from "theme-ui";
 
-import TokenLabel from "./TokenLabel";
-import TokenStatus from "./TokenStatus";
+import TokenLabel from "../token/TokenLabel";
+import TokenStatus from "../token/TokenStatus";
 
-import usePreventTouch from "../helpers/usePreventTouch";
+import usePreventTouch from "../../helpers/usePreventTouch";
 
 function MapToken({ token, tokenSizePercent, className }) {
   const imageRef = useRef();

src/components/party/AddPartyMemberButton.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { IconButton } from "theme-ui";
 
-import AddPartyMemberModal from "../modals/AddPartyMemberModal";
-import AddPartyMemberIcon from "../icons/AddPartyMemberIcon";
+import AddPartyMemberModal from "../../modals/AddPartyMemberModal";
+import AddPartyMemberIcon from "../../icons/AddPartyMemberIcon";
 
 function AddPartyMemberButton({ gameId }) {
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);

src/components/party/ChangeNicknameButton.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { IconButton } from "theme-ui";
 
-import ChangeNicknameModal from "../modals/ChangeNicknameModal";
-import ChangeNicknameIcon from "../icons/ChangeNicknameIcon";
+import ChangeNicknameModal from "../../modals/ChangeNicknameModal";
+import ChangeNicknameIcon from "../../icons/ChangeNicknameIcon";
 
 function ChangeNicknameButton({ nickname, onChange }) {
   const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);

src/components/party/StartStreamButton.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { IconButton, Box, Text, Link } from "theme-ui";
 import adapter from "webrtc-adapter";
 
-import StartStreamModal from "../modals/StartStreamModal";
+import StartStreamModal from "../../modals/StartStreamModal";
 
 function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
   const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false);

src/components/party/Stream.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Text, IconButton, Box } from "theme-ui";
 
-import Banner from "./Banner";
+import Banner from "../Banner";
 
 function Stream({ stream, nickname }) {
   const [streamMuted, setStreamMuted] = useState(false);

src/components/token/ListToken.js

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Image } from "theme-ui";
 
-import usePreventTouch from "../helpers/usePreventTouch";
+import usePreventTouch from "../../helpers/usePreventTouch";
 
 function ListToken({ image, className }) {
   const imageRef = useRef();

src/components/token/ProxyToken.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
-import usePortal from "../helpers/usePortal";
+import usePortal from "../../helpers/usePortal";
 
 import TokenLabel from "./TokenLabel";
 import TokenStatus from "./TokenStatus";

src/components/token/TokenLabel.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Image, Box, Text } from "theme-ui";
 
-import tokenLabel from "../images/TokenLabel.png";
+import tokenLabel from "../../images/TokenLabel.png";
 
 function TokenLabel({ label }) {
   return (

src/components/token/TokenMenu.js

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import interact from "interactjs";
 import { Box, Input } from "theme-ui";
 
-import MapMenu from "./MapMenu";
+import MapMenu from "../map/MapMenu";
 
-import colors, { colorOptions } from "../helpers/colors";
+import colors, { colorOptions } from "../../helpers/colors";
 
 function TokenMenu({ tokenClassName, onTokenChange }) {
   const [isOpen, setIsOpen] = useState(false);

src/components/token/TokenStatus.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box } from "theme-ui";
 
-import colors from "../helpers/colors";
+import colors from "../../helpers/colors";
 
 function TokenStatus({ statuses }) {
   return (

src/components/token/Tokens.js

@@ -3,11 +3,11 @@ import { Box } from "theme-ui";
 import shortid from "shortid";
 import SimpleBar from "simplebar-react";
 
-import * as tokens from "../tokens";
+import * as tokens from "../../tokens";
 
 import ListToken from "./ListToken";
 import ProxyToken from "./ProxyToken";
-import NumberInput from "./NumberInput";
+import NumberInput from "../NumberInput";
 
 const listTokenClassName = "list-token";
 

src/routes/Game.js

@@ -12,9 +12,9 @@ import { omit, isStreamStopped } from "../helpers/shared";
 import useSession from "../helpers/useSession";
 import useNickname from "../helpers/useNickname";
 
-import Party from "../components/Party";
-import Tokens from "../components/Tokens";
-import Map from "../components/Map";
+import Party from "../components/party/Party";
+import Tokens from "../components/token/Tokens";
+import Map from "../components/map/Map";
 import Banner from "../components/Banner";
 import LoadingOverlay from "../components/LoadingOverlay";