more directory structure inside app

src/app/HomePage.js

@@ -9,7 +9,7 @@ import { Heading1, usePageTitle } from "./util";
 
 import HomepageSplashImg from "../images/homepage-splash.png";
 import HomepageSplashImg2x from "../images/homepage-splash@2x.png";
-import SpeciesColorPicker from "./SpeciesColorPicker";
+import SpeciesColorPicker from "./components/SpeciesColorPicker";
 
 function HomePage() {
   usePageTitle("Dress to Impress");

src/app/WardrobePage/Item.js

@@ -11,7 +11,7 @@ import {
 } from "@chakra-ui/core";
 import { DeleteIcon, InfoIcon } from "@chakra-ui/icons";
 
-import { safeImageUrl } from "./util";
+import { safeImageUrl } from "../util";
 
 /**
  * Item show a basic summary of an item, in the context of the current outfit!

src/app/WardrobePage/ItemsPanel.js

@@ -13,7 +13,7 @@ import {
 import { EditIcon } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
-import { Delay, Heading1, Heading2 } from "./util";
+import { Delay, Heading1, Heading2 } from "../util";
 import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
 
 /**

src/app/WardrobePage/OutfitControls.js

@@ -17,7 +17,7 @@ import {
 } from "@chakra-ui/icons";
 
 import PosePicker from "./PosePicker";
-import SpeciesColorPicker from "./SpeciesColorPicker";
+import SpeciesColorPicker from "../components/SpeciesColorPicker";
 import useOutfitAppearance from "./useOutfitAppearance";
 import { Link } from "react-router-dom";
 

src/app/WardrobePage/PosePicker.js

@@ -17,11 +17,11 @@ import {
 import { getVisibleLayers, petAppearanceFragment } from "./useOutfitAppearance";
 
 // From https://twemoji.twitter.com/, thank you!
-import twemojiSmile from "../images/twemoji/smile.svg";
-import twemojiCry from "../images/twemoji/cry.svg";
-import twemojiSick from "../images/twemoji/sick.svg";
-import twemojiMasc from "../images/twemoji/masc.svg";
-import twemojiFem from "../images/twemoji/fem.svg";
+import twemojiSmile from "../../images/twemoji/smile.svg";
+import twemojiCry from "../../images/twemoji/cry.svg";
+import twemojiSick from "../../images/twemoji/sick.svg";
+import twemojiMasc from "../../images/twemoji/masc.svg";
+import twemojiFem from "../../images/twemoji/fem.svg";
 import { OutfitLayers } from "./OutfitPreview";
 
 function PosePicker({

src/app/WardrobePage/SearchPanel.js

@@ -3,7 +3,7 @@ import gql from "graphql-tag";
 import { Box, Text, VisuallyHidden } from "@chakra-ui/core";
 import { useQuery } from "@apollo/react-hooks";
 
-import { Delay, Heading1, useDebounce } from "./util";
+import { Delay, Heading1, useDebounce } from "../util";
 import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
 import { itemAppearanceFragment } from "./useOutfitAppearance";
 

src/app/WardrobePage/index.js

@@ -5,7 +5,7 @@ import loadable from "@loadable/component";
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
 import OutfitPreview from "./OutfitPreview";
 import useOutfitState from "./useOutfitState.js";
-import { usePageTitle } from "./util";
+import { usePageTitle } from "../util";
 
 const OutfitControls = loadable(() =>
   import(/* webpackPreload: true */ "./OutfitControls")

src/app/components/SpeciesColorPicker.js

@@ -3,7 +3,7 @@ import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
 import { Box, Flex, Select, Text } from "@chakra-ui/core";
 
-import { Delay, useFetch } from "./util";
+import { Delay, useFetch } from "../util";
 
 /**
  * SpeciesColorPicker lets the user pick the species/color of their pet.