Verbosify buttons

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 %}>
+    <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 class="icon icon-boost" title="{% trans 'Boost status' %}"></span>
-            <span class="is-sr-only">{% trans "Boost status" %}</span>
+        <span>{% trans "Boost status" %}</span>
-        </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">
+    <button class="button is-small is-white" type="submit">
-        <span class="icon icon-boost" title="{% trans 'Un-boost status' %}">
+        <span class="icon icon-boost has-text-primary" title="{% trans 'Un-boost status' %}"></span>
-            <span class="is-sr-only">{% trans "Un-boost status" %}</span>
+        <span>{% trans "Un-boost status" %}</span>
-        </span>
     </button>
 </form>
 {% endwith %}

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">
+    <button class="button is-white is-small" type="submit">
-        <span class="icon icon-heart" title="{% trans 'Un-like status' %}">
+        <span class="icon icon-heart has-text-primary" title="{% trans 'Un-like status' %}"></span>
-            <span class="is-sr-only">{% trans "Un-like status" %}</span>
+        <span>{% trans "Un-like status" %}</span>
-        </span>
     </button>
 </form>
 {% endwith %}

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="is-flex">
-        <div class="control">
+        <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>

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="icon icon-dots-three"></span>
-    <span class="is-sr-only">{% trans "More options" %}</span>
+<span>{% trans "More options" %}</span>
-</span>
 {% endblock %}
 
 {% block dropdown-list %}

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 %}