From 07f157a4e81bf1a76ac295063985b491dbe8d25e Mon Sep 17 00:00:00 2001
From: Bertrand Bordage <bordage.bertrand@gmail.com>
Date: Fri, 15 Dec 2017 02:06:44 +0100
Subject: [PATCH] Fixes page unlock button styling.

---
 .../scss/components/_formatters.scss          |  5 ++--
 .../wagtailadmin/scss/components/_header.scss |  8 -----
 .../wagtailadmin/pages/_lock_switch.html      | 30 ++++++-------------
 3 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/wagtail/admin/static_src/wagtailadmin/scss/components/_formatters.scss b/wagtail/admin/static_src/wagtailadmin/scss/components/_formatters.scss
index 149c88211f..34bf2b0d3e 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/components/_formatters.scss
+++ b/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;
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/components/_header.scss b/wagtail/admin/static_src/wagtailadmin/scss/components/_header.scss
index 179a5c67f4..689ab2c518 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/components/_header.scss
+++ b/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();
     }
diff --git a/wagtail/admin/templates/wagtailadmin/pages/_lock_switch.html b/wagtail/admin/templates/wagtailadmin/pages/_lock_switch.html
index c83cca7a8c..088a75b67d 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/_lock_switch.html
+++ b/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>