Experimental features display 'enabled' / 'disabled' (#6864)

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

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

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;