Add "btn-remove" CSS class for remove/delete/close buttons

hc/front/tests/test_details.py

@@ -70,7 +70,7 @@ class DetailsTestCase(BaseTestCase):
         self.assertNotContains(r, "Change Schedule")
         self.assertNotContains(r, "Create a Copy…")
         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"

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);
+}

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

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);
 }

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>

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

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