From bad2fd5fe43cad335a2b5078e40ef812da1bee25 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jbobel@flexion.us>
Date: Tue, 15 Aug 2023 16:45:48 -0400
Subject: [PATCH] Adjusted styles to *not* break tests

---
 .../uswds/_uswds-theme-custom-styles.scss     | 25 ++++++++++++--
 .../views/templates/_template_list.html       | 33 +++++++++++--------
 app/templates/views/usage.html                |  2 +-
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 1d2a1a670..79f74916a 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -136,6 +136,16 @@ td.table-empty-message {
    background-position: 0;
 }
 
+.usa-checkbox .usa-checkbox__label {
+   + a.template-list-folder, + a.usa-template-list-template {
+      margin-left: units(4);
+   }
+}
+
+.usa-checkbox__label-description {
+   margin: units(2px) 0 units(1) units(4);
+}
+
 .folder-heading-folder {
    background: url(../img/material-icons/folder_open.svg) no-repeat;
    padding-left: units(4);
@@ -273,12 +283,20 @@ td.table-empty-message {
    .file-list-hint {
       margin: 0; 
    }
+   .table-field, .table-field-right-aligned {
+      width: 50%; 
+   }
+   &.usage-table {
+      .table-field, .table-field-left-aligned, .table-field-right-aligned {
+         width: auto; 
+      }
+   }
 }
 
 #template-list {
    max-height: 500px;
    overflow-y: auto;
-   padding-left: units(1);
+   padding: units(1) 0 units(1) units(1);
    margin: units(2) 0 units(5);
    ul {
       padding: 0; 
@@ -296,7 +314,7 @@ td.table-empty-message {
       padding: 0; 
       .pill-item__container {
          border: 1px solid color("gray-cool-10");
-         width: 25%;
+         flex: 1; 
          display: flex; 
          flex-direction: column; 
          text-align: center; 
@@ -307,6 +325,9 @@ td.table-empty-message {
                font-size: units(5);
                line-height: units(6);
             }
+            .big-number-smallest {
+               font-size: units(3);
+            }
             &:not(.pill-item--selected):hover {
                background: color("blue-warm-70v");
             }  
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html
index 6d5b55a98..6c5a6294f 100644
--- a/app/templates/views/templates/_template_list.html
+++ b/app/templates/views/templates/_template_list.html
@@ -104,17 +104,17 @@
 
 
 {% macro format_item_name(name, separators=True) -%}
-{%- if name is string -%}
-{{- name -}}
-{%- else -%}
-{%- for part in name -%}
-{{- format_item_name(part, separators) -}}
-{%- if not loop.last -%}
-{%- if separators %}
-<span class="message-name-separator"></span>{%- else %} {% endif -%}
-{% endif -%}
-{%- endfor -%}
-{% endif %}
+  {%- if name is string -%}
+    {{- name -}}
+  {%- else -%}
+    {%- for part in name -%}
+      {{- format_item_name(part, separators) -}}
+      {%- if not loop.last -%}
+        {%- if separators %}
+        <span class="message-name-separator"></span>{%- else %} {% endif -%}
+      {% endif -%}
+    {%- endfor -%}
+  {% endif %}
 {%- endmacro %}
 
 {% if template_list.template_folder_id and not template_list.templates_to_show %}
@@ -134,6 +134,13 @@
   <ul>
     {% endif %}
 
+    {% set label_content %}
+    <span class="usa-sr-only">
+      {%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
+      {{ format_item_name(item.name, separators=False) -}}
+    </span>
+    {% endset %}
+
     {% for item in template_list %}
 
     {% set item_link_content %}
@@ -150,7 +157,7 @@
     </a>
     {% else %}
     <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}"
-      class="usa-link font-body-lg usa-template-list-template">
+      class="usa-link usa-template-list-template">
       <span class="live-search-relevant">
         {%- if current_service.api_keys -%}
         <span class="govuk-!-display-none">{{ item.id }} </span>
@@ -169,7 +176,7 @@
     {% endset %}
 
     {% set item_meta %}
-    <span id="{{ item.id }}-item-hint" class="usa-hint template-list-item-hint">
+    <span id="{{ item.id }}-item-hint" class="usa-hint usa-checkbox__label-description template-list-item-hint">
       {{ item.hint }}
     </span>
     {% endset %}
diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html
index 44dd72a43..436cb5f97 100644
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -14,7 +14,7 @@
       Usage
     </h1>
 
-    <div class="bottom-gutter">
+    <div class="tabs tabs__usage">
       {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
     </div>
     <div id='pill-selected-item'>