From 0b0a2d993ca86e4a6a5245b261fc6936e584bffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 7 Oct 2022 10:07:22 +0300
Subject: [PATCH] Add "btn-remove" CSS class for remove/delete/close buttons

---
 hc/front/tests/test_details.py  |  2 +-
 static/css/base.css             | 12 ++++++++++++
 static/css/details.css          | 11 -----------
 static/css/settings.css         | 11 -----------
 templates/accounts/profile.html |  5 +----
 templates/accounts/project.html |  3 +--
 templates/front/details.html    |  3 +--
 7 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/hc/front/tests/test_details.py b/hc/front/tests/test_details.py
index fcbd9711..00bbb0b8 100644
--- a/hc/front/tests/test_details.py
+++ b/hc/front/tests/test_details.py
@@ -70,7 +70,7 @@ class DetailsTestCase(BaseTestCase):
         self.assertNotContains(r, "Change Schedule")
         self.assertNotContains(r, "Create a Copy&hellip;")
         self.assertNotContains(r, "transfer-btn")
-        self.assertNotContains(r, "details-remove-check")
+        self.assertNotContains(r, "btn-remove")
 
     def test_it_hides_resume_action_from_readonly_users(self):
         self.bobs_membership.role = "r"
diff --git a/static/css/base.css b/static/css/base.css
index ea85177a..4956723b 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -258,3 +258,15 @@ input[type=number]::-webkit-outer-spin-button,
 input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
+
+.btn-remove {
+    border-color: #d43f3a;
+    color: var(--btn-remove-color);
+    background-color: var(--btn-remove-bg);
+}
+
+.btn-remove:hover,
+.btn-remove:focus {
+    background-color: var(--btn-remove-hover);
+    color: var(--btn-remove-color);
+}
diff --git a/static/css/details.css b/static/css/details.css
index f4a9e7b8..f5f6fddc 100644
--- a/static/css/details.css
+++ b/static/css/details.css
@@ -78,17 +78,6 @@
     background-color: var(--table-bg-hover);
 }
 
-
-#details-remove-check {
-    border-color: #d43f3a;
-    color: var(--btn-remove-color);
-    background-color: var(--btn-remove-bg);
-}
-
-#details-remove-check:hover {
-    background-color: var(--btn-remove-hover);
-}
-
 #downtimes table {
     max-width: 350px;
 }
diff --git a/static/css/settings.css b/static/css/settings.css
index 19b07642..15591807 100644
--- a/static/css/settings.css
+++ b/static/css/settings.css
@@ -15,17 +15,6 @@
     color: #5cb85c;
 }
 
-#close-account, #remove-project {
-    margin-left: 24px;
-    border-color: #d43f3a;
-    color: var(--btn-remove-color);
-    background-color:  var(--btn-remove-bg);
-}
-
-#close-account:hover, #remove-project:hover {
-    background-color: var(--btn-remove-hover);
-}
-
 .invite-suggestion {
     color: var(--text-muted);
 }
diff --git a/templates/accounts/profile.html b/templates/accounts/profile.html
index e7b9bcd7..485fc757 100644
--- a/templates/accounts/profile.html
+++ b/templates/accounts/profile.html
@@ -261,10 +261,7 @@
                     <h2>Close Account</h2>
                     <p>This will permanently remove your {{ site_name }} account.</p>
                     <div class="text-right">
-                        <a
-                            id="close-account"
-                            href="{% url 'hc-close' %}"
-                            class="btn btn-default">Close Account</a>
+                        <a href="{% url 'hc-close' %}" class="btn btn-remove">Close Account</a>
                     </div>
             </div>
         </div>
diff --git a/templates/accounts/project.html b/templates/accounts/project.html
index 890f474d..6fb74572 100644
--- a/templates/accounts/project.html
+++ b/templates/accounts/project.html
@@ -344,8 +344,7 @@
                     {% csrf_token %}
                     <h2>Remove Project</h2>
                     <a href="#"
-                       id="remove-project"
-                       class="btn btn-default pull-right"
+                       class="btn btn-remove pull-right"
                        data-toggle="modal"
                        data-target="#remove-project-modal">Remove Project</a>
                     This will permanently remove project {{ project }}.
diff --git a/templates/front/details.html b/templates/front/details.html
index 49e222e8..48720ef1 100644
--- a/templates/front/details.html
+++ b/templates/front/details.html
@@ -257,10 +257,9 @@
                 </button>
                 &nbsp;
                 <button
-                    id="details-remove-check"
                     data-toggle="modal"
                     data-target="#remove-check-modal"
-                    class="btn btn-sm btn-default">Remove</button>
+                    class="btn btn-sm btn-remove">Remove</button>
             </div>
         </div>
         {% endif %}