Added label to feature picker switch

Author: Victor George

src/projects/detail/components/FeatureSelector/DefaultFeatureForm.jsx

@@ -68,6 +68,7 @@ class DefaultFeatureForm extends Component {
             onChange={ this.toggleFeature }
             name="featue-active"
             checked={isActive}
+            label="Enable feature"
           />
         </div>
         <div className="feature-form-content">

src/projects/detail/components/FeatureSelector/FeatureForm.scss

@@ -12,18 +12,17 @@
       background-color: $tc-gray-neutral-dark;
     }
   }
-  
+
   .feature-title-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 4 * $base-unit;
     padding-bottom: 2 * $base-unit;
     border-bottom: 1px solid $tc-gray-10;
-    
+
     .title {
       @include tc-heading;
       @include roboto-medium;
-
       flex: 1;
       color: $tc-black;
       white-space: nowrap;
@@ -56,7 +55,6 @@
   }
 
   .feature-form-content {
-
     .feature-description {
       @include roboto;
       font-size: $tc-body-md;
@@ -65,10 +63,9 @@
       color: $tc-gray-50;
       margin: 4 * $base-unit 0px;
     }
-    
+
     .predefined-feature-form,
     .custom-feature-form {
-      
       .feature-notes {
         label {
           @include tc-label-md;
@@ -102,7 +99,7 @@
     .feature-form-actions {
       display: flex;
       justify-content: center;
-      
+
       button + button {
         margin-left: 4 * $base-unit;
       }
@@ -122,11 +119,27 @@
       }
     }
   }
-  
+
   .description {
     textarea {
       margin-top: 64px;
       height: 150px;
     }
   }
-}
+
+  // Switch button extensions
+  .SwitchButton {
+    .label {
+      cursor: pointer;
+      transition: color 200ms ease-in-out;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    &:hover .label {
+      color: $tc-black;
+    }
+  }
+}