From 4e98cbbee5b031f87f1f27b92dce612a98217c27 Mon Sep 17 00:00:00 2001
From: JoeyStk <johannes.stock@yahoo.de>
Date: Mon, 25 Sep 2023 11:03:28 +0200
Subject: [PATCH] Clean up CSS styling

---
 integreat_compass/cms/templates/index.html       |  5 +----
 .../cms/templates/interactions/report_list.html  |  2 +-
 .../cms/templates/interactions/vote_form.html    |  2 +-
 .../cms/templates/offers/my_offers_list.html     |  2 +-
 .../cms/templates/offers/offer_form.html         |  5 +----
 .../overlay/offer_application_overlay.html       |  4 +---
 integreat_compass/static/src/css/style.scss      | 16 ++++++++++++++--
 7 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/integreat_compass/cms/templates/index.html b/integreat_compass/cms/templates/index.html
index 5f9ed20..4fd3f6b 100644
--- a/integreat_compass/cms/templates/index.html
+++ b/integreat_compass/cms/templates/index.html
@@ -30,10 +30,7 @@ <h2 class="text-gray-700 text-2xl font-semibold">{% translate "Filter" %}</h2>
                                        type="checkbox"
                                        {% if tag.id|stringformat:"i" in filtered_tags %}checked{% endif %}
                                        value="{{ tag.id }}">
-                                <label for="{{ tag.id }}"
-                                       class="px-2 py-1 mt-2 text-lg font-normal bg-tertiary rounded-full text-center hover:shadow-lg peer-checked:bg-primary peer-checked:border-none duration-200">
-                                    {{ tag }}
-                                </label>
+                                <label for="{{ tag.id }}" class="px-2 py-1 mt-2 gray-tag">{{ tag }}</label>
                             </div>
                         {% endfor %}
                     </div>
diff --git a/integreat_compass/cms/templates/interactions/report_list.html b/integreat_compass/cms/templates/interactions/report_list.html
index 6041916..11055d6 100644
--- a/integreat_compass/cms/templates/interactions/report_list.html
+++ b/integreat_compass/cms/templates/interactions/report_list.html
@@ -31,7 +31,7 @@
                     <div class="flex justify-between">
                         <p class="text-gray-700">{% translate "Created at:" %} {{ report.offer_version.created_at|date:"d. M Y" }}</p>
                         <button id="offer-{{ report.id }}"
-                                class="open-details btn btn-outline !font-normal py-3 px-4 border-2 !border-gray-600 !text-gray-600 bg-white hover:!bg-gray-600 hover:!text-white"
+                                class="open-details btn btn-outline"
                                 type="button">
                             <i class="mr-2" icon-name="link"></i>{% translate "Details" %}
                         </button>
diff --git a/integreat_compass/cms/templates/interactions/vote_form.html b/integreat_compass/cms/templates/interactions/vote_form.html
index c338caa..7e6bae0 100644
--- a/integreat_compass/cms/templates/interactions/vote_form.html
+++ b/integreat_compass/cms/templates/interactions/vote_form.html
@@ -35,7 +35,7 @@
                                 <p class="text-gray-700">{% translate "Created at:" %} {{ offer_version.created_at|date:"d. M Y" }}</p>
                                 <button id="offer-{{ offer_version.id }}"
                                         type="button"
-                                        class="open-details btn btn-outline !font-normal py-3 px-4 border-2 !border-gray-600 !text-gray-600 bg-white hover:!bg-gray-600 hover:!text-white">
+                                        class="open-details btn btn-outline">
                                     <i icon-name="link"></i>
                                     {% translate "Details" %}
                                 </button>
diff --git a/integreat_compass/cms/templates/offers/my_offers_list.html b/integreat_compass/cms/templates/offers/my_offers_list.html
index 49e35c9..f421690 100644
--- a/integreat_compass/cms/templates/offers/my_offers_list.html
+++ b/integreat_compass/cms/templates/offers/my_offers_list.html
@@ -54,7 +54,7 @@ <h1 class="text-gray-700">{% translate "My offers" %}</h1>
                             </div>
                         {% endif %}
                         <div class="flex justify-end">
