ui: CSS margin/border alterations (#8796)

* ui: Reorganize page top margins and borders

* Tweak definition table copy-buttons

* Make room for intro paragraphs

ui-v2/app/styles/base/components/table/layout.scss

@@ -46,7 +46,7 @@
   margin-bottom: 0.8em;
 }
 %table th {
-  padding-bottom: 0.6em;
+  padding: 0.6em 0;
 }
 %table th:not(.actions),
 %table td:not(.actions),

ui-v2/app/styles/components/app-view.scss

@@ -1,6 +1,6 @@
 @import './app-view/index';
 
-main {
+.app-view {
   @extend %app-view;
 }
 %app-view-actions label + div {
@@ -8,10 +8,6 @@ main {
   overflow: visible !important;
 }
 
-%app-view .outlet > div.unauthorized,
-%app-view .outlet > div.error {
-  @extend %app-view-error;
-}
 %app-view header form {
   @extend %filter-bar;
 }
@@ -19,13 +15,6 @@ main {
 %app-view-actions button {
   @extend %button-compact;
 }
-[role='tabpanel'] > p:only-child,
-%app-view-content > p:only-child {
-  @extend %app-view-content-empty;
-}
-[role='tabpanel'] > *:first-child {
-  margin-top: 1.25em;
-}
 
 /* toggleable toolbar for short screens */
 [for='toolbar-toggle'] {

ui-v2/app/styles/components/app-view/index.scss

@@ -1,6 +1,6 @@
 @import './skin';
 @import './layout';
-%app-view .outlet > div > header {
+%app-view > header {
   @extend %app-view-header;
 }
 %app-view-header .title {
@@ -9,6 +9,6 @@
 %app-view-header .actions {
   @extend %app-view-actions;
 }
-%app-view .outlet > div > div {
+%app-view > div {
   @extend %app-view-content;
 }

ui-v2/app/styles/components/app-view/layout.scss

@@ -18,10 +18,7 @@
 %app-view {
   margin-top: 50px;
 }
-/* give anything after the header a bit of room */
+
-%app-view-header + div > *:first-child {
-  margin-top: 1.8em;
-}
 %app-view-title {
   padding-bottom: 0.2em;
 }
@@ -40,9 +37,6 @@
   padding-bottom: 0.2em;
   margin-bottom: 0.5em;
 }
-%app-view-error > div {
-  padding: 1px 0 30px 0;
-}
 %app-view-content-empty {
   margin-top: 0 !important;
   padding: 50px;

ui-v2/app/styles/components/app-view/skin.scss

@@ -2,7 +2,7 @@
   @extend %frame-gray-500;
 }
 %app-view-title {
-  border-bottom: $decor-border-200;
+  border-bottom: $decor-border-100;
 }
 %app-view-content h2,
 %app-view-content form:not(.filter-bar) fieldset {

ui-v2/app/styles/components/definition-table/layout.scss

@@ -3,3 +3,6 @@
   grid-template-columns: 140px auto;
   grid-gap: 0.4em 20px;
 }
+%definition-table .copy-button {
+  float: left;
+}

ui-v2/app/styles/components/filter-bar/layout.scss

@@ -2,8 +2,6 @@
   display: flex;
   justify-content: space-between;
   padding: 4px 8px;
-  margin-top: 0 !important;
-  margin-bottom: -12px;
 }
 %filter-bar .filters {
   display: flex;
@@ -12,9 +10,6 @@
 %filter-bar .filters > *:not(:last-child) {
   margin-right: 6px;
 }
-%filter-bar + :not(.notice) {
-  margin-top: 1.8em;
-}
 %filter-bar fieldset {
   flex: 0 1 auto;
   width: auto;

ui-v2/app/styles/layout.scss

@@ -1,5 +1,35 @@
 @import 'layouts/index';
 
+/* all forms have a margin below the header */
+html[data-route$='.create'] .app-view > header + div > *:first-child,
+html[data-route$='.edit'] .app-view > header + div > *:first-child {
+  margin-top: 1.8em;
+}
+/* most tabs have margin after the tab bar, unless the tab has a filter bar */
+/* if it is a filter bar and the thing after the filter bar is a p then it also */
+/* needs a top margun :S */
+%app-view-content [role='tabpanel'] > *:first-child:not(.filter-bar):not(table),
+%app-view-content [role='tabpanel'] > .filter-bar + p {
+  margin-top: 1.25em;
+}
+/* turn off top borders for things flush up to a filter bar */
+.consul-lock-session-list {
+  margin-top: 0 !important;
+}
+html[data-route='dc.services.index'] .consul-service-list ul,
+.consul-nspace-list ul,
+.consul-service-instance-list ul,
+.consul-node-list ul,
+.consul-lock-session-list ul,
+.consul-role-list ul,
+.consul-policy-list ul,
+.consul-token-list ul {
+  border-top-width: 0 !important;
+}
+.notice + .consul-token-list ul {
+  border-top-width: 1px !important;
+}
+
 // TODO: This shouldn't be done here, decide the best way to do this
 // %main-decoration ? %main-skin ? %content-skin ?
 // it includes layouts of components, but not layout of itself?
@@ -47,7 +77,7 @@ html[data-route$='.edit'] main {
   margin-bottom: 1em;
 }
 /* TODO: keep margin below forms, move elsewhere? */
-%main-content form,
+%main-content form:not(.filter-bar),
 %main-content form + div .with-confirmation {
   margin-bottom: 2em;
 }

ui-v2/app/styles/typography.scss

@@ -58,7 +58,6 @@ pre code,
 %app-view h1 span.kind-proxy {
   @extend %p2;
 }
-.template-error > div,
 %empty-state-subheader,
 %empty-state p,
 %button,