ux(): work on new modal design #4191

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

@@ -160,6 +160,7 @@ export class DashNavCtrl {
       $scope.appEvent('show-modal', {
         src: 'public/app/features/dashboard/partials/saveDashboardAs.html',
         scope: newScope,
+        modalClass: 'modal--narrow'
       });
     };
 

public/app/features/dashboard/partials/saveDashboardAs.html

@@ -1,23 +1,24 @@
-<div class="modal-body gf-box gf-box-no-margin" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
+<div class="modal-body" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
 			<i class="fa fa-copy"></i>
-			Save As...
-		</div>
+			<span class="p-l-1">Save As...</span>
+		</h2>
 
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<a class="modal-header-close" ng-click="dismiss();">
 			<i class="fa fa-remove"></i>
-		</button>
+		</a>
 	</div>
 
-	<div class="gf-box-body">
-		<div class="text-center">
-			<h4>New title</h4>
-
-			<input type="text" class="input input-fluid" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
-			<br>
-			<br>
+	<div class="modal-content">
+		<div class="p-t-2">
+			<div class="gf-form">
+				<label class="gf-form-label">New name</label>
+				<input type="text" class="gf-form-input" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
+			</div>
+		</div>
 
+		<div class="gf-form-button-row text-center">
 			<a class="btn btn-success" ng-click="saveClone();">Save</a>
 			<a class="btn-text" ng-click="dismiss();">Cancel</a>
 		</div>

public/app/features/dashboard/partials/shareModal.html

@@ -18,7 +18,7 @@
 		</a>
 	</div>
 
-	<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
+	<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
 		<div ng-include src="tab.src" class="share-modal-body"></div>
 	</div>
 
@@ -86,10 +86,8 @@
 			</div>
 		</div>
 	</div>
-	<div class="gf-form-group">
-		<div class="gf-form position-center" ng-show="modeSharePanel">
-			<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
-		</div>
+	<div class="gf-form position-center" ng-show="modeSharePanel">
+		<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
 	</div>
 </script>
 

public/app/features/org/partials/invite.html

@@ -9,7 +9,7 @@
 		</a>
 	</div>
 
-	<div class="p-a-2">
+	<div class="modal-content">
 
 		<div class="modal-tagline p-b-2">
 			Send invite or add existing Grafana users to the organization
@@ -42,7 +42,7 @@
 
 			<div class="gf-form-inline gf-form-group">
 				<div class="gf-form">
-					<a class="btn btn-secondary gf-form-btn" ng-click="addInvite()">
+					<a class="btn btn-inverse btn-small" ng-click="addInvite()">
 						<i class="fa fa-plus"></i>
 						Invite another
 					</a>

public/sass/components/_modals.scss

@@ -28,7 +28,7 @@
   @include background-clip(padding-box);
   outline: none;
 
-  max-width: 800px;
+  max-width: 750px;
   left: 0;
   right: 0;
   margin-left: auto;
@@ -56,7 +56,7 @@
 
 .modal-header-close {
   float: right;
-  padding: ($tabs-padding-top + $tabs-top-margin/2) $spacer $tabs-padding-bottom;
+  padding: 0.75rem $spacer;
 }
 
 // Body (where all modal content resides)
@@ -65,6 +65,10 @@
   overflow-y: auto;
 }
 
+.modal-content {
+  padding: $spacer*2;
+}
+
 // Remove bottom margin if need be
 .modal-form {
   margin-bottom: 0;
@@ -98,6 +102,10 @@
   }
 }
 
+.modal--narrow {
+  max-width: 500px;
+}
+
 .confirm-modal {
   max-width: 500px;