fix(flags): Update Feature Flag styles

Update the Feature Flag styles to include gradient backgrounds for the opt-in button, add hover styles; update class spelling error so that proper styles are applied.

related to:
- fabric8-ui/fabric8-ux#837
- openshiftio/openshift.io#1955
- openshiftio/openshift.io#1956

src/app/feature-flag/banner/feature-banner.component.html

@@ -13,7 +13,7 @@
   <div *ngSwitchCase="'experimental'">
     <div class="experimental-bar" [class.experimental-bar-minimal]="hideBanner">
       <span class="feature-text">
-        This feature is experimental. You can manage pre-production features on your  <a class="btn btn-link-exprimental" [routerLink]="profileLink">profile</a> page.
+        This feature is experimental. You can manage pre-production features on your  <a class="btn btn-link-experimental" [routerLink]="profileLink">profile</a> page.
         <a class="btn btn-link-experimental" (click)="acknowledgeWarning()">Got it!</a>
       </span>
       <button class="pull-right experimental-more-info">

src/app/feature-flag/banner/feature-banner.component.less

@@ -42,6 +42,11 @@
   border-color: @color-for-feature;
   background-color: @color-for-feature;
   background-image: linear-gradient(to bottom, @color-for-feature 0, @color-for-feature 100%);
+  &:hover {
+    background-color: @color-for-feature;
+    background-image: none;
+    border-color: darken((@color-for-feature), 10%);
+  }
 }
 
 // EXPERIMENTAL

src/app/feature-flag/warning-page/feature-warning-page.component.html

@@ -7,7 +7,7 @@
           <h2>Internal Features Opt-in</h2>
           <p>These features are only available to Red Hat users and have no guarantee of performance or stability.
             Use theses at your own risk.</p>
-          <button [routerLink]="profileLink">Opt-in to Internal Features</button>
+          <button class="btn btn-lg btn-feature-level" [routerLink]="profileLink">Opt-in to Internal Features</button>
          </div>
       </div>
     </div>
@@ -20,7 +20,7 @@ <h2>Internal Features Opt-in</h2>
           <h2>Experimental Features Opt-in</h2>
           <p>These features are currently in beta testing and have no guarantee of performance or stability.
             Use theses at your own risk.</p>
-            <button [routerLink]="profileLink">Opt-in to Experimental Features</button>
+            <button class="btn btn-lg btn-feature-level" [routerLink]="profileLink">Opt-in to Experimental Features</button>
         </div>
       </div>
     </div>
@@ -33,7 +33,7 @@ <h2>Experimental Features Opt-in</h2>
           <h2>Beta Features Opt-in</h2>
           <p>These features are currently in beta testing and have no guarantee of performance or stability.
             Use theses at your own risk.</p>
-          <button [routerLink]="profileLink">Opt-in to Beta Features</button>
+          <button class="btn btn-lg btn-feature-level" [routerLink]="profileLink">Opt-in to Beta Features</button>
         </div>
       </div>
     </div>
@@ -61,4 +61,3 @@ <h2>Pre-production Features</h2>
     </div>
   </div>
 </div>
-

src/app/feature-flag/warning-page/feature-warning-page.component.less

@@ -10,9 +10,16 @@
       i {
         color: @color-for-feature;
       }
-      button {
+      .btn-feature-level {
+        &:extend(.btn-default);
+        border-color: @color-for-feature;
         background-color: @color-for-feature;
-        color: white;
+        background-image: linear-gradient(to bottom, @color-for-feature 0, @color-for-feature 100%);
+        &:hover {
+          background-color: @color-for-feature;
+          background-image: none;
+          border-color: darken((@color-for-feature), 10%);
+        }
       }
     }
   }