ux(): update all confirm modals to new design

public/app/core/services/alert_srv.js

@@ -66,6 +66,7 @@ function (angular, _, coreModule) {
 
       scope.title = payload.title;
       scope.text = payload.text;
+      scope.text2 = payload.text2;
       scope.onConfirm = payload.onConfirm;
       scope.icon = payload.icon || "fa-check";
       scope.yesText = payload.yesText || "Yes";
@@ -74,7 +75,7 @@ function (angular, _, coreModule) {
       var confirmModal = $modal({
         template: 'public/app/partials/confirm_modal.html',
         persist: false,
-        modalClass: 'modal-no-header confirm-modal',
+        modalClass: 'confirm-modal',
         show: false,
         scope: scope,
         keyboard: false

public/app/features/admin/adminListOrgsCtrl.js

@@ -20,8 +20,9 @@ function (angular) {
 
     $scope.deleteOrg = function(org) {
       $scope.appEvent('confirm-modal', {
-        title: 'Do you want to delete organization ' + org.name + '?',
-        text: 'All dashboards for this organization will be removed!',
+        title: 'Delete',
+        text: 'Do you want to delete organization ' + org.name + '?',
+        text2: 'All dashboards for this organization will be removed!',
         icon: 'fa-trash',
         yesText: 'Delete',
         onConfirm: function() {

public/app/features/admin/adminListUsersCtrl.js

@@ -20,7 +20,8 @@ function (angular) {
 
     $scope.deleteUser = function(user) {
       $scope.appEvent('confirm-modal', {
-        title: 'Do you want to delete ' + user.login + '?',
+        title: 'Delete',
+        text: 'Do you want to delete ' + user.login + '?',
         icon: 'fa-trash',
         yesText: 'Delete',
         onConfirm: function() {

public/app/features/dashboard/dashnav/dashnav.ts

@@ -108,8 +108,9 @@ export class DashNavCtrl {
         err.isHandled = true;
 
         $scope.appEvent('confirm-modal', {
-          title: 'Someone else has updated this dashboard!',
-          text: "Would you still like to save this dashboard?",
+          title: 'Conflict',
+          text: 'Someone else has updated this dashboard.',
+          text2: 'Would you still like to save this dashboard?',
           yesText: "Save & Overwrite",
           icon: "fa-warning",
           onConfirm: function() {
@@ -122,8 +123,9 @@ export class DashNavCtrl {
         err.isHandled = true;
 
         $scope.appEvent('confirm-modal', {
-          title: 'Another dashboard with the same name exists',
-          text: "Would you still like to save this dashboard?",
+          title: 'Conflict',
+          text: 'Dashboard with the same name exists.',
+          text2: 'Would you still like to save this dashboard?',
           yesText: "Save & Overwrite",
           icon: "fa-warning",
           onConfirm: function() {
@@ -135,7 +137,9 @@ export class DashNavCtrl {
 
     $scope.deleteDashboard = function() {
       $scope.appEvent('confirm-modal', {
-        title: 'Do you want to delete dashboard ' + $scope.dashboard.title + '?',
+        title: 'Delete dashboard',
+        text: 'Do you want to delete dashboard?',
+        text2: $scope.dashboard.title,
         icon: 'fa-trash',
         yesText: 'Delete',
         onConfirm: function() {

public/app/features/dashboard/rowCtrl.js

@@ -52,7 +52,8 @@ function (angular, _, config) {
       }
 
       $scope.appEvent('confirm-modal', {
-        title: 'Are you sure you want to delete this row?',
+        title: 'Delete',
+        text: 'Are you sure you want to delete this row?',
         icon: 'fa-trash',
         yesText: 'Delete',
         onConfirm: function() {

public/app/features/dashboard/unsavedChangesSrv.js

@@ -140,7 +140,7 @@ function(angular, _) {
 
       $rootScope.appEvent('show-modal', {
         src: 'public/app/partials/unsaved-changes.html',
-        modalClass: 'modal-no-header confirm-modal',
+        modalClass: 'confirm-modal',
         scope: modalScope,
       });
     };

public/app/features/datasources/list_ctrl.ts

@@ -37,10 +37,10 @@ export class DataSourcesCtrl {
   removeDataSource(ds) {
 
     this.$scope.appEvent('confirm-modal', {
-      title: 'Confirm delete datasource',
+      title: 'Delete',
       text: 'Are you sure you want to delete datasource ' + ds.name + '?',
       yesText: "Delete",
-      icon: "fa-warning",
+      icon: "fa-trash",
       onConfirm: () => {
         this.removeDataSourceConfirmed(ds);
       }

public/app/features/org/org_users_ctrl.ts

@@ -38,7 +38,7 @@ export class OrgUsersCtrl {
 
   removeUser(user) {
     this.$scope.appEvent('confirm-modal', {
-      title: 'Confirm delete user',
+      title: 'Delete',
       text: 'Are you sure you want to delete user ' + user.login + '?',
       yesText: "Delete",
       icon: "fa-warning",

public/app/features/panel/panel_ctrl.ts

@@ -136,9 +136,10 @@ export class PanelCtrl {
 
   removePanel() {
     this.publishAppEvent('confirm-modal', {
-      title: 'Are you sure you want to remove this panel?',
+      title: 'Remove Panel',
+      text: 'Are you sure you want to remove this panel?',
       icon: 'fa-trash',
-      yesText: 'Delete',
+      yesText: 'Remove',
       onConfirm: () => {
         this.row.panels = _.without(this.row.panels, this.panel);
       }

public/app/features/playlist/playlists_ctrl.ts

@@ -30,10 +30,10 @@ export class PlaylistsCtrl {
   removePlaylist(playlist) {
 
     this.$scope.appEvent('confirm-modal', {
-      title: 'Confirm delete playlist',
+      title: 'Delete',
       text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
       yesText: "Delete",
-      icon: "fa-warning",
+      icon: "fa-trash",
       onConfirm: () => {
         this.removePlaylistConfirmed(playlist);
       }

public/app/features/snapshot/snapshot_ctrl.ts

@@ -27,10 +27,10 @@ export class SnapshotsCtrl {
 
   removeSnapshot(snapshot) {
     this.$rootScope.appEvent('confirm-modal', {
-      title: 'Confirm delete snapshot',
+      title: 'Delete',
       text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?',
       yesText: "Delete",
-      icon: "fa-warning",
+      icon: "fa-trash",
       onConfirm: () => {
         this.removeSnapshotConfirmed(snapshot);
       }

public/app/partials/confirm_modal.html

@@ -1,24 +1,30 @@
 <div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa {{icon}}"></i>
+			<span class="p-l-1">
+				{{title}}
+			</span>
+		</h2>
 
-	<a class="modal-close" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</a>
-
-	<div class="confirm-modal-icon">
-		<i class="fa {{icon}}"></i>
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
 	</div>
 
-	<div class="confirm-modal-title">
-		{{title}}
-	</div>
+	<div class="modal-content text-center">
 
-	<div class="modal-tagline">
-		{{text}}
-	</div>
+		<div class="confirm-modal-text">
+			{{text}}
+			<div class="confirm-modal-text2" ng-show="text2">
+				{{text2}}
+			</div>
+		</div>
 
-	<div class="confirm-modal-buttons">
-		<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
-		<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
+		<div class="confirm-modal-buttons">
+			<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
+			<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();">{{yesText}}</button>
+		</div>
 	</div>
 
 </div>

public/app/partials/unsaved-changes.html

@@ -1,21 +1,26 @@
 <div class="modal-body">
-
-	<a class="modal-close" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</a>
-
-	<div class="confirm-modal-icon">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
 		<i class="fa fa-exclamation"></i>
-	</div>
+			<span class="p-l-1">Unsaved changes</span>
+		</h2>
 
-	<div class="confirm-modal-title">
-		Unsaved changes
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
 	</div>
 
-	<div class="confirm-modal-buttons">
-		<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
-		<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">Ignore</button>
-		<button type="button" class="btn btn-success" ng-click="save();dismiss();">Save</button>
+	<div class="modal-content text-center">
+
+		<div class="confirm-modal-title">
+			What do you want to do?
+		</div>
+
+		<div class="confirm-modal-buttons">
+			<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
+			<button type="button" class="btn btn-danger" ng-click="ignore();dismiss()">Ignore</button>
+			<button type="button" class="btn btn-success" ng-click="save();dismiss();">Save</button>
+		</div>
 	</div>
 
 </div>

public/sass/components/_modals.scss

@@ -83,25 +83,6 @@
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 }
 
-.modal-no-header {
-  border: 1px solid $tight-form-func-bg;
-  text-align: center;
-
-  h3 {
-    margin-top: 30px;
-  }
-
-  .modal-close {
-    float: right;
-    font-size: 140%;
-    padding: 10px;
-  }
-
-  .modal-tagline {
-    font-size: 16px;
-  }
-}
-
 .modal--narrow {
   max-width: 500px;
 }
@@ -116,17 +97,22 @@
     padding-bottom: 20px;
   }
 
-  .confirm-modal-title {
-    font-size: 18px;
+  .confirm-modal-text {
+    font-size: $font-size-h4;
     color: $link-color;
-    margin-bottom: 15px;
+    margin-bottom: $spacer*2;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-text2 {
+    font-size: $font-size-h5;
+    padding-top: $spacer;
   }
 
   .confirm-modal-buttons {
-    margin-top: 35px;
-    margin-bottom: 35px;
+    margin-bottom: $spacer;
     button {
-      margin-right: 5px
+      margin-right: $spacer/2;
     }
   }
 }