Header refactor wip

src/registrar/assets/src/js/getgov/table-edit-member-domains.js

@@ -259,7 +259,7 @@ export class EditMemberDomainsTable extends BaseTable {
     // Append unassigned domains section
     if (this.removedDomains.length) {
       const unassignedHeader = document.createElement('h3');
-      unassignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+      unassignedHeader.classList.add('margin-bottom-1');
       unassignedHeader.textContent = 'Unassigned domains';
       domainAssignmentSummary.appendChild(unassignedHeader);
       domainAssignmentSummary.appendChild(unassignedDomainsList);
@@ -268,7 +268,7 @@ export class EditMemberDomainsTable extends BaseTable {
     // Append assigned domains section
     if (this.addedDomains.length) {
       const assignedHeader = document.createElement('h3');
-      assignedHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+      assignedHeader.classList.add('margin-bottom-1');
       assignedHeader.textContent = 'Assigned domains';
       domainAssignmentSummary.appendChild(assignedHeader);
       domainAssignmentSummary.appendChild(assignedDomainsList);
@@ -276,7 +276,7 @@ export class EditMemberDomainsTable extends BaseTable {
 
     // Append total assigned domains section
     const totalHeader = document.createElement('h3');
-    totalHeader.classList.add('header--body', 'text-primary', 'margin-bottom-1');
+    totalHeader.classList.add('margin-bottom-1');
     totalHeader.textContent = 'Total assigned domains';
     domainAssignmentSummary.appendChild(totalHeader);
     const totalCount = document.createElement('p');

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

@@ -271,9 +271,3 @@ abbr[title] {
 .maxw-fit-content {
   max-width: fit-content;
 }
-
-.summary-item__title {
-  // match h3 at 18.72px and semibold
-  font-size: 1.17em;
-  font-weight: 600;
-}

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

@@ -2,6 +2,14 @@
 @use "cisa_colors" as *;
 @use "typography" as *;
 
+// Normalize typography in forms
+.usa-form,
+.usa-form fieldset {
+  font-size: 1rem;
+  .usa-legend {
+    font-size: 1rem;
+  }
+}
 .usa-form .usa-button {
   margin-top: units(3);
 }
@@ -69,16 +77,6 @@ legend.float-left-tablet + button.float-right-tablet {
   }
 }
 
-.read-only-label {
-  @extend .h4--sm-05;
-  font-weight: bold;
-  color: color('primary-dark');
-}
-
-.read-only-value {
-  margin-top: units(0);
-}
-
 .bg-gray-1 .usa-radio {
   background: color('gray-1');
 }

src/registrar/assets/src/sass/_theme/_register-form.scss

@@ -12,11 +12,7 @@
   margin-top: units(1);
 }
 
-// header--body is used on the summary page and
-// should not be styled like the register form headers
 .register-form-step h3 {
-  color: color('primary-dark');
-  letter-spacing: $letter-space--xs;
   margin-top: units(3);
   margin-bottom: 0;
 

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

@@ -15,6 +15,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+  font-size: 2.125rem;
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
 }
@@ -23,35 +24,23 @@ h2 {
   margin: units(4) 0 units(1);
 }
 
-h3, h4 {
+h3, .h3 {
+  font-size: 1.25rem;
   font-weight: font-weight('semibold');
 }
 
-.header--body {
+h4, .h4 {
-  margin-top: units(2);
+  font-size: 1.15rem;
   font-weight: font-weight('semibold');
-  // The units mixin can only get us close, so it's between 
-  // hardcoding the value and using in markup
-  font-size: 16.96px;
-}
-
-.h4--sm-05 {
-  font-size: size('body', 'sm');
-  font-weight: normal;
-  color: color('primary');
-  margin-bottom: units(0.5);
-}
-
-// Normalize typography in forms
-.usa-form,
-.usa-form fieldset {
-  font-size: 1rem;
-  .usa-legend {
-    font-size: 1rem;
-  }
 }
 
 .p--blockquote {
   padding-left: units(1);
   border-left: 2px solid color('base-lighter');
 }
+
+.summary-item__title {
+  // match h3 at 18.72px and semibold
+  font-size: 1.25em;
+  font-weight: 600;
+}

src/registrar/templates/domain_dnssec.html

@@ -33,7 +33,7 @@
 
   <form class="usa-form usa-form--text-width" method="post">
     {% csrf_token %}
-
+    {% if has_dnssec_records %}
     <div
         class="usa-summary-box " 
         role="region"
@@ -62,7 +62,7 @@
       data-open-modal
       >Disable DNSSEC</a
     >
-
+    {% else %}
     <div id="enable-dnssec">
       <div class="usa-alert usa-alert--info">
         <div class="usa-alert__body">
@@ -71,7 +71,7 @@
       </div>
       <a href="{% url 'domain-dns-dnssec-dsdata' pk=domain.id %}" class="usa-button">Enable DNSSEC</a>
     </div>
-
+    {% endif %}
   </form>
 
   <div

src/registrar/templates/includes/input_read_only.html

@@ -3,7 +3,7 @@ Template include for read-only form fields
 {% endcomment %}
 
 
-<h4 class="read-only-label">{{ field.label }}</h4>
+<h4 class="margin-bottom-05">{{ field.label }}</h4>
 {% if label_description %}
     <p class="usa-hint margin-top-0 margin-bottom-05">{{ label_description }}</p>
 {% endif %}
@@ -11,4 +11,4 @@ Template include for read-only form fields
 This allows us to customize the displayed value. 
 For instance, Select fields will display the id by default. 
 {% endcomment %}
-<p class="read-only-value">{{ value|default:field.value }}</p>
+<p class="margin-top-0">{{ value|default:field.value }}</p>

src/registrar/templates/includes/portfolio_request_review_steps.html

@@ -46,7 +46,7 @@
         {% endwith %}
 
         {% if domain_request.alternative_domains.all %}
-            <h3 class="header--body text-primary-dark margin-bottom-0">Alternative domains</h3>
+            <h3 class="h4 margin-bottom-0">Alternative domains</h3>
             <ul class="usa-list usa-list--unstyled margin-top-0">
             {% for site in domain_request.alternative_domains.all %}
                 <li>{{ site.website }}</li>

src/registrar/templates/includes/request_review_steps.html

@@ -88,7 +88,7 @@
         {% endwith %}
 
         {% if domain_request.alternative_domains.all %}
-            <h3 class="header--body text-primary-dark margin-bottom-0">Alternative domains</h3>
+            <h3 class="h4 margin-bottom-0">Alternative domains</h3>
             <ul class="usa-list usa-list--unstyled margin-top-0">
             {% for site in domain_request.alternative_domains.all %}
                 <li>{{ site.website }}</li>
@@ -132,8 +132,8 @@
         {% with title=form_titles|get_item:step %}
             {% if domain_request.has_additional_details %}
                 {% include "includes/summary_item.html" with title="Additional Details" value=" " heading_level=heading_level editable=is_editable edit_link=domain_request_url %}
-                <h3 class="header--body text-primary-dark margin-bottom-0">CISA Regional Representative</h3>
+                <h4 class="margin-bottom-0">CISA Regional Representative</h4>
-                <ul class="usa-list usa-list--unstyled margin-top-0">
+                <ul class="usa-list usa-list--unstyled margin-top-05">
                     {% if domain_request.cisa_representative_first_name %}
                         <li>{{domain_request.cisa_representative_first_name}} {{domain_request.cisa_representative_last_name}}</li>
                     {% if domain_request.cisa_representative_email %}
@@ -144,8 +144,8 @@
                     {% endif %}
                 </ul>
 
-            <h3 class="header--body text-primary-dark margin-bottom-0">Anything else</h3>
+            <h4 class="margin-bottom-0">Anything else</h4>
-            <ul class="usa-list usa-list--unstyled margin-top-0">
+            <ul class="usa-list usa-list--unstyled margin-top-05">
                 {% if domain_request.anything_else %}
                     {{domain_request.anything_else}}
                 {% else %}

src/registrar/templates/includes/request_status_manage.html

@@ -198,7 +198,7 @@
 
             {# We always show this field even if None #}
             {% if DomainRequest %}
-                <h3 class="header--body text-primary-dark margin-bottom-0">CISA Regional Representative</h3>
+                <h4 class="margin-bottom-0">CISA Regional Representative</h4>
                 <ul class="usa-list usa-list--unstyled margin-top-0">
                     {% if DomainRequest.cisa_representative_first_name %}
                     {{ DomainRequest.get_formatted_cisa_rep_name }}
@@ -206,7 +206,7 @@
                     No
                     {% endif %}
                 </ul>
-                <h3 class="header--body text-primary-dark margin-bottom-0">Anything else</h3>
+                <h4 class="margin-bottom-0">Anything else</h4>
                 <ul class="usa-list usa-list--unstyled margin-top-0">
                     {% if DomainRequest.anything_else %}
                     {{DomainRequest.anything_else}}

src/registrar/templates/includes/summary_item.html

@@ -20,7 +20,7 @@
       </h3>
     {% endif %}
       {% if sub_header_text %}
-        <h4 class="header--body text-primary-dark margin-bottom-0">{{ sub_header_text }}</h4>
+        <h4 class="margin-bottom-0">{{ sub_header_text }}</h4>
       {% endif %}
       {% if permissions %}
         {% include "includes/member_permissions.html" with permissions=value %}
@@ -38,7 +38,7 @@
                 {% for item in value %}
                   <dt>
                   
-                 <h4 class="summary-item__title
+                 <h4 class="
              margin-bottom-05
              padding-right-1">
                       Contact {{forloop.counter}}
@@ -115,7 +115,7 @@
           {% endif %}
         {% endif %}
         {% if value.invitations.all %}
-          <h4 class="h4--sm-05">Invited domain managers</h4>
+          <h4 class="margin-bottom-05">Invited domain managers</h4>
           <ul class="usa-list usa-list--unstyled margin-top-0">
           {% for item in value.invitations.all %}
             <li>{{ item.email }}</li>

src/registrar/templates/portfolio_member_permissions.html

@@ -103,7 +103,7 @@
 
     <h3 class="
     margin-bottom-0
-    margin-top-3">Organization members</h3>
+    margin-top-4">Organization members</h3>
     {% with group_classes="usa-form-editable usa-form-editable--no-border bg-gray-1 padding-top-0" %}
       {% input_with_errors form.member_permission_admin %}
     {% endwith %}

src/registrar/templates/portfolio_members_add_new.html

@@ -76,7 +76,7 @@
 
     <h3 class="
     margin-bottom-0
-    margin-top-3">Organization members</h3>
+    margin-top-4">Organization members</h3>
     {% with group_classes="usa-form-editable usa-form-editable--no-border bg-gray-1 padding-top-0" %}
       {% input_with_errors form.member_permission_admin %}
     {% endwith %}

src/registrar/templates/portfolio_organization.html

@@ -37,8 +37,8 @@
             {% include "includes/required_fields.html" %}
             <form class="usa-form usa-form--large desktop:margin-top-4" method="post" novalidate>
                 {% csrf_token %}
-                <h4 class="read-only-label">Organization name</h4>
+                <h4 class="margin-bottom-05">Organization name</h4>
-                <p class="read-only-value">
+                <p class="margin-top-0">
                     {{ portfolio.federal_agency }}
                 </p>
                 {% input_with_errors form.address_line1 %}
@@ -53,8 +53,8 @@
                 </button>
             </form>
         {% else %}
-            <h4 class="read-only-label">Organization name</h4>
+            <h4 class="margin-bottom-05">Organization name</h4>
-            <p class="read-only-value">
+            <p class="margin-top-0">
                 {{ portfolio.federal_agency }}
             </p>
             {% if form.address_line1.value is not None %}

src/registrar/tests/test_views_portfolio.py

@@ -211,11 +211,11 @@ class TestPortfolio(WebTest):
             # Assert the response is a 200
             self.assertEqual(response.status_code, 200)
             # The label for Federal agency will always be a h4
-            self.assertContains(response, '<h4 class="read-only-label">Organization name</h4>')
+            self.assertContains(response, '<h4 class="margin-bottom-05">Organization name</h4>')
             # The read only label for city will be a h4
-            self.assertContains(response, '<h4 class="read-only-label">City</h4>')
+            self.assertContains(response, '<h4 class="margin-bottom-05">City</h4>')
             self.assertNotContains(response, 'for="id_city"')
-            self.assertContains(response, '<p class="read-only-value">Los Angeles</p>')
+            self.assertContains(response, '<p class="margin-top-0">Los Angeles</p>')
 
     @less_console_noise_decorator
     def test_portfolio_organization_page_edit_access(self):
@@ -236,10 +236,10 @@ class TestPortfolio(WebTest):
             # Assert the response is a 200
             self.assertEqual(response.status_code, 200)
             # The label for Federal agency will always be a h4
-            self.assertContains(response, '<h4 class="read-only-label">Organization name</h4>')
+            self.assertContains(response, '<h4 class="margin-bottom-05">Organization name</h4>')
             # The read only label for city will be a h4
-            self.assertNotContains(response, '<h4 class="read-only-label">City</h4>')
+            self.assertNotContains(response, '<h4 class="margin-bottom-05">City</h4>')
-            self.assertNotContains(response, '<p class="read-only-value">Los Angeles</p>')
+            self.assertNotContains(response, '<p class="margin-top-0">Los Angeles</p>')
             self.assertContains(response, 'for="id_city"')
 
     @less_console_noise_decorator