some ui love for the panel dialogs

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -133,7 +133,7 @@ h5{
 .umb-control-group label.control-label {
   text-align: left
 }
-.umb-control-group label .help-block, 
+.umb-control-group label .help-block,
 .umb-control-group label small {
   font-size: 11px;
   color: #a0a0a0;
@@ -194,7 +194,7 @@ h5{
 
 .umb-dashboard-control a{text-decoration: underline;}
 
-.umb-dashboard-control 
+.umb-dashboard-control
   iframe{ position: absolute; display: block; width: 99%; height: 99%; overflow: auto !important;}
 
 
@@ -239,16 +239,16 @@ table thead a {
 
 .umb-table tbody.ui-sortable tr.ui-sortable-helper {
   background-color: @sortableHelperBg;
-  border: none; 
+  border: none;
 }
-.umb-table tbody.ui-sortable tr.ui-sortable-helper td 
+.umb-table tbody.ui-sortable tr.ui-sortable-helper td
  {
     border:none;
 }
 
 .umb-table tbody.ui-sortable tr.ui-sortable-placeholder {
   background-color: @sortablePlaceholderBg;
-  border:none;   
+  border:none;
 }
 
 .umb-table tbody.ui-sortable tr.ui-sortable-placeholder td
@@ -368,7 +368,7 @@ table thead a {
   background: @inputBorder;
   height: 1px;
   margin: 20px 0 0 0;
-  width: 82%; 
+  width: 82%;
   float: left;
 }
 
@@ -437,7 +437,7 @@ table thead a {
     color:@green;
 }
 
-// Loading Animation 
+// Loading Animation
 // ------------------------
 
 .umb-loader{
@@ -523,11 +523,34 @@ height:1px;
 }
 
 .umb-loader-wrapper {
-    
+
     position: absolute;
     right: 0;
     left: 0;
     margin: 10px 0;
-    overflow: hidden; 
+    overflow: hidden;
 
 }
+
+
+// Helpers
+
+.strong {
+	font-weight: bold;
+}
+
+.inline {
+	display: inline;
+}
+
+.input-label--title {
+	font-weight: bold;
+	color: @black;
+	margin-bottom: 3px;
+}
+
+.panel-dialog--header {
+	font-weight: bold;
+	border-bottom: 1px solid @gray;
+	padding-bottom: 10px;
+}

src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/snippet.html

@@ -5,17 +5,21 @@
     <div class="umb-panel">
 
         <div class="umb-panel-header">
-            <h1 class="headline" style="margin: 10px 0 0 0">Configure the section</h1>
+            <h4 class="panel-dialog--header" style="border-bottom: 1px solid whitesmoke">Configure the section</h4>
         </div>
 
         <div class="umb-panel-body with-footer umb-querybuilder">
             <label>
-                Section name:
+                <div class="input-label--title">
+                    Section name:
+                </div>
                 <input type="text" ng-model="section.name"/>
             </label>
             <label ng-show="type === 'rendersection'">
-                <localize key="general_required">Required</localize>?
-                <input type="checkbox" ng-checked="section.required" ng-model="section.required"/>
+                <input style="margin: 0;" type="checkbox" ng-checked="section.required" ng-model="section.required"/>
+                <small class="small inline">
+                    <localize key="general_required">Required</localize>
+                </small>
             </label>
         </div>
 
@@ -30,4 +34,4 @@
             </div>
         </div>
     </div>
-</form>
+</form>