UX: Minor style improvements and consistency

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -1,7 +1,7 @@
 {{#explorer-container hideSchema=hideSchema everEditing=everEditing}}
 
   {{#if disallow}}
-    <h2>{{i18n "explorer.admins_only"}}</h2>
+    <h1>{{i18n "explorer.admins_only"}}</h1>
   {{else}}
     {{#unless selectedQueryId}}
       <div class="query-list">
@@ -35,9 +35,7 @@
           {{#if selectedItem}}
             {{#if editing}}
               <div class="name">
-                <div class="previous">
+                  {{d-button action="goHome" icon="chevron-left" class="previous"}}
-                  {{d-button action="goHome" icon="chevron-left" class="no-text btn-med"}}
-                </div>
                 <div class="name-text-field">
                   {{text-field value=selectedItem.name}}
                 </div>
@@ -47,11 +45,10 @@
               </div>
             {{else}}
               <div class="name">
-                <div class="previous">
+                {{d-button action="goHome" icon="chevron-left" class="previous"}}
-                  {{d-button action="goHome" icon="chevron-left" class="no-text btn-med"}}
+                <h1>{{selectedItem.name}}
-                </div>
+                <a {{action "editName" class="edit-query-name"}}>{{d-icon "pencil"}}</a>
-                <h2>{{selectedItem.name}}</h2>
+                </h1>
-                {{d-button action="editName" icon="pencil" class="no-text btn-small"}}
               </div>
               <div class="desc">
                 {{selectedItem.description}}

assets/javascripts/discourse/templates/components/explorer-schema.hbs

@@ -3,7 +3,7 @@
 {{/if}}
 <div class="{{if hideSchema "hidden"}}">
   {{text-field value=filter placeholderKey="explorer.schema.filter"}}
-  {{d-button action="collapseSchema" icon="chevron-right" class="no-text btn-small"}}
+  {{d-button action="collapseSchema" icon="chevron-right" class="no-text"}}
   {{conditional-loading-spinner condition=loading}}
   <div class="schema-container">
     <ul>

assets/stylesheets/explorer.scss

@@ -25,7 +25,6 @@
     }
   }
 
-
   .editor-panel {
     float: left;
     .ace-wrapper {
@@ -48,14 +47,14 @@
       height: 400px;
       overflow-y: scroll;
       overflow-x: hidden;
-      color: $secondary-low;
+      color: $primary-high;
-      font-size: 11px;
+      font-size: $font-down-2;
 
       input {
         padding: 4px;
         margin: 3px;
         // 100% - padding + margin * 2 - border - button - buttonborder
-        width: calc(100% - 14px - 1px - 22px - 2px);
+        width: calc(100% - 14px - 1px - 40px - 2px);
       }
       .schema-table-name {
         font-weight: bold;
@@ -77,7 +76,7 @@
         padding-bottom: 2px;
       }
       dl > div {
-        clear:both;
+        clear: both;
       }
       dt {
         display: inline-block;
@@ -105,9 +104,15 @@
         .popup-info {
           color: $primary-medium;
 
-          .popup { display: none; }
+          .popup {
-          &:hover .popup { display: block; }
+            display: none;
-          &:focus .popup { display: block; }
+          }
+          &:hover .popup {
+            display: block;
+          }
+          &:focus .popup {
+            display: block;
+          }
 
           .popup {
             position: absolute;
@@ -139,22 +144,33 @@
 }
 
 .query-edit {
-  .name h2 {
+  .name {
-    display: inline-block;
+    display: flex;
-    color: $secondary-low;
+    align-items: center;
+    margin-bottom: 1em;
+    h1 {
+      display: inline-block;
+      margin: 0 0.5em 0 0;
+      color: $primary;
+      a {
+        color: currentColor;
+      }
+    }
+  }
+  button.previous {
+    margin-right: 0.5em;
+    .d-icon {
+      margin-left: -0.15em; // fixing fontawesome horizontal alignment
+    }
   }
   .name-text-field {
-    padding-top: 0.75em;
+    width: 100%;
-    width: calc(100% - 10px);
   }
-  .name .previous {
+  .name input,
-    padding: 0.2em;
+  .desc textarea {
-    display: inline-block;
+    width: 100%;
-    padding-right: 0.25em;
+    box-sizing: border-box;
-    font-size: 1.2em;
+    margin: 0;
-  }
-  .name input, .desc textarea {
-    width: calc(100% - 10px);
   }
   &:not(.editing) .desc {
     margin: 10px 0;
@@ -169,7 +185,9 @@
   }
 }
 
-.clear { clear: both; }
+.clear {
+  clear: both;
+}
 
 .schema-title {
   display: block;
@@ -207,14 +225,20 @@
   }
 }
 
-.query-list, .query-create, .query-edit, .query-results, .query-params, .https-warning {
+.query-list,
+.query-create,
+.query-edit,
+.query-results,
+.query-params,
+.https-warning {
   margin: 10px 0;
 }
 
 .query-list {
   display: flex;
-  .combo-box, button {
+  .combo-box,
-    margin-right: .5em;
+  button {
+    margin-right: 0.5em;
   }
   li.none {
     display: none;
@@ -231,8 +255,11 @@
     }
     .heading {
       position: relative;
-      color: $primary-high;
+      color: $primary-medium;
       padding: 50px 0px 0px 0px;
+      th.sortable {
+        font-weight: normal;
+      }
       .heading-toggle {
         bottom: 0;
         position: absolute;
@@ -245,7 +272,7 @@
       width: 100%;
     }
     .query-name {
-      color: $secondary-low;
+      color: $primary;
     }
     .query-desc {
       color: $primary-high;
@@ -254,9 +281,8 @@
       color: $primary-high;
     }
     .query-created-at {
-      color: $secondary-medium;
+      color: $primary-medium;
-      font-weight: bold;
+    }
-    }  
   }
   tr a {
     color: inherit;