Merge pull request #2655 from cisagov/hotgov/2544-design-review

Issue #2544: Design review on view and manage domains, org feature - [HOTGOV]

src/registrar/assets/js/get-gov.js

@@ -1220,7 +1220,7 @@ document.addEventListener('DOMContentLoaded', function() {
             const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : '';
             const expirationDateSortValue = expirationDate ? expirationDate.getTime() : '';
             const actionUrl = domain.action_url;
-            const suborganization = domain.suborganization ? domain.suborganization : '';
+            const suborganization = domain.suborganization ? domain.suborganization : '⎯';
 
             const row = document.createElement('tr');
 
@@ -1229,7 +1229,7 @@ document.addEventListener('DOMContentLoaded', function() {
             if (!noPortfolioFlag) {
               markupForSuborganizationRow = `
                 <td>
-                    <span class="${suborganization ? 'ellipsis ellipsis--30 vertical-align-middle' : ''}" aria-label="${suborganization}" title="${suborganization}">${suborganization}</span>
+                    <span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span>
                 </td>
               `
             }
@@ -1910,7 +1910,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         let editableFormGroup = button.parentElement.parentElement.parentElement;
         if (editableFormGroup){
-          let readonlyField = editableFormGroup.querySelector(".input-with-edit-button__readonly-field")
+          let readonlyField = editableFormGroup.querySelector(".toggleable_input__readonly-field")
           let inputField = document.getElementById(`id_${fieldName}`);
           if (!inputField || !readonlyField) {
             return;
@@ -1936,8 +1936,8 @@ document.addEventListener('DOMContentLoaded', function() {
                       // Keep the path before '#' and replace the part after '#' with 'invalid'
                       const newHref = parts[0] + '#error';
                       svg.setAttribute('xlink:href', newHref);
-                      fullNameField.classList.add("input-with-edit-button__error")
-                      label = fullNameField.querySelector(".input-with-edit-button__readonly-field")
+                      fullNameField.classList.add("toggleable_input__error")
+                      label = fullNameField.querySelector(".toggleable_input__readonly-field")
                       label.innerHTML = "Unknown";
                     }
                   }
@@ -2043,11 +2043,11 @@ document.addEventListener('DOMContentLoaded', function() {
       // Due to the nature of how uswds works, this is slightly hacky.
 
       // Use a MutationObserver to watch for changes in the dropdown list
-      const dropdownList = document.querySelector(`#${input.id}--list`);
+      const dropdownList = comboBox.querySelector(`#${input.id}--list`);
       const observer = new MutationObserver(function(mutations) {
           mutations.forEach(function(mutation) {
               if (mutation.type === "childList") {
-                  addBlankOption(clearInputButton, dropdownList, initialValue);
+                addBlankOption(clearInputButton, dropdownList, initialValue);
               }
           });
       });
@@ -2111,7 +2111,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (!initialValue){
           blankOption.classList.add("usa-combo-box__list-option--selected")
         }
-        blankOption.textContent = "---------";
+        blankOption.textContent = "⎯";
 
         dropdownList.insertBefore(blankOption, dropdownList.firstChild);
         blankOption.addEventListener("click", (e) => {

src/registrar/assets/sass/_theme/_base.scss

@@ -33,16 +33,19 @@ body {
 }
 
 #wrapper.dashboard--portfolio {
-  background-color: color('gray-1');
   padding-top: units(4)!important;
 }
 
+#wrapper.dashboard--grey-1 {
+  background-color: color('gray-1');
+}
+
 
-.section--outlined {
+.section-outlined {
   background-color: color('white');
   border: 1px solid color('base-lighter');
   border-radius: 4px;
-  padding: 0 units(2) units(3);
+  padding: 0 units(4) units(3) units(2);
   margin-top: units(3);
 
   &.margin-top-0 {
@@ -72,21 +75,25 @@ body {
   }
 }
 
-.section--outlined__header--no-portfolio {
-  .section--outlined__search,
-  .section--outlined__utility-button {
+.section-outlined--border-base-light {
+  border: 1px solid color('base-light');
+}
+
+.section-outlined__header--no-portfolio {
+  .section-outlined__search,
+  .section-outlined__utility-button {
     margin-top: units(2);
   }
 
   @include at-media(tablet) {
     display: flex;
     column-gap: units(3);
 
-    .section--outlined__search,
-    .section--outlined__utility-button {
+    .section-outlined__search,
+    .section-outlined__utility-button {
       margin-top: 0;
     }
-    .section--outlined__search {
+    .section-outlined__search {
       flex-grow: 4;
       // Align right
       max-width: 383px;
@@ -192,3 +199,7 @@ abbr[title] {
     max-width: 50ch;
   }
 }
+
+.margin-right-neg-4px {
+  margin-right: -4px;
+}

src/registrar/assets/sass/_theme/_buttons.scss

@@ -124,10 +124,6 @@ a.withdraw:active {
   background-color: color('error-darker');
 }
 
-.usa-button--unstyled .usa-icon {
-  vertical-align: bottom;
-}
-
 a.usa-button--unstyled:visited {
   color: color('primary');
 }
@@ -162,14 +158,14 @@ a.usa-button--unstyled:visited {
   }
 }
 
-.input-with-edit-button {
+.toggleable_input {
   svg.usa-icon {
     width: 1.5em !important;
     height: 1.5em !important;
     color: #{$dhs-green};
     position: absolute;
   }
-  &.input-with-edit-button__error {
+  &.toggleable_input__error {
     svg.usa-icon {
       color: #{$dhs-red};
     }
@@ -205,12 +201,32 @@ a.usa-button--unstyled:visited {
   }
 }
 
+.dotgov-table a,
+.usa-link--icon,
+.usa-button--with-icon {
+    display: flex;
+    align-items: flex-start;
+    color: color('primary');
+    column-gap: units(.5);
+    align-items: center;
+}
+
+
+.dotgov-table a,
+.usa-link--icon {
+    &:visited {
+        color: color('primary');   
+    }
+}
+
+a .usa-icon,
+.usa-button--with-icon .usa-icon {
+  height: 1.3em;
+  width: 1.3em;
+}
+
 .usa-icon.usa-icon--big {
   margin: 0;
   height: 1.5em;
   width: 1.5em;
 }
-
-.margin-right-neg-4px {
-  margin-right: -4px;
-}

src/registrar/assets/sass/_theme/_tables.scss

@@ -1,5 +1,10 @@
 @use "uswds-core" as *;
 
+td,
+th {
+  vertical-align: top;
+}
+
 .dotgov-table--stacked {
   td, th {
     padding: units(1) units(2) units(2px) 0;
@@ -12,7 +17,7 @@
 
   tr {
     border-bottom: none;
-    border-top: 2px solid color('base-light');
+    border-top: 2px solid color('base-lighter');
     margin-top: units(2);
 
     &:first-child {
@@ -39,10 +44,6 @@
 .dotgov-table {
   width: 100%;
 
-  th[data-sortable]:not([aria-sort]) .usa-table__header__button {
-    right: auto;
-  }
-
   tbody th {
     word-break: break-word;
   }
@@ -56,7 +57,7 @@
     }
 
     td, th {
-      border-bottom: 1px solid color('base-light');
+      border-bottom: 1px solid color('base-lighter');
     }
 
     thead th {
@@ -72,11 +73,17 @@
 
     td, th,
     .usa-tabel th{
-      padding: units(2) units(2) units(2) 0;
+      padding: units(2) units(4) units(2) 0;
     }
 
     thead tr:first-child th:first-child {
       border-top: none;
     }
   }
+
+  @include at-media(tablet-lg) {
+    th[data-sortable]:not([aria-sort]) .usa-table__header__button {
+      right: auto;
+    }
+  }
 }

src/registrar/assets/sass/_theme/styles.scss

@@ -10,7 +10,6 @@
 --- Custom Styles ---------------------------------*/
 @forward "base";
 @forward "typography";
-@forward "links";
 @forward "lists";
 @forward "accordions";
 @forward "buttons";

src/registrar/forms/domain.py

@@ -417,7 +417,7 @@ def save(self, commit=True):
             # This action should be blocked by the UI, as the text fields are readonly.
             # If they get past this point, we forbid it this way.
             # This could be malicious, so lets reserve information for the backend only.
-            raise ValueError("Senior Official cannot be modified for federal or tribal domains.")
+            raise ValueError("Senior official cannot be modified for federal or tribal domains.")
         elif db_so.has_more_than_one_join("information_senior_official"):
             # Handle the case where the domain information object is available and the SO Contact
             # has more than one joined object.

src/registrar/templates/django/forms/widgets/combobox.html

@@ -7,7 +7,9 @@
 
 <div class="usa-combo-box"     
 {% for name, value in widget.attrs.items %}
-    {{ name }}="{{ value }}"
+    {% if name != 'id' %}
+        {{ name }}="{{ value }}"
+    {% endif %}
 {% endfor %}
 >
     {% include "django/forms/widgets/select.html" %}

src/registrar/templates/domain_dsdata.html

@@ -63,21 +63,21 @@ <h2 class="margin-top-0">DS data record {{forloop.counter}}</h2>
 
       <div class="grid-row margin-top-1">
         <div class="grid-col">
-          <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
-            </svg><span class="margin-left-05">Delete</span>
+            </svg>Delete
           </button>
         </div>
       </div>
 
     </fieldset>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block margin-bottom-2" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon margin-bottom-2" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
-      </svg><span class="margin-left-05">Add new record</span>
+      </svg>Add new record
     </button>
 
     <button

src/registrar/templates/domain_nameservers.html

@@ -52,20 +52,20 @@ <h1>DNS name servers</h1>
           {% endwith %}
         </div>
         <div class="tablet:grid-col-2">
-          <button type="button" class="usa-button usa-button--unstyled display-block delete-record margin-bottom-075">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
-            </svg><span class="margin-left-05">Delete</span>
+            </svg>Delete
           </button>
         </div>
       </div>
     </div>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
-      </svg><span class="margin-left-05">Add another name server</span>
+      </svg>Add another name server
     </button>
 
     {% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'

src/registrar/templates/domain_org_name_address.html

@@ -42,7 +42,7 @@ <h1>Organization name and mailing address </h1>
 
     {% input_with_errors form.state_territory %}
 
-    {% with add_class="usa-input--small" %}
+    {% with add_class="usa-input--small" sublabel_text="Enter a zip code in the required format, like 12345 or 12345-6789." %}
       {% input_with_errors form.zipcode %}
     {% endwith %}
 

src/registrar/templates/domain_request_org_contact.html

@@ -33,7 +33,7 @@ <h2>What is the name and mailing address of the organization you represent?</h2>
 
     {% input_with_errors forms.0.state_territory %}
 
-    {% with add_class="usa-input--small" %}
+    {% with add_class="usa-input--small" sublabel_text="Enter a zip code in the required format, like 12345 or 12345-6789." %}
       {% input_with_errors forms.0.zipcode %}
     {% endwith %}
 

src/registrar/templates/domain_suborganization.html

@@ -1,7 +1,7 @@
 {% extends "domain_base.html" %}
 {% load static field_helpers%}
 
-{% block title %}Suborganization{% endblock %}
+{% block title %}Suborganization{% if suborganization_name %} | suborganization_name{% endif %} | {% endblock %}
 
 {% block domain_content %}
     {# this is right after the messages block in the parent template #}

src/registrar/templates/domain_users.html

@@ -21,7 +21,7 @@ <h1>Domain managers</h1>
   </ul>
 
   {% if domain.permissions %}
-  <section class="section--outlined">
+  <section class="section-outlined">
   <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
     <h2 class> Domain managers </h2>
     <caption class="sr-only">Domain managers</caption>
@@ -112,7 +112,7 @@ <h2 class> Domain managers </h2>
   </section>
 
   {% if domain.invitations.exists %}
-  <section class="section--outlined">
+  <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>