Make every cancel/back button an outline button
The filled base button reads as heavy as the primary next to it, so cancel is now btn-outline everywhere it appears: sign out, the 2FA challenge, and the four control-panel forms (which also gain the back-arrow icon the auth pages already had). For the record, the buttons were never different heights -- measured in a real browser, every .btn on every page is 40px, anchor and button alike. It was the fill, not the box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -279,7 +279,7 @@ class TwoFactorPageTests(TestCase):
|
|||||||
self.assertNotContains(self.response, 'placeholder="Code"')
|
self.assertNotContains(self.response, 'placeholder="Code"')
|
||||||
|
|
||||||
def test_cancel_sits_beside_sign_in_and_is_not_primary(self):
|
def test_cancel_sits_beside_sign_in_and_is_not_primary(self):
|
||||||
self.assertContains(self.response, '<button class="btn gap-2" type="submit" form="logout-from-stage">')
|
self.assertContains(self.response, '<button class="btn btn-outline gap-2" type="submit" form="logout-from-stage">')
|
||||||
self.assertContains(self.response, '<button class="btn btn-primary gap-2" type="submit">')
|
self.assertContains(self.response, '<button class="btn btn-primary gap-2" type="submit">')
|
||||||
|
|
||||||
def test_cancel_has_a_form_to_submit(self):
|
def test_cancel_has_a_form_to_submit(self):
|
||||||
@@ -372,7 +372,7 @@ class SignOutPageTests(TestCase):
|
|||||||
|
|
||||||
def test_sign_out_and_cancel_sit_side_by_side_with_icons(self):
|
def test_sign_out_and_cancel_sit_side_by_side_with_icons(self):
|
||||||
html = self.response.content.decode()
|
html = self.response.content.decode()
|
||||||
cancel = html[html.index('<a class="btn gap-2" href="/">') :]
|
cancel = html[html.index('<a class="btn btn-outline gap-2" href="/">') :]
|
||||||
sign_out = html[html.index('<button class="btn btn-primary gap-2"') :]
|
sign_out = html[html.index('<button class="btn btn-primary gap-2"') :]
|
||||||
|
|
||||||
self.assertIn("<svg", cancel[: cancel.index("</a>")])
|
self.assertIn("<svg", cancel[: cancel.index("</a>")])
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="card-actions justify-end pt-2">
|
<div class="card-actions justify-end pt-2">
|
||||||
<a class="btn btn-ghost" href="{% url 'controlpanel:admins' %}">Cancel</a>
|
<a class="btn btn-outline gap-2" href="{% url 'controlpanel:admins' %}">{% lucide "arrow-left" size=16 %} Cancel</a>
|
||||||
<button class="btn btn-primary gap-2" type="submit">{% lucide "user-plus" size=16 %} Grant access</button>
|
<button class="btn btn-primary gap-2" type="submit">{% lucide "user-plus" size=16 %} Grant access</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{% extends "controlpanel/base.html" %}
|
{% extends "controlpanel/base.html" %}
|
||||||
{% load ui %}
|
{% load lucide ui %}
|
||||||
|
|
||||||
{% block heading %}Add an admin to {{ club }}{% endblock heading %}
|
{% block heading %}Add an admin to {{ club }}{% endblock heading %}
|
||||||
|
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="card-actions justify-end pt-2">
|
<div class="card-actions justify-end pt-2">
|
||||||
<a class="btn btn-ghost" href="{% url 'controlpanel:club_detail' club.pk %}">Cancel</a>
|
<a class="btn btn-outline gap-2" href="{% url 'controlpanel:club_detail' club.pk %}">{% lucide "arrow-left" size=16 %} Cancel</a>
|
||||||
<button class="btn btn-primary" type="submit">Grant admin</button>
|
<button class="btn btn-primary" type="submit">Grant admin</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{% extends "controlpanel/base.html" %}
|
{% extends "controlpanel/base.html" %}
|
||||||
{% load ui %}
|
{% load lucide ui %}
|
||||||
|
|
||||||
{% block heading %}{% if object %}Edit {{ object }}{% else %}New club{% endif %}{% endblock heading %}
|
{% block heading %}{% if object %}Edit {{ object }}{% else %}New club{% endif %}{% endblock heading %}
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="card-actions justify-end pt-2">
|
<div class="card-actions justify-end pt-2">
|
||||||
<a class="btn btn-ghost" href="{% url 'controlpanel:club_list' %}">Cancel</a>
|
<a class="btn btn-outline gap-2" href="{% url 'controlpanel:club_list' %}">{% lucide "arrow-left" size=16 %} Cancel</a>
|
||||||
<button class="btn btn-primary" type="submit">Save</button>
|
<button class="btn btn-primary" type="submit">Save</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{% extends "controlpanel/base.html" %}
|
{% extends "controlpanel/base.html" %}
|
||||||
{% load ui %}
|
{% load lucide ui %}
|
||||||
|
|
||||||
{% block heading %}{% if object %}Edit {{ object.name }}{% else %}New feature{% endif %}{% endblock heading %}
|
{% block heading %}{% if object %}Edit {{ object.name }}{% else %}New feature{% endif %}{% endblock heading %}
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="card-actions justify-end pt-2">
|
<div class="card-actions justify-end pt-2">
|
||||||
<a class="btn btn-ghost" href="{% url 'controlpanel:features' %}">Cancel</a>
|
<a class="btn btn-outline gap-2" href="{% url 'controlpanel:features' %}">{% lucide "arrow-left" size=16 %} Cancel</a>
|
||||||
<button class="btn btn-primary" type="submit">Save</button>
|
<button class="btn btn-primary" type="submit">Save</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
4123
static/css/app.css
4123
static/css/app.css
File diff suppressed because one or more lines are too long
@@ -26,7 +26,7 @@
|
|||||||
{{ redirect_field }}
|
{{ redirect_field }}
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||||
<a class="btn gap-2" href="/">{% lucide "arrow-left" size=16 %} {% trans "Cancel" %}</a>
|
<a class="btn btn-outline gap-2" href="/">{% lucide "arrow-left" size=16 %} {% trans "Cancel" %}</a>
|
||||||
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-out" size=16 %} {% trans "Sign Out" %}</button>
|
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-out" size=16 %} {% trans "Sign Out" %}</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||||
<button class="btn gap-2" type="submit" form="logout-from-stage">{% lucide "x" size=16 %} {% trans "Cancel" %}</button>
|
<button class="btn btn-outline gap-2" type="submit" form="logout-from-stage">{% lucide "x" size=16 %} {% trans "Cancel" %}</button>
|
||||||
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-in" size=16 %} {% trans "Sign In" %}</button>
|
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-in" size=16 %} {% trans "Sign In" %}</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
Reference in New Issue
Block a user