-                            <button class="btn btn-outline !text-gray-600 bg-white mr-4 confirm-delete py-3 px-4 !border-gray-600 border-2 hover:!bg-gray-600 hover:!text-white"
+                            <button class="btn btn-outline mr-4 confirm-delete"
                                     type="submit"
                                     data-confirm='{% translate "Are you sure you want to delete this offer?" %}'>
                                 {% translate "Delete offer" %}
diff --git a/integreat_compass/cms/templates/offers/offer_form.html b/integreat_compass/cms/templates/offers/offer_form.html
index d0a513a..66c1732 100644
--- a/integreat_compass/cms/templates/offers/offer_form.html
+++ b/integreat_compass/cms/templates/offers/offer_form.html
@@ -72,10 +72,7 @@ <h2>{% translate "Offer details" %}</h2>
                             {% for choice in offer_form.tags %}
                                 <div>
                                     {{ choice.tag }}
-                                    <label for="{{ choice.id_for_label }}"
-                                           class="px-4 py-2 text-lg bg-tertiary font-normal rounded-full text-center hover:shadow-lg peer-checked:bg-primary peer-checked:text-gray-700 peer-checked:border-none duration-200">
-                                        {{ choice.choice_label }}
-                                    </label>
+                                    <label for="{{ choice.id_for_label }}" class="px-4 py-2 gray-tag">{{ choice.choice_label }}</label>
                                 </div>
                             {% endfor %}
                         </div>
diff --git a/integreat_compass/cms/templates/overlay/offer_application_overlay.html b/integreat_compass/cms/templates/overlay/offer_application_overlay.html
index 0fc81d9..9fc85da 100644
--- a/integreat_compass/cms/templates/overlay/offer_application_overlay.html
+++ b/integreat_compass/cms/templates/overlay/offer_application_overlay.html
@@ -36,9 +36,7 @@
                 <input type="hidden" name="offer_version_id" value="{{ offer_version.id }}">
                 <button type="button"
                         id="application-modal-{% if declined %}decline{% else %}accept{% endif %}-cancel-{{ offer_version.id }}"
-                        class="btn btn-outline !bg-gray-600 !border-gray-600 hover:!bg-white hover:!text-gray-600 !text-white mr-4">
-                    {% translate "Cancel" %}
-                </button>
+                        class="btn btn-outline !font-bold mr-4">{% translate "Cancel" %}</button>
                 <button id="application-modal-confirm"
                         class="btn bg-primary"
                         type="submit"
diff --git a/integreat_compass/static/src/css/style.scss b/integreat_compass/static/src/css/style.scss
index 756012d..22ff7e5 100644
--- a/integreat_compass/static/src/css/style.scss
+++ b/integreat_compass/static/src/css/style.scss
@@ -153,9 +153,9 @@ input[type="submit"] {
             @apply pr-1;
         }
         &.btn-outline {
-            @apply border-2 border-primary text-primary bg-white;
+            @apply border-2 border-primary text-primary bg-white font-normal border-gray-600 text-gray-600;
             &:hover {
-                @apply bg-primary text-white;
+                @apply bg-gray-600 text-white;
             }
         }
         // Pseudo-classes
@@ -228,3 +228,15 @@ input[type="submit"] {
         @apply w-5 h-5 absolute top-3 right-3 cursor-pointer;
     }
 }
+
+/*******
+* TAGS *
+*******/
+
+.gray-tag {
+    @apply text-lg bg-tertiary font-normal rounded-full text-center duration-200 peer-checked:bg-primary peer-checked:text-gray-700 peer-checked:border-none;
+
+    &:hover {
+        @apply shadow-lg;
+    }
+}