minifix(GUI): improve unsafe mode setting dialog (#840)

- Change dialog message to "Are you sure you want to turn this on? You
  will be able to overwrite your system drives if you're not careful."

- Remove "CANCEL" button and put a cross at the top right corner.

- Change dialog button label from "YES, CONTINUE" to "ENABLE UNSAFE
  MODE"

In order to adapt to changes described above:

- `WarningModalService.display()` now takes an object including
  `description`, and `confirmationLabel`

Fixes: https://github.com/resin-io/etcher/issues/729
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

build/css/main.css

@@ -6465,9 +6465,15 @@ body {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.modal-warning-modal .modal-content {
+  width: 350px; }
+
 .modal-warning-modal .modal-title .glyphicon, .modal-warning-modal .modal-title .tick {
   color: #d9534f; }
 
+.modal-warning-modal .button, .modal-warning-modal .progress-button {
+  text-transform: uppercase; }
+
 /*
  * Copyright 2016 resin.io
  *

lib/gui/components/drive-selector/controllers/drive-selector.js

@@ -67,11 +67,14 @@ module.exports = function($uibModalInstance, DrivesModel, SelectionStateModel, W
       return;
     }
 
-    WarningModalService.display([
-      `This image recommends a ${SelectionStateModel.getImageRecommendedDriveSize()}`,
-      `bytes drive, however ${drive.device} is only ${drive.size} bytes.`,
-      'Are you sure you want to continue?'
-    ].join(' ')).then((userAccepted) => {
+    WarningModalService.display({
+      confirmationLabel: 'Yes, continue',
+      description: [
+        `This image recommends a ${SelectionStateModel.getImageRecommendedDriveSize()}`,
+        `bytes drive, however ${drive.device} is only ${drive.size} bytes.`,
+        'Are you sure you want to continue?'
+      ].join(' ')
+    }).then((userAccepted) => {
       if (userAccepted) {
         SelectionStateModel.toggleSetDrive(drive.device);
       }

lib/gui/components/warning-modal/controllers/warning-modal.js

@@ -16,14 +16,14 @@
 
 'use strict';
 
-module.exports = function($uibModalInstance, message) {
+module.exports = function($uibModalInstance, options) {
 
   /**
-   * @summary Modal message
+   * @summary Modal options
    * @property
    * @public
    */
-  this.message = message;
+  this.options = options;
 
   /**
    * @summary Reject the warning prompt

lib/gui/components/warning-modal/services/warning-modal.js

@@ -25,20 +25,25 @@ module.exports = function(ModalService) {
    * @function
    * @public
    *
-   * @param {String} message - danger message
+   * @param {Object} options - options
+   * @param {String} options.description - danger message
+   * @param {String} options.confirmationLabel - danger message
    * @fulfil {Boolean} - whether the user accepted or rejected the warning
    * @returns {Promise}
    *
    * @example
-   * WarningModalService.display('Don\'t do this!');
+   * WarningModalService.display({
+   *   description: 'Don\'t do this!',
+   *   confirmationLabel: 'Yes, continue!'
+   * });
    */
-  this.display = (message) => {
+  this.display = (options = {}) => {
     return ModalService.open({
       template: './components/warning-modal/templates/warning-modal.tpl.html',
       controller: 'WarningModalController as modal',
       size: 'warning-modal',
       resolve: {
-        message: _.constant(message)
+        options: _.constant(options)
       }
     }).result;
   };

lib/gui/components/warning-modal/styles/_warning-modal.scss

@@ -14,6 +14,13 @@
  * limitations under the License.
  */
 
+.modal-warning-modal .modal-content {
+  width: 350px;
+}
+
 .modal-warning-modal .modal-title .glyphicon {
   color: $palette-theme-danger-background;
 }
+.modal-warning-modal .button {
+  text-transform: uppercase;
+}

lib/gui/components/warning-modal/templates/warning-modal.tpl.html

@@ -3,20 +3,17 @@
     <span class="glyphicon glyphicon-exclamation-sign"></span>
     <span>Warning!</span>
   </h4>
+  <button class="close" ng-click="modal.reject()">&times;</button>
 </div>
 
 <div class="modal-body">
   <div class="modal-text">
-    <p>{{ ::modal.message }}</p>
+    <p>{{ ::modal.options.description }}</p>
   </div>
 </div>
 
 <div class="modal-footer">
-  <div class="modal-menu">
-    <button class="button button-danger"
-      ng-click="modal.accept()">YES, CONTINUE</button>
-
-    <button class="button button-default"
-      ng-click="modal.reject()">CANCEL</button>
-  </div>
+  <button class="button button-danger button-block"
+    ng-click="modal.accept()">{{ ::modal.options.confirmationLabel }}</button>
 </div>
+

lib/gui/pages/settings/controllers/settings.js

@@ -58,13 +58,18 @@ module.exports = function(WarningModalService, SettingsModel) {
    * @public
    *
    * @param {String} name - setting name
-   * @param {String} message - danger message
+   * @param {Object} options - options
+   * @param {String} options.description - modal description
+   * @param {String} options.confirmationLabel - modal confirmation label
    * @returns {Undefined}
    *
    * @example
-   * SettingsController.enableDangerousSetting('unsafeMode', 'Don\'t do this!');
+   * SettingsController.enableDangerousSetting('unsafeMode', {
+   *   description: 'Don\'t do this!',
+   *   confirmationLabel: 'Do it!'
+   * });
    */
-  this.enableDangerousSetting = (name, message) => {
+  this.enableDangerousSetting = (name, options) => {
     if (!this.currentData[name]) {
       this.model.set(name, false);
       return this.refreshSettings();
@@ -73,7 +78,7 @@ module.exports = function(WarningModalService, SettingsModel) {
     // Keep the checkbox unchecked until the user confirms
     this.currentData[name] = false;
 
-    WarningModalService.display(message).then((userAccepted) => {
+    WarningModalService.display(options).then((userAccepted) => {
       if (userAccepted) {
         this.model.set(name, true);
         this.refreshSettings();

lib/gui/pages/settings/templates/settings.tpl.html

@@ -46,8 +46,10 @@
     <label>
       <input type="checkbox"
         ng-model="settings.currentData.unsafeMode"
-        ng-change="settings.enableDangerousSetting('unsafeMode', 'Are you sure you want to turn this on? You will be able to burn to your system drives.')">
-
+        ng-change="settings.enableDangerousSetting('unsafeMode', {
+          description: 'Are you sure you want to turn this on? You will be able to overwrite your system drives if you\'re not careful.',
+          confirmationLabel: 'Enable unsafe mode'
+        })">
       <span>Unsafe mode <span class="label label-danger">DANGEROUS</span></span>
     </label>
   </div>