diff --git a/src/ItemList.css b/src/ItemList.css
deleted file mode 100644
index a8c39d7..0000000
--- a/src/ItemList.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/ItemList.js b/src/ItemList.js
index 0c4a2d2..c3fbcaf 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -10,8 +10,6 @@ import {
useTheme,
} from "@chakra-ui/core";
-import "./ItemList.css";
-
export function ItemListContainer({ children }) {
return {children};
}
diff --git a/src/ItemsPanel.css b/src/ItemsPanel.css
deleted file mode 100644
index cd5fa7b..0000000
--- a/src/ItemsPanel.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/ItemsPanel.js b/src/ItemsPanel.js
index db70982..40933b7 100644
--- a/src/ItemsPanel.js
+++ b/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 }) => (
{
e.style.height = e.offsetHeight + "px";
@@ -97,7 +109,20 @@ function ItemRadioList({ name, items, outfitState, dispatchToOutfit }) {
{items.map((item) => (
{
e.style.height = e.offsetHeight + "px";
diff --git a/src/OutfitPreview.css b/src/OutfitPreview.css
deleted file mode 100644
index c2a7455..0000000
--- a/src/OutfitPreview.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index a707252..6815953 100644
--- a/src/OutfitPreview.js
+++ b/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) => (
@@ -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