Merge pull request #509 from cisagov/ik/style-tuning-0323

Adjustment alignment, spacing, and mobile layouts

.github/workflows/test.yaml

@@ -33,7 +33,7 @@ jobs:
         run: docker compose run app python manage.py test
 
   pa11y-scan:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v3
 

src/registrar/assets/img/registrar/favicons/favicon.svg

@@ -0,0 +1,11 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3396_36413)">
+<path d="M485.007 0H14C5.71573 0 -1 6.71573 -1 15V485.135C-1 493.419 5.71573 500.135 14 500.135H485.007C493.291 500.135 500.007 493.419 500.007 485.135V15C500.007 6.71573 493.291 0 485.007 0Z" fill="#002B47"/>
+<path d="M18.375 279.369H53.5869V314H18.375V279.369ZM120.989 336.196C124.553 339.218 130.557 340.729 139.002 340.729C150.933 340.729 158.913 336.739 162.941 328.759C165.576 323.646 166.893 315.046 166.893 302.96V294.825C163.716 300.248 160.307 304.316 156.666 307.027C150.081 312.063 141.52 314.581 130.983 314.581C114.714 314.581 101.698 308.887 91.9365 297.498C82.2523 286.032 77.4102 270.537 77.4102 251.014C77.4102 232.188 82.0973 216.383 91.4717 203.6C100.846 190.739 114.133 184.309 131.332 184.309C137.685 184.309 143.224 185.277 147.95 187.214C156.007 190.545 162.515 196.666 167.474 205.575V187.33H199.664V307.492C199.664 323.839 196.914 336.158 191.413 344.447C181.961 358.702 163.832 365.83 137.026 365.83C120.834 365.83 107.625 362.654 97.3984 356.301C87.1719 349.948 81.5163 340.457 80.4316 327.829H116.457C117.387 331.703 118.897 334.492 120.989 336.196ZM115.411 270.77C119.905 281.461 127.962 286.807 139.583 286.807C147.33 286.807 153.877 283.901 159.223 278.091C164.568 272.203 167.241 262.867 167.241 250.084C167.241 238.076 164.685 228.934 159.571 222.658C154.535 216.383 147.757 213.245 139.234 213.245C127.613 213.245 119.595 218.707 115.179 229.631C112.854 235.441 111.692 242.608 111.692 251.13C111.692 258.49 112.932 265.036 115.411 270.77ZM336.328 203.367C347.02 216.77 352.365 232.614 352.365 250.897C352.365 269.491 347.02 285.412 336.328 298.66C325.637 311.831 309.406 318.416 287.636 318.416C265.866 318.416 249.635 311.831 238.943 298.66C228.252 285.412 222.906 269.491 222.906 250.897C222.906 232.614 228.252 216.77 238.943 203.367C249.635 189.964 265.866 183.263 287.636 183.263C309.406 183.263 325.637 189.964 336.328 203.367ZM287.52 211.27C277.835 211.27 270.359 214.717 265.091 221.612C259.9 228.43 257.305 238.192 257.305 250.897C257.305 263.603 259.9 273.404 265.091 280.299C270.359 287.194 277.835 290.642 287.52 290.642C297.204 290.642 304.641 287.194 309.832 280.299C315.023 273.404 317.618 263.603 317.618 250.897C317.618 238.192 315.023 228.43 309.832 221.612C304.641 214.717 297.204 211.27 287.52 211.27ZM358.994 187.33H396.181L422.561 280.764L449.522 187.33H485.083L439.412 314H404.432L358.994 187.33Z" fill="#7AB9D5"/>
+</g>
+<defs>
+<clipPath id="clip0_3396_36413">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -36,7 +36,9 @@ $letter-space--xs: .0125em;
 }
 
 .usa-logo {
-  margin-top: units(2);
+  @include at-media(desktop) {
+    margin-top: units(2);
+  }
 }
 
 .usa-logo__text {
@@ -48,6 +50,13 @@ $letter-space--xs: .0125em;
   margin-top: units(1);
 }
 
+p,
+.usa-list li
+{
+  @include typeset('sans', 'sm', 5);
+  max-width: measure(5);
+}
+
  h1 {
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
@@ -90,13 +99,6 @@ $letter-space--xs: .0125em;
   }
 }
 
