Fixes page unlock button styling.

wagtail/admin/static_src/wagtailadmin/scss/components/_formatters.scss

@@ -98,6 +98,7 @@
     border: 1px solid lighten($color-grey-2, 30%);
     color: lighten($color-grey-2, 30%);
     -webkit-font-smoothing: auto;
+    line-height: 1.9em;
     font-size: 0.8em;
     margin: 0 0.5em 0.5em;
     background: #fff url('#{$images-root}bg-dark-diag.svg');
@@ -109,14 +110,14 @@
     }
 }
 
-form.status-tag:hover,
+button.status-tag:hover,
 a.status-tag:hover,
 a.status-tag.primary:hover {
     border-color: $color-teal;
     color: $color-teal;
 }
 
-form.status-tag:hover {
+button.status-tag:hover {
     border-color: $color-teal-dark;
     background-color: $color-teal-darker;
     color: $color-white;

wagtail/admin/static_src/wagtailadmin/scss/components/_header.scss

@@ -71,14 +71,6 @@ header {
         padding-bottom: 0;
     }
 
-    .button {
-        background-color: $color-teal-darker;
-
-        &:hover {
-            background-color: $color-teal-dark;
-        }
-    }
-
     label {
         @include visuallyhidden();
     }

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

@@ -4,28 +4,16 @@
     {% page_permissions page as page_perms %}
 {% endif %}
 
-<div class="lock-indicator {% if page.locked %}locked{% else %}unlocked{% endif %}">
+<form action="{% url page.locked|yesno:'wagtailadmin_pages:unlock,wagtailadmin_pages:lock' page.id %}" method="POST" class="lock-indicator {{ page.locked|yesno:'locked,unlocked' }}">
     {% trans "Edit lock" %}
 
-    {% if page.locked %}
-        {% if page_perms.can_lock %}
-            <form action="{% url 'wagtailadmin_pages:unlock' page.id %}" method="POST" class="status-tag primary">
-                {% csrf_token %}
-                <input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}">
-                <input type="submit" class="button unbutton" value="{% trans "Locked" %}">
-            </form>
+    {% csrf_token %}
+    <input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}" />
+    <button type="submit" class="status-tag {{ page.locked|yesno:'primary,secondary' }}{% if page_perms.can_lock %} disabled{% endif %}">
+        {% if page.locked %}
+            {% trans 'Locked' %}
         {% else %}
-            <span class="status-tag primary">Locked</span>
+            {% trans 'Unlocked' %}
         {% endif %}
-    {% else %}
-        {% if page_perms.can_lock %}
-            <form action="{% url 'wagtailadmin_pages:lock' page.id %}" method="POST" class="status-tag secondary">
-                {% csrf_token %}
-                <input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}">
-                <input type="submit" class="button unbutton" value="{% trans "Unlocked" %}">
-            </form>
-        {% else %}
-            <span class="status-tag secondary">Unlocked</span>
-        {% endif %}
-    {% endif %}
-</div>
+    </button>
+</form>