From f908a3dca2d7a145bd40f20a95faf9c0f20fcc76 Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Thu, 25 Apr 2024 10:18:14 -0400
Subject: [PATCH] try different warning css

---
 .../apps/hqwebapp/static/users/scss/roles.scss |  4 ++--
 .../users/partials/edit_role_modal.html        | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/corehq/apps/hqwebapp/static/users/scss/roles.scss b/corehq/apps/hqwebapp/static/users/scss/roles.scss
index 32dbfa1a88061..44196aa047a7d 100644
--- a/corehq/apps/hqwebapp/static/users/scss/roles.scss
+++ b/corehq/apps/hqwebapp/static/users/scss/roles.scss
@@ -1,3 +1,3 @@
-.role-modal-warning { // Used in combination with Bootstrap's 'help-block'/'alert' classes
-    margin-bottom: 0px;
+.role-modal-warning {
+    margin: 5px;
 }
diff --git a/corehq/apps/users/templates/users/partials/edit_role_modal.html b/corehq/apps/users/templates/users/partials/edit_role_modal.html
index 5a0cdc5072697..ab177fda4a9f7 100644
--- a/corehq/apps/users/templates/users/partials/edit_role_modal.html
+++ b/corehq/apps/users/templates/users/partials/edit_role_modal.html
@@ -311,21 +311,21 @@ <h4 class="modal-title" data-bind="text: modalTitle"></h4>
                     {% trans "Allow role to access data from all locations." %}
                   </label>
                 </div>
-                <div class="help-block alert alert-warning role-modal-warning"
+                <div class="text-danger role-modal-warning"
                      data-bind="visible: !hasUnpermittedLocationRestriction && !permissions.access_all_locations()">
                   {% blocktrans %}
                     Make sure any users assigned this role also have a location assigned to them.
                     Users without assigned locations will not be permitted to log in.
                   {% endblocktrans %}
                 </div>
-                <div class="help-block" data-bind="visible: hasUnpermittedLocationRestriction">
+                <div class="text-danger role-modal-warning" data-bind="visible: hasUnpermittedLocationRestriction">
                   {% blocktrans %}
                     Organization-based data access restrictions are only available
                     on the Pro plan and above. Saving this role will enable
                     full organization access for the assigned users.
                   {% endblocktrans %}
                 </div>
-                <div class="help-block alert alert-warning role-modal-warning" data-bind="visible: permissions.access_all_locations() && restrictRoleChecked()">
+                <div class="text-danger role-modal-warning" data-bind="visible: permissions.access_all_locations() && restrictRoleChecked()">
                   {% blocktrans %}
                     With the current configuration, this role will have full organization access and roles that can assign it will not.
                     This is not reccomended.
@@ -475,12 +475,12 @@ <h4 class="modal-title" data-bind="text: modalTitle"></h4>
                       </label>
                     </div>
                   </div>
-                  <div class="help-block alert alert-danger role-modal-warning" data-bind="visible: showRestrictedLocationRoleAssignmentWarning">
-                    {% blocktrans %}
-                      If the highlighted roles are selected, this role will have full organization access and be assignable
-                      by a role that does not. This is not reccomended configuration.
-                    {% endblocktrans %}
-                  </div>
+                </div>
+                <div class="text-danger role-modal-warning" data-bind="visible: showRestrictedLocationRoleAssignmentWarning">
+                  {% blocktrans %}
+                    If the highlighted roles are selected, this role will have full organization access and be assignable
+                    by a role that does not. This is not reccomended configuration.
+                  {% endblocktrans %}
                 </div>
               </div>
             </div>