From 71e1f1694a51defe81d7e9029677eefdedcf66fe Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Mon, 30 Mar 2020 13:38:27 +0630
Subject: [PATCH] Experimental features display 'enabled' / 'disabled' (#6864)

---
 .../desktop-gui/cypress/integration/settings_spec.js |  6 +++---
 packages/desktop-gui/src/settings/experiments.jsx    | 12 +++++++-----
 packages/desktop-gui/src/settings/settings.scss      | 10 +++++++---
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/desktop-gui/cypress/integration/settings_spec.js b/packages/desktop-gui/cypress/integration/settings_spec.js
index bf46429be1..0cb5452bfa 100644
--- a/packages/desktop-gui/cypress/integration/settings_spec.js
+++ b/packages/desktop-gui/cypress/integration/settings_spec.js
@@ -718,7 +718,7 @@ describe('Settings', () => {
           cy.get('.settings-experiments').contains('Cool Feature')
           cy.get('.experiment-status-sign')
           .should('have.class', 'enabled')
-          .and('have.text', 'ON')
+          .and('have.text', 'enabled')
 
           cy.percySnapshot()
         })
@@ -743,8 +743,8 @@ describe('Settings', () => {
         it('displays experiment', () => {
           cy.get('.settings-experiments').contains('Cool Feature')
           cy.get('.experiment-status-sign')
-          .should('not.have.class', 'disabled')
-          .and('have.text', 'OFF')
+          .should('have.class', 'disabled')
+          .and('have.text', 'disabled')
 
           cy.percySnapshot()
         })
diff --git a/packages/desktop-gui/src/settings/experiments.jsx b/packages/desktop-gui/src/settings/experiments.jsx
index ccceab74fc..7d1041bda2 100644
--- a/packages/desktop-gui/src/settings/experiments.jsx
+++ b/packages/desktop-gui/src/settings/experiments.jsx
@@ -27,12 +27,14 @@ const Experiments = observer(({ project }) => {
         {
           _.map(experiments, (experiment, i) => (
             <li className='experiment' key={i}>
-              <h5>
-                <MarkdownRenderer markdown={experiment.name} noParagraphWrapper/>
-                <span className={`experiment-status-sign ${experiment.enabled ? 'enabled' : ''}`}>
-                  {experiment.enabled ? 'ON' : 'OFF'}
+              <div className='experiment-header'>
+                <h5>
+                  <MarkdownRenderer markdown={experiment.name} noParagraphWrapper/>
+                </h5>
+                <span className={`experiment-status-sign ${experiment.enabled ? 'enabled' : 'disabled'}`}>
+                  {experiment.enabled ? 'enabled' : 'disabled'}
                 </span>
-              </h5>
+              </div>
               <div className='experiment-desc'>
                 <p className="text-muted">
                   <MarkdownRenderer markdown={experiment.summary} noParagraphWrapper/>
diff --git a/packages/desktop-gui/src/settings/settings.scss b/packages/desktop-gui/src/settings/settings.scss
index e2ceceb92b..3527476f7c 100644
--- a/packages/desktop-gui/src/settings/settings.scss
+++ b/packages/desktop-gui/src/settings/settings.scss
@@ -272,13 +272,17 @@
       margin-left: auto;
     }
   }
-
-
+  .experiment-header {
+    display: flex;
+    align-items: center;
+  }
+  
   .experiment-status-sign {
-    margin-left: 10px;
+    margin-left: auto;
     color: #9d9ea9;
     line-height: 28px;
     font-weight: bold;
+    text-transform: uppercase;
 
     &.enabled {
       color: #1aae73;