From b0deeab7287569c11ce9139367fcf02486adfdbd Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Mon, 11 Dec 2023 13:03:37 +0000
Subject: [PATCH] Change page listing's add button to icon-only

---
 client/scss/components/_button.scss           | 30 +++++++++++++++++++
 .../pages/listing/_page_header_buttons.html   |  2 +-
 .../pages/page_listing_header.html            |  2 +-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index 200f9c7535..0c7659ccfb 100644
--- a/client/scss/components/_button.scss
+++ b/client/scss/components/_button.scss
@@ -319,3 +319,33 @@
     }
   }
 }
+
+.header-main-action-button {
+  // Temporarily copied from .c-sf-add-button
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: theme('spacing.6');
+  height: theme('spacing.6');
+  appearance: none;
+  color: theme('colors.text-button-outline-default');
+  padding: 0;
+  cursor: pointer;
+
+  .icon {
+    width: theme('spacing.4');
+    height: theme('spacing.4');
+    padding: theme('spacing.[0.5]');
+    border: 1px solid theme('colors.text-button-outline-default');
+    border-radius: theme('borderRadius.full');
+    transition: transform 0.3s ease;
+  }
+
+  &:hover,
+  &:focus-visible {
+    .icon {
+      color: theme('colors.surface-page');
+      background-color: theme('colors.text-button-outline-default');
+    }
+  }
+}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
index 101a0f32f9..fba289f49e 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html
@@ -2,7 +2,7 @@
 
 {% trans "Actions" as title %}
 <nav aria-label="{{ title }}">
-    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-12 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
+    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=title toggle_classname="w-p-0 w-w-10 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
         {% block content %}
             {% include "wagtailadmin/pages/listing/_dropdown_items.html" with buttons=buttons only %}
         {% endblock %}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
index 1eb3143e19..daaa426680 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
@@ -13,7 +13,7 @@
 
     {% page_permissions parent_page as parent_page_perms %}
     {% if parent_page_perms.can_add_subpage %}
-        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="button button-small bicolor button--icon button-secondary w-ml-3">{% icon name="plus" wrapped=1 %}{% trans "Add child page" %}</a>
+        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="header-main-action-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
     {% endif %}
 
     {# Page actions dropdown #}