From 441f6550dbefa13d485a7703fdef6e767b928ccd Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 23:17:59 -0700
Subject: [PATCH] move hacky .css files into emotion

---
 src/ItemList.css      | 12 ------------
 src/ItemList.js       |  2 --
 src/ItemsPanel.css    | 12 ------------
 src/ItemsPanel.js     | 33 +++++++++++++++++++++++++++++----
 src/OutfitPreview.css | 17 -----------------
 src/OutfitPreview.js  | 26 +++++++++++++++++++-------
 6 files changed, 48 insertions(+), 54 deletions(-)
 delete mode 100644 src/ItemList.css
 delete mode 100644 src/ItemsPanel.css
 delete mode 100644 src/OutfitPreview.css

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 <Flex direction="column">{children}</Flex>;
 }
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 }) => (
               <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";
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) => (
           <CSSTransition
             key={layer.id}
-            classNames={{
-              exit: "outfit-preview-layer-exit",
-              exitActive: "outfit-preview-layer-exit-active",
-            }}
+            classNames={css`
+              &-exit {
+                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