From ecfde6264893b6dc8e9ef98ed7e7dce9894e6429 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Tue, 13 May 2025 16:20:30 -0400
Subject: [PATCH] 2568 - Clean up CSS

---
 app/assets/sass/uswds/_main.scss              |   4 +
 .../uswds/_uswds-theme-custom-styles.scss     |  12 +-
 app/templates/base.html                       |   2 +-
 .../find-services/find-services-by-name.html  |  29 ++--
 .../views/find-users/find-users-by-email.html |  11 +-
 app/templates/views/manage-users.html         | 130 ++++++++++--------
 poetry.lock                                   |   3 +
 7 files changed, 117 insertions(+), 74 deletions(-)

diff --git a/app/assets/sass/uswds/_main.scss b/app/assets/sass/uswds/_main.scss
index 88e44042d..61f807bdb 100644
--- a/app/assets/sass/uswds/_main.scss
+++ b/app/assets/sass/uswds/_main.scss
@@ -351,6 +351,10 @@ h2.recipient-list {
   margin-top: units(1);
 }
 
+.usa-search .search-form__button {
+  height: 40px;
+}
+
 // Button ellipses loading
 .dot-anim::after {
   content: '.';
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 31cbeb3fa..737d45172 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -179,10 +179,19 @@ td.table-empty-message {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding: 1rem;
+  padding: 1rem 0;
 }
 
 .user-list-item {
+  border: 2px solid color('gray-5');
+  padding: units(2);
+  button, .usa-accordion__content {
+    background-color: white;
+    border: 2px solid color('gray-5');
+  }
+  button:hover, button[aria-expanded="true"] {
+    background-color: color('gray-5');
+  }
   @include at-media(desktop) {
     width: calc(50% - units(1));
     margin-bottom: 1rem;
@@ -199,7 +208,6 @@ td.table-empty-message {
   }
 
   .hint {
-    display: block;
     font-size: size('body', 'sm');
     font-weight: normal;
   }
diff --git a/app/templates/base.html b/app/templates/base.html
index c75fae406..9fba71446 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -65,7 +65,7 @@
     {% endblock %}
 
     {% block main %}
-    <div class="grid-container">
+    <div class="grid-container minh-mobile">
       {% block beforeContent %}
         {% block backLink %}{% endblock %}
       {% endblock %}
diff --git a/app/templates/views/find-services/find-services-by-name.html b/app/templates/views/find-services/find-services-by-name.html
index 24970749f..0629c5264 100644
--- a/app/templates/views/find-services/find-services-by-name.html
+++ b/app/templates/views/find-services/find-services-by-name.html
@@ -14,19 +14,22 @@
   </h1>
 
 
-  {% call form_wrapper(
-      action=url_for('.find_services_by_name'),
-      class='usa-search margin-bottom-4'
-  ) %}
-      {{ form.search(param_extensions={
-        "label": {"text": "Find services by name, partial name, or service ID"}
-      }) }}
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      {{ usaButton({
-        "text": "Search",
-        "classes": "usa-button search-form__button"
-      }) }}
-  {% endcall %}
+ {% call form_wrapper(
+    action=url_for('.find_services_by_name'),
+    class='usa-search margin-bottom-4'
+) %}
+  <div class="display-flex flex-justify-start flex-align-end gap-1 width-full">
+    {{ form.search(param_extensions={
+      "label": {"text": "Find services by name, partial name, or service ID"},
+      "classes": "width-full"
+    }) }}
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    {{ usaButton({
+      "text": "Search",
+      "classes": "usa-button search-form__button"
+    }) }}
+  </div>
+{% endcall %}
 
   {% call form_wrapper(id='search-form' ) %}
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
diff --git a/app/templates/views/find-users/find-users-by-email.html b/app/templates/views/find-users/find-users-by-email.html
index e4815b35d..d77dd50d2 100644
--- a/app/templates/views/find-users/find-users-by-email.html
+++ b/app/templates/views/find-users/find-users-by-email.html
@@ -15,17 +15,20 @@
 
 
   {% call form_wrapper(
-      action=url_for('.find_users_by_email'),
-      class='usa-search margin-bottom-4'
+    action=url_for('.find_users_by_email'),
+    class='usa-search margin-bottom-4'
   ) %}
+    <div class="display-flex flex-align-end gap-1 width-full">
       {{ form.search(param_extensions={
-            "label": {"text": "Find users by email, or by partial email"}
+        "label": {"text": "Find users by email, or by partial email"},
+        "classes": "width-full"
       }) }}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       {{ usaButton({
         "text": "Search",
-        "classes": "search-form__button"
+        "classes": "usa-button search-form__button"
       }) }}
+    </div>
   {% endcall %}
 
   {% call form_wrapper(id='search-form' ) %}
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index 4b36e25eb..5e73dd2d4 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -35,73 +35,95 @@
     </div>
   {% endif %}
 
+  <div class="user-list">
     {% for user in users %}
-    <div class="user-list">
       {% if user.status != 'cancelled' %}
-        <div class="user-list-item">
-          <h2 class="user-list-item-heading font-body-lg margin-top-0" title="{{ user.email_address }}">
+        <div class="user-list-item width-full">
+          <h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
             {%- if user.name -%}
-            <span class="heading-small live-search-relevant">{{ user.name }}</span>
+              <span class="heading-small live-search-relevant">{{ user.name }}</span>
             {%- endif -%}
-            {%- if user.status == 'pending' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(invited)</span>
-            {%- elif user.status == 'cancelled' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(cancelled invite)</span>
+          </h2>
+          <p class="margin-top-0">
+             {%- if user.status == 'pending' -%}
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(invited)</span>
             {%- elif user.status == 'expired' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(expired invite)</span>
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(expired invite)</span>
             {%- elif user.id == current_user.id -%}
-              <span class="live-search-relevant"></span><span class="hint">(you)</span>
-            {% else %}
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(you)</span>
+            {%- else -%}
               <span class="live-search-relevant">{{ user.email_address }}</span>
             {% endif %}
-          </h2>
-          <h3 class="margin-bottom-0">Permissions</h3>
-          <ul class="tick-cross-list-permissions">
-            {% for permission, label in permissions %}
-              {{ tick_cross(
-                user.has_permission_for_service(current_service.id, permission),
-                label
-              ) }}
-            {% endfor %}
-          </ul>
-          {# only show if the service has folders #}
-          {% if current_service.all_template_folders %}
-            <p class="usa-body tick-cross-list-hint">
-              {% set folder_count = user.template_folders_for_service(current_service) | length %}
-              {% if folder_count == 0 %}
-                Cannot see any folders
-              {% elif folder_count != current_service.all_template_folders | length %}
-                Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %}
-              {% else %}
-                Can see all folders
-              {% endif%}
-            </p>
-          {% endif %}
-          {% if current_service.has_permission('email_auth') %}
-            <p class="usa-body tick-cross-list-hint">
-              Signs in with
-              {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
-            </p>
-          {% endif %}
-          {% if current_service.has_permission('email_auth') %}
-            <p class="usa-body tick-cross-list-hint">
-              Signs in with
-              {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
-            </p>
-            {% endif %}
-              {% if current_user.has_permissions('manage_service') %}
-                {% if user.status == 'pending' or user.status == 'expired' %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
+          </p>
+
+          <div class="usa-accordion usa-accordion--bordered margin-bottom-2">
+            <h3 class="margin-bottom-0 usa-accordion__heading">
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="false"
+                aria-controls="permissions_{{user.id}}"
+              >
+                Permissions
+              </button>
+            </h3>
+              <div id="permissions_{{user.id}}" class="usa-accordion__content usa-prose" hidden>
+                <ul class="tick-cross-list-permissions">
+                  {% for permission, label in permissions %}
+                    {{ tick_cross(
+                      user.has_permission_for_service(current_service.id, permission),
+                      label
+                    ) }}
+                  {% endfor %}
+                </ul>
+                 {% if current_service.all_template_folders %}
+                  <p class="usa-body tick-cross-list-hint">
+                    {% set folder_count = user.template_folders_for_service(current_service) | length %}
+                    {% if folder_count == 0 %}
+                      Cannot see any folders
+                    {% elif folder_count != current_service.all_template_folders | length %}
+                      Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %}
+                    {% else %}
+                      Can see all folders
+                    {% endif %}
+                  </p>
                 {% endif %}
-                {% if user.status == 'expired' %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id)}}">Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
-                {% elif user.is_editable_by(current_user) %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span></a>
+
+                {% if current_service.has_permission('email_auth') %}
+                  <p class="usa-body tick-cross-list-hint">
+                    Signs in with
+                    {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
+                  </p>
                 {% endif %}
+              </div>
+          </div>
+
+
+
+          {% if current_user.has_permissions('manage_service') %}
+            {% if user.status == 'pending' or user.status == 'expired' %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
+                Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span>
+              </a>
             {% endif %}
+
+            {% if user.status == 'expired' %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id) }}">
+                Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span>
+              </a>
+            {% elif user.is_editable_by(current_user) %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
+                Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span>
+              </a>
+            {% endif %}
+          {% endif %}
         </div>
       {% endif %}
-    </div>
     {% endfor %}
+  </div>
+
 
 {% endblock %}
diff --git a/poetry.lock b/poetry.lock
index 36ae4f442..58a4931d4 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1673,8 +1673,11 @@ files = [
     {file = "lxml-5.4.0-cp36-cp36m-win_amd64.whl", hash = "sha256:7ce1a171ec325192c6a636b64c94418e71a1964f56d002cc28122fceff0b6121"},
     {file = "lxml-5.4.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:795f61bcaf8770e1b37eec24edf9771b307df3af74d1d6f27d812e15a9ff3872"},
     {file = "lxml-5.4.0-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:29f451a4b614a7b5b6c2e043d7b64a15bd8304d7e767055e8ab68387a8cacf4e"},
+    {file = "lxml-5.4.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:891f7f991a68d20c75cb13c5c9142b2a3f9eb161f1f12a9489c82172d1f133c0"},
     {file = "lxml-5.4.0-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4aa412a82e460571fad592d0f93ce9935a20090029ba08eca05c614f99b0cc92"},
+    {file = "lxml-5.4.0-cp37-cp37m-manylinux_2_28_aarch64.whl", hash = "sha256:ac7ba71f9561cd7d7b55e1ea5511543c0282e2b6450f122672a2694621d63b7e"},
     {file = "lxml-5.4.0-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:c5d32f5284012deaccd37da1e2cd42f081feaa76981f0eaa474351b68df813c5"},
+    {file = "lxml-5.4.0-cp37-cp37m-musllinux_1_2_aarch64.whl", hash = "sha256:ce31158630a6ac85bddd6b830cffd46085ff90498b397bd0a259f59d27a12188"},
     {file = "lxml-5.4.0-cp37-cp37m-musllinux_1_2_x86_64.whl", hash = "sha256:31e63621e073e04697c1b2d23fcb89991790eef370ec37ce4d5d469f40924ed6"},
     {file = "lxml-5.4.0-cp37-cp37m-win32.whl", hash = "sha256:be2ba4c3c5b7900246a8f866580700ef0d538f2ca32535e991027bdaba944063"},
     {file = "lxml-5.4.0-cp37-cp37m-win_amd64.whl", hash = "sha256:09846782b1ef650b321484ad429217f5154da4d6e786636c38e434fa32e94e49"},