Stablized with all CSS working now

app/templates/components/service_nav.html

@@ -6,10 +6,10 @@
       <a href="{{ url_for('.organization_dashboard', org_id=current_service.organization_id) }}" class="usa-link navigation-organization-link">{{ current_service.organization_name }}</a>
     {% endif %}
   {% endif %}
-  <span>
+  <span class="navigation-service-name">
     {{ current_service.name }}
     {% if not current_service.active %}
-      <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
+      <span class="navigation-service-type--suspended">Suspended</span>
     {% endif %}
   </span>
   <a href="{{ url_for('main.choose_account') }}" class="usa-button usa-button--outline">Switch service</a>

app/templates/views/choose-account.html

@@ -14,13 +14,13 @@
           {{ heading }}
         </h2>
       </div>
-      <div class="grid-col-9">
+      <div class="grid-col-9 margin-top-1">
         <ul>
   {% else %}
     <ul>
   {% endif %}
   {% for org in organizations|sort %}
-    <li class="browse-list-item">
+    <li class="browse-list-item margin-y-2">
       <a href="{{ url_for('.organization_dashboard', org_id=org.id) }}" class="usa-link">{{ org.name }}</a>
       <p class="browse-list-hint">
         {{ org.count_of_live_services }}
@@ -29,7 +29,7 @@
     </li>
   {% endfor %}
   {% for service in services|sort %}
-    <li class="browse-list-item">
+    <li class="browse-list-item margin-y-2">
       <a href="{{ url_for('.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a>
     </li>
   {% endfor %}
@@ -62,7 +62,7 @@
             Platform admin
           </h2>
         </div>
-        <ul class="grid-col-9">
+        <ul class="grid-col-9 margin-top-3">
           <li class="browse-list-item">
             <a href="{{ url_for('.organizations') }}" class="usa-link">All organizations</a>
             <p class="browse-list-hint">

app/templates/views/dashboard/dashboard.html

@@ -34,7 +34,7 @@ Dashboard
             title="Total messages track the sum of messages for the service: pending, failed, or delivered"
             >
             <span class="usa-sr-only">More information</span>
-            i
+            <img src="{{ asset_url('img/usa-icons/info.svg') }}" alt="" class="usa-icon" role="presentation" />
             </button>
         </div>
         <svg id="totalMessageChart"></svg>

app/templates/views/guides/establish-trust.html

@@ -127,7 +127,7 @@
       </div>
     </li>
     <li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
-      <div class="usa-card__container border-0 width-full overflow-hidden guides">
+      <div class="usa-card__container border-0 width-full overflow-hidden guides auto-response-container">
         <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
         <div class="position-absolute flex text-center padding-5 padding-top-15">
           <p class="sms-message-wrapper text-left">

app/templates/views/organizations/organization/index.html

@@ -19,7 +19,7 @@
         title="Combined totals across all services in {{ current_org.name }}: pending, failed, or delivered"
       >
         <span class="usa-sr-only">More information</span>
-        i
+        <img src="{{ asset_url('img/usa-icons/info.svg') }}" alt="" class="usa-icon" role="presentation" />
       </button>
     </div>
     <svg id="totalMessageChart"></svg>

app/templates/views/templates/_template_list.html

@@ -25,7 +25,7 @@
   </p>
 </div>
 {% else %}
-<nav id="template-list" aria-label="Template list">
+<nav id="template-list" aria-label="Template list" class="margin-bottom-4">
   {% set checkboxes_data = [] %}
 
   {% if not current_user.has_permissions(ServicePermission.MANAGE_TEMPLATES) %}