From d0045d16c9810366e0a57fb91aa077e7976c39ef Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Tue, 12 Jun 2018 15:45:36 -0700
Subject: [PATCH] Fix stage size toggle button styling

---
 src/components/stage-header/icon--small-stage.svg | 4 ++--
 src/components/stage-header/stage-header.css      | 6 ++----
 src/components/stage-header/stage-header.jsx      | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/stage-header/icon--small-stage.svg b/src/components/stage-header/icon--small-stage.svg
index f73f5b242..377939959 100644
--- a/src/components/stage-header/icon--small-stage.svg
+++ b/src/components/stage-header/icon--small-stage.svg
@@ -5,10 +5,10 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Small-Stage-(inactive)" stroke="#575E75">
+        <g id="Small-Stage-(inactive)" stroke="#4C97FF">
             <g id="small-stage-(inactive)" transform="translate(3.000000, 4.000000)">
                 <path d="M1,0 L10,0 L10,12 L1,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,1 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z" id="Rectangle"></path>
-                <path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#575E75"></path>
+                <path d="M10,0 L13,0 L13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 L14,3 L10,3 L10,0 Z" id="Rectangle" fill="#4C97FF"></path>
                 <path d="M10,3 L14,3 L14,11 L14,11 C14,11.5522847 13.5522847,12 13,12 L10,12 L10,3 Z" id="Rectangle-Copy"></path>
             </g>
         </g>
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 24194b332..93ef5b440 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -62,8 +62,6 @@
     border-bottom-right-radius: 0;
 }
 
-.stage-button-disabled {
-    opacity: .5;
-    cursor: auto;
-    background: transparent;
+.stage-button-toggled-off {
+    filter: saturate(0);
 }
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index eab426b3e..21a156a95 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -97,7 +97,7 @@ const StageHeaderComponent = function (props) {
                             className={classNames(
                                 styles.stageButton,
                                 styles.stageButtonLeft,
-                                (stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonDisabled
+                                (stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff
                             )}
                             onClick={onSetStageSmall}
                         >
@@ -114,7 +114,7 @@ const StageHeaderComponent = function (props) {
                             className={classNames(
                                 styles.stageButton,
                                 styles.stageButtonRight,
-                                (stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonDisabled
+                                (stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonToggledOff
                             )}
                             onClick={onSetStageLarge}
                         >