From fdf15f53d7fcc6d7ca1d70971e6775d33aa81992 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Mon, 19 Feb 2018 11:27:30 +0000
Subject: [PATCH] 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.
---
 .../templates/drive-selector-modal.tpl.html              | 3 +++
 lib/gui/app/scss/components/_button.scss                 | 4 ++++
 lib/gui/app/scss/modules/_theme.scss                     | 1 +
 lib/gui/css/main.css                                     | 9 +++++++++
 4 files changed, 17 insertions(+)

diff --git a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html
index 92695fe2..89bb1071 100644
--- a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/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>
diff --git a/lib/gui/app/scss/components/_button.scss b/lib/gui/app/scss/components/_button.scss
index aba5856c..b797aeff 100644
--- a/lib/gui/app/scss/components/_button.scss
+++ b/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
   )
 );
 
diff --git a/lib/gui/app/scss/modules/_theme.scss b/lib/gui/app/scss/modules/_theme.scss
index eb05d96f..a09fac04 100644
--- a/lib/gui/app/scss/modules/_theme.scss
+++ b/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;
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 20d400c2..904d3411 100644
--- a/lib/gui/css/main.css
+++ b/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
  *