From 7559f64d01055f77c50910656db52452075ed021 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 23 Oct 2020 15:41:36 +0100
Subject: [PATCH] ui: Fixup CSS for create pages (#9019)

---
 .../app/styles/components/tabular-collection.scss         | 8 ++++----
 ui/packages/consul-ui/app/styles/layout.scss              | 7 ++++---
 .../consul-ui/app/styles/routes/dc/acls/index.scss        | 3 +++
 ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss  | 2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/ui/packages/consul-ui/app/styles/components/tabular-collection.scss b/ui/packages/consul-ui/app/styles/components/tabular-collection.scss
index c486551ea7..b3d33b4a41 100644
--- a/ui/packages/consul-ui/app/styles/components/tabular-collection.scss
+++ b/ui/packages/consul-ui/app/styles/components/tabular-collection.scss
@@ -69,10 +69,10 @@ table.has-actions tr > *:nth-last-child(5):first-child ~ * {
 }
 
 /*TODO: trs only live in tables, get rid of table */
-html[data-route^='dc.acls.policies.edit'] [role='dialog'] table tr,
-html[data-route^='dc.acls.policies.edit'] table tr,
-html[data-route^='dc.acls.roles.edit'] [role='dialog'] table tr,
-html[data-route^='dc.acls.roles.edit'] main table.token-list tr {
+html[data-route^='dc.acls.policies'] [role='dialog'] table tr,
+html[data-route^='dc.acls.policies'] table tr,
+html[data-route^='dc.acls.roles'] [role='dialog'] table tr,
+html[data-route^='dc.acls.roles'] main table.token-list tr {
   @extend %tokens-minimal-row;
 }
 // this will get auto calculated later in tabular-collection.js
diff --git a/ui/packages/consul-ui/app/styles/layout.scss b/ui/packages/consul-ui/app/styles/layout.scss
index fa5036da7e..6a38cf79fb 100644
--- a/ui/packages/consul-ui/app/styles/layout.scss
+++ b/ui/packages/consul-ui/app/styles/layout.scss
@@ -1,8 +1,8 @@
 @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 {
+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 */
@@ -59,7 +59,8 @@ main,
 #wrapper > footer {
   @extend %content-container;
 }
-html[data-route$='.edit'] main {
+html[data-route$='create'] main,
+html[data-route$='edit'] main {
   @extend %content-container-restricted;
 }
 
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss
index 55b1f30d00..4f2944dff4 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/acls/index.scss
@@ -17,16 +17,19 @@ html[data-route^='dc.acls.index'] .filter-bar [role='radiogroup'] {
 }
 
 @media #{$--lt-wide-form} {
+  html[data-route^='dc.acls.create'] main header .actions,
   html[data-route^='dc.acls.edit'] main header .actions {
     float: none;
     display: flex;
     justify-content: space-between;
     margin-bottom: 1em;
   }
+  html[data-route^='dc.acls.create'] main header .actions .with-feedback,
   html[data-route^='dc.acls.edit'] main header .actions .with-feedback {
     position: absolute;
     right: 0;
   }
+  html[data-route^='dc.acls.create'] main header .actions .with-confirmation,
   html[data-route^='dc.acls.edit'] main header .actions .with-confirmation {
     margin-top: 0;
   }
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
index 9532c59d47..e55f58ebdf 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
@@ -1,4 +1,4 @@
-html[data-route^='dc.kv.edit'] .type-toggle {
+html[data-route^='dc.kv'] .type-toggle {
   float: right;
   margin-bottom: 0 !important;
 }