feat(GUI): warning makes drive-selector button orange (#2044)

We make the drive-selector button orange when there is a warning attached
to the image-drive pair.

Change-Type: patch
Changelog-Entry: Make the drive-selector button orange on warnings.

lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html

@@ -55,6 +55,9 @@
 <div class="modal-footer">
   <button class="button button-primary button-block"
     tabindex="{{ 15 + modal.getDrives().length }}"
+    ng-class="{
+      'button-warning': modal.constraints.hasDriveImageCompatibilityStatus(modal.state.getDrive(), modal.state.getImage())
+    }"
     ng-click="modal.closeModal()"
     ng-disabled="!modal.state.hasDrive()">Continue</button>
 </div>

lib/gui/app/scss/components/_button.scss

@@ -69,6 +69,10 @@ $button-types-styles: (
   danger: (
     bg: $palette-theme-danger-background,
     color: $palette-theme-danger-foreground
+  ),
+  warning: (
+    bg: $palette-theme-warning-background,
+    color: $palette-theme-danger-foreground
   )
 );
 

lib/gui/app/scss/modules/_theme.scss

@@ -30,6 +30,7 @@ $palette-theme-default-foreground: #b3b3b3;
 $palette-theme-primary-background: #5793db;
 $palette-theme-primary-foreground: #fff;
 $palette-theme-warning-background: #ff912f;
+$palette-theme-warning-foreground: #fff;
 $palette-theme-danger-background: #d9534f;
 $palette-theme-danger-foreground: #fff;
 $palette-theme-success-background: #5fb835;

lib/gui/css/main.css

@@ -6160,6 +6160,15 @@ body {
   background-color: #c9302c;
   color: #fff; }
 
+.button-warning {
+  background-color: #ff912f;
+  color: #fff; }
+
+.button-warning:focus,
+.button-warning:hover {
+  background-color: #fb7600;
+  color: #fff; }
+
 /*
  * Copyright 2016 resin.io
  *