Tweak styles based on design feedback

client/scss/components/_button.scss

@@ -27,6 +27,8 @@
     // stylelint-disable-next-line property-no-vendor-prefix
     -moz-appearance: none;
 
+    transition: background-color 0.1s ease;
+
     &:hover {
         color: $color-teal;
     }

client/scss/components/_footer.scss

@@ -13,11 +13,30 @@ footer {
 
     li {
         float: left;
+        margin-right: 1em;
+
+        li,  // dropdown li
+        &:last-child {
+            margin-right: 0;
+        }
     }
 
     .actions {
         width: 250px;
-        margin-right: 1em;
+
+        &--primary {
+            width: 350px;
+        }
+
+        .dropdown {
+            input[type=submit],
+            input[type=reset],
+            input[type=button],
+            button,
+            .button {
+                padding-right: 2.6em;
+            }
+        }
     }
 
     .preview .dropdown {
@@ -65,11 +84,11 @@ footer {
     }
 
     @include media-breakpoint-up(sm) {
-        margin-left: $desktop-nice-padding;
+        margin-left: calc(#{$desktop-nice-padding} - 0.75em);
         margin-right: $desktop-nice-padding;
         width: auto;
         position: fixed;
         bottom: 0;
-        padding: 1em;
+        padding: 0.75em;
     }
 }

client/scss/components/_tabs.scss

@@ -29,7 +29,7 @@
         font-weight: 600;
         text-decoration: none;
         display: block;
-        padding: 0.7em;
+        padding: 0.6em 0.7em 0.8em;
         color: $color-white;
         border-top: 0.3em solid $color-teal-darker;
         max-height: 1.44em;

client/scss/elements/_typography.scss

@@ -27,7 +27,7 @@ h1 {
     font-size: 1.5em;
     text-transform: uppercase;
     color: $color-grey-1;
-    font-weight: 600;
+    font-weight: 700;
 
     span {
         text-transform: none;

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -134,12 +134,6 @@ header {
     display: flex;
     flex-flow: row-reverse wrap;
 
-    thead {
-        display: table-caption;
-        height: $object-title-height;
-        margin-bottom: 2em;
-    }
-
     .listing--push-top {
         margin-top: 3em;
 
@@ -148,6 +142,14 @@ header {
             margin-bottom: 0;
         }
     }
+
+    .listing {
+        margin-bottom: 0;
+    }
+
+    .listing tbody {
+        border-bottom: 0;
+    }
 }
 
 .task .icon {

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -60,12 +60,12 @@
             float: left;
             height: 1.5em;
             line-height: 2em;
-            margin: 1em 0 1.5em;
+            margin: 1em 0.75em 1.5em 0;
 
             .icon {
                 @include svg-icon(1.25em, text-bottom);
 
-                margin-right: 0.4em;
+                margin-right: 0.2em;
             }
 
             .icon-warning {
@@ -83,6 +83,7 @@
 
         .button {
             font-size: 1em;
+            font-weight: 600;
             margin-top: -0.25em; // Account for the button border
             overflow: initial;
             height: 2.5em;
@@ -93,7 +94,7 @@
             font-weight: 600;
 
             span {
-                font-weight: 500;
+                font-weight: 300;
             }
         }
 
@@ -409,8 +410,8 @@
 .full .halloeditor {
     @include nice-padding;
     border-radius: 0;
-    padding-top: 2em;
+    padding-top: 1.5em;
-    padding-bottom: 2em;
+    padding-bottom: 1.5em;
     font-size: 1.2em;
     line-height: 1.6em;
 }
@@ -423,6 +424,13 @@
 }
 
 // Footer control bar for perfoming actions on the page
+footer .actions {
+    .button {
+        font-weight: 600;
+        text-overflow: ellipsis;
+    }
+}
+
 footer .preview {
     button,
     .button {

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -25,11 +25,11 @@
         <footer>
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
-                  <li class="actions">
+                    <li class="actions actions--primary">
-                      <div class="dropdown dropup dropdown-button dropdown-button--white match-width {% if is_revision %}warning{% endif %}">
+                        <div class="dropdown dropup dropdown-button dropdown-button--white match-width {% if is_revision %}warning{% endif %}">
-                          {{ action_menu.render_html }}
+                            {{ action_menu.render_html }}
-                      </div>
+                        </div>
-                  </li>
+                    </li>
 
                     {% if preview_modes %}
                         <li class="preview">

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -49,7 +49,7 @@
         <footer>
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
-                    <li class="actions">
+                    <li class="actions actions--primary">
                         <div class="dropdown dropup dropdown-button match-width {% if is_revision %}warning{% endif %}">
                             {{ action_menu.render_html }}
                         </div>