From 29e3c9eaa805b6947fb6a79502b54824f195fd3e Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sun, 11 Oct 2020 20:17:23 -0700
Subject: [PATCH] app: Make the donation button more prominent

This is high visibility to the donation link and almost prompts users to donate
instead of passively providing the information. Given how many free software
struggle to stay alive, this is needed.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/toolbar.html      | 22 +++++++++++-----------
 static/themes/default/css/main.css |  3 ++-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/plinth/templates/toolbar.html b/plinth/templates/toolbar.html
index db9cc93b4..2bb639482 100644
--- a/plinth/templates/toolbar.html
+++ b/plinth/templates/toolbar.html
@@ -11,7 +11,7 @@
 
       {% include "clients-button.html" with clients=app_info.clients enabled=is_enabled %}
 
-      {% if has_diagnostics or app_info.donation_url %}
+      {% if has_diagnostics %}
         <!-- Single button -->
         <div class="btn-group button-extra-actions">
           <button type="button" class="btn btn-default dropdown-toggle"
@@ -26,20 +26,20 @@
                 {% include "diagnostics_button.html" with app_id=app_id enabled=is_enabled %}
               </li>
             {% endif %}
-
-            {% if app_info.donation_url %}
-              <li>
-                <a target="_blank" rel="noopener noreferrer"
-                   href="{{ app_info.donation_url }}">
-                  {% trans "Donate" %}
-                  <span class="fa fa-external-link"></span>
-                </a>
-              </li>
-            {% endif %}
           </ul>
         </div>
       {% endif %}
 
+      {% if app_info.donation_url %}
+        <a target="_blank" rel="noopener noreferrer"
+           class="btn btn-default button-donate" role="button"
+           href="{{ app_info.donation_url }}">
+          <span class="fa fa-heart"></span>
+          {% trans "Donate" %}
+          <span class="fa fa-external-link"></span>
+        </a>
+      {% endif %}
+
     </div>
     <div class="toolbar-collapsed-content">
       {% include "clients.html" with clients=app_info.clients enabled=is_enabled %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index ca05b65c3..b4ba60cec 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -554,7 +554,8 @@ input[type='submit'].running-status-button {
     margin-bottom: 10px;
 }
 
-.btn-toolbar .button-extra-actions {
+.btn-toolbar .button-extra-actions,
+.btn-toolbar .button-donate {
     float: right;
 }