Fix Nav Highlighting and Styling (#3097)

Author: heyitsmebev

app/assets/sass/uswds/components/_tables.scss

@@ -66,3 +66,7 @@ td.table-empty-message {
     background-color: transparent;
   }
 }
+
+.job-table {
+  width: 100%;
+}

app/templates/components/main_nav.html

@@ -7,12 +7,12 @@
   <ul class="usa-sidenav">
   {% if current_user.has_permissions() %}
     {% if current_user.has_permissions(ServicePermission.VIEW_ACTIVITY) %}
-      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
-      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('activity') }}" href="{{ url_for('.all_jobs_activity', service_id=current_service.id) }}">Activity</a></li>
+      <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
+      <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('activity') }}" href="{{ url_for('.all_jobs_activity', service_id=current_service.id) }}">Activity</a></li>
     {% endif %}
   {% elif current_user.has_permissions(allow_org_user=True) %}
-    <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
-    <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
   {% endif %}
   </ul>
 </nav>

app/templates/components/org_nav.html

@@ -1,14 +1,14 @@
 <nav id="nav-org-nav" aria-label="Organization navigation" class="nav margin-bottom-4">
   <ul class="usa-sidenav">
     {% if config.ORGANIZATION_DASHBOARD_ENABLED %}
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('dashboard') }}" href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}">Dashboard</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('dashboard') }}" href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}">Dashboard</a></li>
     {% endif %}
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('usage') }}" href="{{ url_for('.organization_usage', org_id=current_org.id) }}">Usage</a></li>
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_org_users', org_id=current_org.id) }}">Team members</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('usage') }}" href="{{ url_for('.organization_usage', org_id=current_org.id) }}">Usage</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_org_users', org_id=current_org.id) }}">Team members</a></li>
     {% if current_user.platform_admin %}
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('settings') }}" href="{{ url_for('.organization_settings', org_id=current_org.id) }}">Settings</a></li>
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('trial-services') }}" href="{{ url_for('.organization_trial_mode_services', org_id=current_org.id) }}">Trial mode services</a></li>
-    <li class="usa-sidenav__item"><a class="usa-link{{ org_navigation.is_selected('billing') }}" href="{{ url_for('.organization_billing', org_id=current_org.id) }}">Billing</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('settings') }}" href="{{ url_for('.organization_settings', org_id=current_org.id) }}">Settings</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('trial-services') }}" href="{{ url_for('.organization_trial_mode_services', org_id=current_org.id) }}">Trial mode services</a></li>
+    <li class="usa-sidenav__item"><a class="usa-link {{ org_navigation.is_selected('billing') }}" href="{{ url_for('.organization_billing', org_id=current_org.id) }}">Billing</a></li>
     {% endif %}
   </ul>
 </nav>

app/templates/components/settings_nav.html

@@ -3,14 +3,12 @@
 {% else %}
 <nav class="nav">
   <ul class="usa-sidenav">
-    {# {% if current_user.has_permissions() %} #}
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('settings') }}"
+    <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('settings') }}"
       href="{{ url_for('main.service_settings', service_id=current_service.id) }}">General</a></li>
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('user-profile') }}"
+    <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('user-profile') }}"
       href="{{ url_for('main.user_profile', service_id=current_service.id) }}">User profile</a></li>
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('team-members') }}"
+    <li class="usa-sidenav__item"><a class="usa-link {{ main_navigation.is_selected('team-members') }}"
         href="{{ url_for('main.manage_users', service_id=current_service.id) }}">Team members</a></li>
-    {# {% endif %} #}
   </ul>
 </nav>
 {% endif %}

app/templates/components/sub-navigation.html

@@ -4,7 +4,7 @@
       itemscope
       itemtype="http://schema.org/ListItem"
   >
-    <a class="{% if has_subnav %}parent-link {% endif %}{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item['link']) }}" itemprop="item">
+    <a class="usa-link {% if has_subnav %}parent-link {% endif %}{% if item['link'] == request.endpoint %}usa-current {% endif %}" href="{{ url_for(item['link']) }}" itemprop="item">
       <span itemprop="name">{{item['name']}}</span>
     </a>
     {% if caller %}