From 1fec1669dcd922848650706561ce2c4a4f38342a Mon Sep 17 00:00:00 2001
From: carljbowman <bowman@media.mit.edu>
Date: Thu, 12 Jul 2018 13:44:17 -0400
Subject: [PATCH] Update Stage Select UI

- Make stage look more like a tile element and not flust with the stage info width.
- Make the stage select state more apparent
---
 .../stage-selector/stage-selector.css          | 18 ++++++++++++++++--
 .../stage-selector/stage-selector.jsx          |  4 ++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index e845160fa..4e35dd4b6 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -20,10 +20,12 @@ $header-height: calc($stage-menu-height - 2px);
     border-style: solid;
     border-bottom: 0;
     cursor: pointer;
-    transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
+    transition: all 0.25s ease;
 }
 
 .stage-selector.is-selected {
+    border-top-left-radius: .625rem;
+    border-top-right-radius: .625rem;
     border-color: $motion-primary;
     box-shadow: 0px 0px 0px 4px $motion-transparent;
 }
@@ -44,6 +46,7 @@ $header-height: calc($stage-menu-height - 2px);
     border-top-right-radius: $space;
     border-bottom: 1px solid $ui-black-transparent;
     width: 100%;
+    transition: background-color 0.25s ease;
 }
 
 .header-title {
@@ -53,6 +56,15 @@ $header-height: calc($stage-menu-height - 2px);
 
     /* @todo: make this a mixin for all UI text labels */
     user-select: none;
+    transition: color 0.25s ease;
+}
+
+.stage-selector.is-selected .header {
+    background-color: $motion-primary;
+}
+
+.stage-selector.is-selected .header-title {
+    color: $ui-white;
 }
 
 .count {
@@ -71,9 +83,11 @@ $header-height: calc($stage-menu-height - 2px);
 
 .costume-canvas {
     display: block;
+    margin-top: .25rem;
     width: 100%;
     user-select: none;
-    border-bottom: 1px solid $ui-black-transparent;
+    border: 1px solid $ui-black-transparent;
+    border-radius: .25rem;
     box-shadow: inset 0 0 4px $ui-black-transparent;
 }
 
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index 9d40d3c24..50161bf8c 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -80,9 +80,9 @@ const StageSelector = props => {
             {url ? (
                 <CostumeCanvas
                     className={styles.costumeCanvas}
-                    height={54}
+                    height={48}
                     url={url}
-                    width={72}
+                    width={64}
                 />
             ) : null}
             <div className={styles.label}>