Merge pull request #2604 from carljbowman/develop

Update Stage Select UI

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;
 }
 

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}>