From f7adaee0ed4fc9b812c21f487bcfe9c4d418f291 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 17:35:55 +0200
Subject: [PATCH] Verbosify buttons

---
 bookwyrm/templates/snippets/boost_button.html | 14 ++++++-------
 bookwyrm/templates/snippets/fav_button.html   | 11 +++++-----
 .../templates/snippets/status/layout.html     | 21 ++++++++++++-------
 .../snippets/status/status_options.html       |  5 ++---
 .../snippets/toggle/toggle_button.html        |  3 +++
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/bookwyrm/templates/snippets/boost_button.html b/bookwyrm/templates/snippets/boost_button.html
index e590c58d..27a6196a 100644
--- a/bookwyrm/templates/snippets/boost_button.html
+++ b/bookwyrm/templates/snippets/boost_button.html
@@ -4,18 +4,16 @@
 {% with status.id|uuid as uuid %}
 <form name="boost" action="/boost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}is-hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
-    <button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
-        <span class="icon icon-boost" title="{% trans 'Boost status' %}">
-            <span class="is-sr-only">{% trans "Boost status" %}</span>
-        </span>
+    <button class="button is-small is-white" type="submit" {% if not status.boostable %}disabled{% endif %}>
+        <span class="icon icon-boost" title="{% trans 'Boost status' %}"></span>
+        <span>{% trans "Boost status" %}</span>
     </button>
 </form>
 <form name="unboost" action="/unboost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}is-hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
-    <button class="button is-small is-primary" type="submit">
-        <span class="icon icon-boost" title="{% trans 'Un-boost status' %}">
-            <span class="is-sr-only">{% trans "Un-boost status" %}</span>
-        </span>
+    <button class="button is-small is-white" type="submit">
+        <span class="icon icon-boost has-text-primary" title="{% trans 'Un-boost status' %}"></span>
+        <span>{% trans "Un-boost status" %}</span>
     </button>
 </form>
 {% endwith %}
diff --git a/bookwyrm/templates/snippets/fav_button.html b/bookwyrm/templates/snippets/fav_button.html
index adb3d033..da6e6661 100644
--- a/bookwyrm/templates/snippets/fav_button.html
+++ b/bookwyrm/templates/snippets/fav_button.html
@@ -3,18 +3,17 @@
 {% with status.id|uuid as uuid %}
 <form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}is-hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
-    <button class="button is-small" type="submit">
+    <button class="button is-small is-white" type="submit">
         <span class="icon icon-heart" title="{% trans 'Like status' %}">
-            <span class="is-sr-only">{% trans "Like status" %}</span>
         </span>
+        <span>{% trans "Like status" %}</span>
     </button>
 </form>
 <form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}is-hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
-    <button class="button is-primary is-small" type="submit">
-        <span class="icon icon-heart" title="{% trans 'Un-like status' %}">
-            <span class="is-sr-only">{% trans "Un-like status" %}</span>
-        </span>
+    <button class="button is-white is-small" type="submit">
+        <span class="icon icon-heart has-text-primary" title="{% trans 'Un-like status' %}"></span>
+        <span>{% trans "Un-like status" %}</span>
     </button>
 </form>
 {% endwith %}
diff --git a/bookwyrm/templates/snippets/status/layout.html b/bookwyrm/templates/snippets/status/layout.html
index 9c9d8fc1..f132f594 100644
--- a/bookwyrm/templates/snippets/status/layout.html
+++ b/bookwyrm/templates/snippets/status/layout.html
@@ -26,30 +26,35 @@
     {% elif no_interact %}
     {# nothing here #}
     {% elif request.user.is_authenticated %}
-    <div class="field has-addons">
-        <div class="control">
+    <div class="is-flex">
+        <div>
             {% trans "Reply" as button_text %}
-            {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon="comment" class="is-small toggle-button" focus="id_content_reply" %}
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon_with_text="comment" class="is-small is-white toggle-button" focus="id_content_reply" %}
         </div>
-        <div class="control">
+        <div class="ml-3">
             {% include 'snippets/boost_button.html' with status=status %}
         </div>
-        <div class="control">
+        <div class="ml-3">
             {% include 'snippets/fav_button.html' with status=status %}
         </div>
+        {% if not moderation_mode %}
+        <div class="ml-3">
+            {% include 'snippets/status/status_options.html' with class="is-small is-white" right=True %}
+        </div>
+        {% endif %}
     </div>
 
     {% else %}
     <a href="/login">
-        <span class="icon icon-comment" title="{% trans 'Reply' %}">
+        <span class="icon icon-comment is-small" title="{% trans 'Reply' %}">
             <span class="is-sr-only">{% trans "Reply" %}</span>
         </span>
 
-        <span class="icon icon-boost" title="{% trans 'Boost status' %}">
+        <span class="icon icon-boost is-small ml-4" title="{% trans 'Boost status' %}">
             <span class="is-sr-only">{% trans "Boost status" %}</span>
         </span>
 
-        <span class="icon icon-heart" title="{% trans 'Like status' %}">
+        <span class="icon icon-heart is-small ml-4" title="{% trans 'Like status' %}">
             <span class="is-sr-only">{% trans "Like status" %}</span>
         </span>
     </a>
diff --git a/bookwyrm/templates/snippets/status/status_options.html b/bookwyrm/templates/snippets/status/status_options.html
index a76cbc39..16d49b3d 100644
--- a/bookwyrm/templates/snippets/status/status_options.html
+++ b/bookwyrm/templates/snippets/status/status_options.html
@@ -3,9 +3,8 @@
 {% load bookwyrm_tags %}
 
 {% block dropdown-trigger %}
-<span class="icon icon-dots-three">
-    <span class="is-sr-only">{% trans "More options" %}</span>
-</span>
+<span class="icon icon-dots-three"></span>
+<span>{% trans "More options" %}</span>
 {% endblock %}
 
 {% block dropdown-list %}
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
index fe1823f1..d5a8f3dc 100644
--- a/bookwyrm/templates/snippets/toggle/toggle_button.html
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -13,6 +13,9 @@
     <span class="icon icon-{{ icon }}" title="{{ text }}">
         <span class="is-sr-only">{{ text }}</span>
     </span>
+    {% elif icon_with_text %}
+    <span class="icon icon-{{ icon_with_text }}" aria-hidden></span>
+    <span>{{ text }}</span>
     {% else %}
     <span>{{ text }}</span>
     {% endif %}