move hacky .css files into emotion

src/ItemList.css

@@ -1,12 +0,0 @@
-.item-list-row-exit {
-  opacity: 1;
-  height: auto;
-}
-
-.item-list-row-exit-active {
-  opacity: 0;
-  height: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  transition: all 0.5s;
-}

src/ItemList.js

@@ -10,8 +10,6 @@ import {
   useTheme,
 } from "@chakra-ui/core";
 
-import "./ItemList.css";
-
 export function ItemListContainer({ children }) {
   return <Flex direction="column">{children}</Flex>;
 }

src/ItemsPanel.css

@@ -1,12 +0,0 @@
-.items-panel-zone-exit {
-  opacity: 1;
-  height: auto;
-}
-
-.items-panel-zone-exit-active {
-  opacity: 0;
-  height: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  transition: all 0.5s;
-}

src/ItemsPanel.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { css } from "emotion";
 import {
   Box,
   Editable,
@@ -15,8 +16,6 @@ import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Delay, Heading1, Heading2 } from "./util";
 import { ItemListContainer, Item, ItemListSkeleton } from "./ItemList";
 
-import "./ItemsPanel.css";
-
 function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
   const { zonesAndItems } = outfitState;
 
@@ -45,7 +44,20 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
             {zonesAndItems.map(({ zoneLabel, items }) => (
               <CSSTransition
                 key={zoneLabel}
-                classNames="items-panel-zone"
+                classNames={css`
+                  &-exit {
+                    opacity: 1;
+                    height: auto;
+                  }
+
+                  &-exit-active {
+                    opacity: 0;
+                    height: 0 !important;
+                    margin-top: 0 !important;
+                    margin-bottom: 0 !important;
+                    transition: all 0.5s;
+                  }
+                `}
                 timeout={500}
                 onExit={(e) => {
                   e.style.height = e.offsetHeight + "px";
@@ -97,7 +109,20 @@ function ItemRadioList({ name, items, outfitState, dispatchToOutfit }) {
         {items.map((item) => (
           <CSSTransition
             key={item.id}
-            classNames="item-list-row"
+            classNames={css`
+              &-exit {
+                opacity: 1;
+                height: auto;
+              }
+
+              &-exit-active {
+                opacity: 0;
+                height: 0 !important;
+                margin-top: 0 !important;
+                margin-bottom: 0 !important;
+                transition: all 0.5s;
+              }
+            `}
             timeout={500}
             onExit={(e) => {
               e.style.height = e.offsetHeight + "px";

src/OutfitPreview.css

@@ -1,17 +0,0 @@
-.outfit-preview-layer-exit {
-  opacity: 1;
-}
-
-.outfit-preview-layer-exit-active {
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.outfit-preview-layer-image {
-  opacity: 0.01;
-}
-
-.outfit-preview-layer-image[src] {
-  opacity: 1;
-  transition: opacity 0.2s;
-}

src/OutfitPreview.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { css } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
@@ -20,8 +21,6 @@ import { Delay } from "./util";
 import OutfitResetModal from "./OutfitResetModal";
 import SpeciesColorPicker from "./SpeciesColorPicker";
 
-import "./OutfitPreview.css";
-
 export const itemAppearanceFragment = gql`
   fragment AppearanceForOutfitPreview on Appearance {
     layers {
@@ -90,10 +89,16 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
         {visibleLayers.map((layer) => (
           <CSSTransition
             key={layer.id}
-            classNames={{
+            classNames={css`
-              exit: "outfit-preview-layer-exit",
+              &-exit {
-              exitActive: "outfit-preview-layer-exit-active",
+                opacity: 1;
-            }}
+              }
+
+              &-exit-active {
+                opacity: 0;
+                transition: opacity 0.2s;
+              }
+            `}
             timeout={200}
           >
             <FullScreenCenter>
@@ -102,7 +107,14 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
                 objectFit="contain"
                 maxWidth="100%"
                 maxHeight="100%"
-                className="outfit-preview-layer-image"
+                className={css`
+                  opacity: 0.01;
+
+                  &[src] {
+                    opacity: 1;
+                    transition: opacity 0.2s;
+                  }
+                `}
                 // This sets up the cache to not need to reload images during
                 // download!
                 // TODO: Re-enable this once we get our change into Chakra