-.register-form-step p,
-.register-form-step .usa-list li,
-.dashboard p
-{
-  @include typeset('sans', 'sm', 5);
-  max-width: measure(5);
-}
 
 .register-form-step a {
   color: color('primary');
@@ -125,7 +127,7 @@ a.breadcrumb__back {
     color: color('primary');
   }
 
-  @include at-media('desktop') {
+  @include at-media('tablet') {
     //align to top of sidebar
     margin-top: units(-0.5);
   }
@@ -196,6 +198,18 @@ a.breadcrumb__back {
   margin-bottom: units(0.5);
 }
 
+.usa-form .usa-button {
+  margin-top: units(3);
+} 
+
+.usa-button--unstyled .usa-icon {
+  vertical-align: bottom;
+}
+
+a.usa-button--unstyled:visited {
+  color: color('primary');
+}
+
 .dotgov-button--green {
   background-color: color('success-dark');
 
@@ -215,7 +229,7 @@ a.breadcrumb__back {
   padding-top: units(5);
 }
 
-section.dashboard {
+.section--outlined {
   background-color: color('white');
   border: 1px solid color('base-lighter');
   border-radius: 4px;
@@ -223,6 +237,8 @@ section.dashboard {
   margin-top: units(3);
 
   h2 {
+    color: color('primary-dark');
+    margin-top: units(2);
     margin-bottom: units(2);
   }
 
@@ -234,11 +250,37 @@ section.dashboard {
     margin-top: units(5);
 
     h2 {
-      margin-bottom: units(3);
+      margin-bottom: 0;
     }
   }
 }
 
+.dotgov-table--stacked {
+  td, th {
+    padding: units(1) units(2) units(2px) 0;
+    border: none;
+  }
+
+  tr:first-child th:first-child {
+    border-top: none;
+  }
+
+  tr {
+    border-bottom: none;
+    border-top: 2px solid color('base-light');
+    margin-top: units(2);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  td[data-label]:before,
+  th[data-label]:before {
+    color: color('primary-darker');
+    padding-bottom: units(2px);
+  }
+}
 
 .dotgov-table {
   width: 100%;
@@ -262,38 +304,16 @@ section.dashboard {
   th[data-sortable]:not([aria-sort]) .usa-table__header__button {
     right: auto;
   }
-}
 
-.dotgov-table--stacked {
-    td, th {
-      padding: units(1) units(2) units(2px) 0;
-      border: none;
-    }
+  tbody th {
+    word-break: break-word;
+  }
 
-    tr:first-child th:first-child {
-      border-top: none;
-    }
 
-    tr {
-      border-bottom: none;
-      border-top: 2px solid color('base-light');
-      margin-top: units(2);
+  @include at-media(mobile-lg) {
 
-      &:first-child {
-        margin-top: 0;
-      }
-    }
+    margin-top: units(1);
 
-    td[data-label]:before,
-    th[data-label]:before {
-      color: color('primary-darker');
-      padding-bottom: units(2px);
-    }
-}
-
-@include at-media(mobile-lg) {
-
-  .dotgov-table {
     tr {
       border: none;
     }
@@ -312,10 +332,6 @@ section.dashboard {
         border-bottom: 0;
       }
     }
-    
-    tbody th {
-      word-break: break-word;
-    }
 
     td, th,
     .usa-tabel th{

src/registrar/fixtures.py

@@ -140,7 +140,13 @@ class DomainApplicationFixture:
         da.organization_type = (
             app["organization_type"] if "organization_type" in app else "federal"
         )
-        da.federal_agency = app["federal_agency"] if "federal_agency" in app else ""
+        da.federal_agency = (
+            app["federal_agency"]
+            if "federal_agency" in app
+            # Random choice of agency for selects, used as placeholders for testing.
+            else random.choice(DomainApplication.AGENCIES)  # nosec
+        )
+
         da.federal_type = (
             app["federal_type"]
             if "federal_type" in app

src/registrar/templates/application_dotgov_domain.html

@@ -38,7 +38,8 @@
 
   <fieldset class="usa-fieldset">
     <legend>
-      <h2>What .gov domain do you want? <abbr class="usa-hint usa-hint--required" title="required">*</abbr></h2>
+      <h2>What .gov domain do you want?&nbsp;<abbr class="usa-hint usa-hint--required
+          text-super" title="required">*</abbr></h2>
     </legend>
 
     <p id="domain_instructions">After you enter your domain, we’ll make sure it’s

src/registrar/templates/application_form.html

@@ -1,14 +1,14 @@
 {% extends 'base.html' %}
 {% load static form_helpers url_helpers %}
 
-{% block title %}Apply for a .gov domain – {{form_titles|get_item:steps.current}}{% endblock %}
+{% block title %}Apply for a .gov domain | {{form_titles|get_item:steps.current}} | {% endblock %}
 {% block content %}
 <div class="grid-container">
   <div class="grid-row grid-gap">
-    <div class="grid-col-3">
+    <div class="tablet:grid-col-3">
       {% include 'application_sidebar.html' %}
     </div>
-    <div class="grid-col-9">
+    <div class="tablet:grid-col-9">
       <main id="main-content" class="grid-container register-form-step">
         {% if steps.prev %}
         <a href="{% namespaced_url 'application' steps.prev %}" class="breadcrumb__back">

src/registrar/templates/application_org_federal.html

@@ -3,7 +3,7 @@
 
 {% block form_instructions %}
   <h2 class="margin-bottom-05">
-    Which federal branch is your organization in? <abbr class="usa-hint usa-hint--required" title="required">*</abbr>
+    Which federal branch is your organization&nbsp;in?&nbsp;<abbr class="usa-hint usa-hint--required text-super" title="required">*</abbr>
   </h2>
 {% endblock %}
 

src/registrar/templates/application_org_type.html

@@ -3,7 +3,7 @@
 
 {% block form_instructions %}
   <h2 class="margin-bottom-05">
-    What kind of U.S.-based government organization do you represent? <abbr class="usa-hint usa-hint--required" title="required">*</abbr>
+    What kind of U.S.-based government organization do you represent? <abbr class="usa-hint usa-hint--required text-super" title="required">*</abbr>
   </h2>
 
 {% endblock %}

src/registrar/templates/base.html

@@ -16,9 +16,21 @@
   {% endblock %}
   {% block extra_meta %}{% endblock extra_meta %}
 
-  {# TO-DO: set defaults for these #}
-  <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
-  <link rel="apple-touch-icon" href="{% static 'img/touch-icon.png' %}">
+  <link rel="icon" type="image/png" sizes="32x32" 
+        href="{% static 'img/registrar/favicons/favicon-32.png' %}"
+  >
+  <link rel="icon" type="image/png" sizes="192x192" 
+        href="{% static 'img/registrar/favicons/favicon-192.png' %}"
+  >
+  <link rel="icon" type="image/svg+xml" 
+        href="{% static 'img/registrar/favicons/favicon.svg' %}"
+  >
+  <link rel="shortcut icon" type="image/x-icon"
+        href="{% static 'img/registrar/favicons/favicon.ico' %}"
+  >
+  <link rel="apple-touch-icon" size="180x180" 
+        href="{% static 'img/registrar/favicons/favicon-180.png' %}"
+  >
 
   {% block css %}
   <link rel="stylesheet" href="{% static 'css/styles.css' %}">
@@ -128,9 +140,9 @@
       <div class="usa-navbar">
         {% block logo %}
         <div class="usa-logo" id="extended-logo">
-           <a href="{% url 'home' %}">
-           <strong class="usa-logo__text" >.gov </strong>
-           </a>
+          <strong class="usa-logo__text" >
+            <a href="{% url 'home' %}"> .gov </a>
+          </strong>
         </div>
         {% endblock %}
         <button type="button" class="usa-menu-btn">Menu</button>

src/registrar/templates/domain_base.html

@@ -1,30 +1,30 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block title %}Domain {{ domain.name }}{% endblock %}
+{% block title %}Domain: {{ domain.name }} | {% endblock %}
 
 {% block content %}
 <div class="grid-container">
   <div class="grid-row"> 
-    <p class="font-body-sm margin-top-0 margin-bottom-2 
+    <p class="font-body-md margin-top-0 margin-bottom-2 
               text-primary-darker text-semibold"
     >
-      {{ domain.name }}
+      <span class="usa-sr-only"> Domain name:</span> {{ domain.name }} 
     </p>
   </div>
   <div class="grid-row grid-gap">
-    <div class="grid-col-3">
+    <div class="tablet:grid-col-3">
       {% include 'domain_sidebar.html' %}
     </div>
 
-    <div class="grid-col-9">
+    <div class="tablet:grid-col-9">
       <main id="main-content" class="grid-container">
 
 	  <a href="{% url 'home' %}" class="breadcrumb__back">
         <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="{% static 'img/sprite.svg' %}#arrow_back"></use>
         </svg>
-        <p class="margin-left-05 margin-top-0 margin-bottom-0">
+        <p class="margin-left-05 margin-top-0 margin-bottom-0 line-height-sans-1">
         Back to manage your domains 
         </p>
       </a>

src/registrar/templates/domain_users.html

@@ -1,35 +1,37 @@
 {% extends "domain_base.html" %}
 {% load static %}
 
-{% block title %}User management{% endblock %}
+{% block title %}User management | {{ domain.name }} | {% endblock %}
 
 {% block domain_content %}
   <h1>User management</h1>
 
   {% if domain.permissions %}
+  <section class="section--outlined">
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
-      <caption class="sr-only">Domain users</caption>
-      <thead>
-        <tr>
-          <th data-sortable scope="col" role="columnheader">Email</th>
-          <th data-sortable scope="col" role="columnheader">Role</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for permission in domain.permissions.all %}
-        <tr>
-          <th scope="row" role="rowheader" data-sort-value="{{ user.email }}" data-label="Email">
-            {{ permission.user.email }}
-          </th>
-          <td data-label="Role">{{ permission.role|title }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-    <div
+    <h2 class> Active users </h2>
+    <caption class="sr-only">Domain users</caption>
+    <thead>
+      <tr>
+        <th data-sortable scope="col" role="columnheader">Email</th>
+        <th data-sortable scope="col" role="columnheader">Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for permission in domain.permissions.all %}
+      <tr>
+        <th scope="row" role="rowheader" data-sort-value="{{ user.email }}" data-label="Email">
+          {{ permission.user.email }}
+        </th>
+        <td data-label="Role">{{ permission.role|title }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  <div
       class="usa-sr-only usa-table__announcement-region"
       aria-live="polite"
-    ></div>
+      ></div>
   {% endif %}
 
   <a class="usa-button usa-button--unstyled" href="{% url 'domain-users-add' pk=domain.id %}">
@@ -37,8 +39,10 @@
       <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
     </svg><span class="margin-left-05">Add another user</span>
   </a>
+  </section>
 
   {% if domain.invitations.exists %}
+  <section class="section--outlined">
   <h2>Invitations</h2>
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
       <caption class="sr-only">Domain invitations</caption>
@@ -66,6 +70,7 @@
         {% endfor %}
       </tbody>
     </table>
+    </section>
   {% endif %}
 
 {% endblock %}  {# domain_content #}

src/registrar/templates/home.html

@@ -12,9 +12,13 @@
 <div class="tablet:grid-offset-1 desktop:grid-offset-2">
   <h1>Manage your domains</h2>
 
-  <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+  <p class="margin-top-4">
+    <a href="{% url 'application:' %}" class="usa-button">
+      Start a new domain request
+    </a>
+  </p>
 
-  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
+  <section class="section--outlined tablet:grid-col-11 desktop:grid-col-10">
     <h2>Registered domains</h2>
     {% if domains %}
     <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
@@ -37,7 +41,16 @@
           <td data-label="Status">{{ domain.application_status|title }}</td>
           <td>
             <a href="{% url "domain" pk=domain.pk %}">
-                Edit <span class="usa-sr-only">{{ domain.name }}</span>
+              <svg 
+                class="usa-icon" 
+                aria-hidden="true" 
+                focusable="false" 
+                role="img" 
+                width="24"
+              > 
+                <use xlink:href="{%static 'img/sprite.svg'%}#settings"></use>
+              </svg>
+                Manage <span class="usa-sr-only">{{ domain.name }}</span>
             </a>
           </td>
         </tr>
@@ -53,7 +66,7 @@
     {% endif %}
   </section>
 
-  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
+  <section class="section--outlined tablet:grid-col-11 desktop:grid-col-10">
     <h2>Active domain requests</h2>
     {% if domain_applications %}
     <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
@@ -104,7 +117,7 @@
     <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
   </section>
 
-  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
+  <section class="section--outlined tablet:grid-col-11 desktop:grid-col-10">
     <h2>Archived domains</h2>
     <p>You don't have any archived domains</p> 
   </section>

src/registrar/templates/includes/footer.html

@@ -49,7 +49,7 @@
               src="{% static 'img/CISA_logo.png' %}"
               alt="CISA logo"
               role="img"
-              width="200px"
+              width="48px"
           /></a>
         </div>
         <section

src/registrar/tests/test_views.py

@@ -1090,7 +1090,7 @@ class TestDomainDetail(TestWithDomainPermissions, WebTest):
         home_page = self.app.get("/")
         self.assertContains(home_page, "igorville.gov")
         # click the "Edit" link
-        detail_page = home_page.click("Edit")
+        detail_page = home_page.click("Manage")
         self.assertContains(detail_page, "igorville.gov")
 
     def test_domain_user_management(self):