clean up summary boxes

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

@@ -516,10 +516,6 @@ input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-too
     max-width: 68ex;
 }
 
-.usa-summary-box__dhs-color {
-    color: $dhs-blue-70;
-}
-
 details.dja-detail-table {
     display: inline-table;
     background-color: var(--body-bg);
@@ -812,21 +808,6 @@ div.dja__model-description{
     text-decoration: underline !important;
 }
 
-//-- Override some styling for the USWDS summary box (per design guidance for ticket #2055)
-// Keep it scoped to admin.scss
-.dashboard {
-    .usa-summary-box {
-        background: #{$dhs-blue-10};
-        border-color: #{$dhs-blue-30};
-        max-width: 72ex;
-        word-wrap: break-word;
-    }
-
-    .usa-summary-box h3 {
-        color: #{$dhs-blue-60};
-    }
-}
-
 .module caption, .inline-group h2 {
     text-transform: capitalize;
 }

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

@@ -129,16 +129,6 @@ grid column to the max-width of the searchbar, which was calculated to be 33rem.
   word-break: break-word;
 }
 
-.dotgov-status-box {
-  background-color: color('primary-lightest'); 
-  border-color: color('accent-cool-lighter');
-}
-
-.dotgov-status-box--action-need {
-  background-color: color('warning-lighter'); 
-  border-color: color('warning');
-}
-
 footer {
   border-top: 1px solid color('primary-darker');
 }

src/registrar/assets/src/sass/_theme/_summary-box.scss

@@ -1,17 +1,12 @@
-// USWDS override to basically match the header size to a standard h3 size
+@use "uswds-core" as *;
-// This get complicated because USWDS sets a size on the container then a relative
+
-// size on the header. We'll need to reset the container size, override the header size,
-// then 'fix' the content size.
 .usa-summary-box {
-    font-size: 1rem;
+    background-color: color('primary-lightest'); 
-    .usa-summary-box__heading {
+    border-color: color('accent-cool-lighter');
-        // 1.17em / 18.72px
-        @include typeset('sans', 'sm', 6);
-    }
-    p, li, dd {
-        // 1.06rem / 16.96px
-        @include typeset('sans', 'sm', 5);
-    }
 }
   
+.usa-summary-box--action-needed {
+    background-color: color('warning-lighter'); 
+    border-color: color('warning');
+}
   

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

@@ -10,17 +10,19 @@ address,
   max-width: measure(5);
 }
 
+h1, h2, h3, h4, h5, h6 {
+  color: color('primary-darker');
+}
+
 h1 {
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
-  color: color('primary-darker');
 }
 
 h2 {
   font-weight: font-weight('semibold');
   line-height: line-height('heading', 3);
   margin: units(4) 0 units(1);
-  color: color('primary-darker');
 }
 
 .header--body {

src/registrar/templates/django/admin/domain_delete_confirmation.html

@@ -8,7 +8,7 @@
     aria-labelledby="summary-box-description"
     >
         <div class="usa-summary-box__body">
-            <h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
+            <h3 class="usa-summary-box__heading" id="summary-box-description">
             When a domain is deleted:
             </h3>
             <div class="usa-summary-box__text">

src/registrar/templates/django/admin/domain_delete_selected_confirmation.html

@@ -9,7 +9,7 @@
     aria-labelledby="summary-box-description"
     >
         <div class="usa-summary-box__body">
-            <h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
+            <h3 class="usa-summary-box__heading">
             When a domain is deleted:
             </h3>
             <div class="usa-summary-box__text">

src/registrar/templates/domain_detail.html

@@ -23,19 +23,15 @@
   <div class="margin-top-4 tablet:grid-col-10">
     <h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
     <div
-        class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
+        class="usa-summary-box padding-y-2 margin-bottom-1"
         role="region"
         aria-labelledby="summary-box-key-information"
     >
       <div class="usa-summary-box__body">
-        <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+        <div class="usa-summary-box__text padding-top-0"
-          id="summary-box-key-information"
         > 
-          <span class="text-bold text-primary-darker">
+          <p class="font-sans-md margin-y-0 text-primary-darker">
-            Status:
+            <strong>Status:</strong>
-          </span>
-          <span class="text-primary-darker">
-
             {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
             {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
               Expired
@@ -46,9 +42,10 @@
             {% else %}
               {{ domain.state|title }}
             {% endif %}
-          </span>
+          </p>
+
           {% if domain.get_state_help_text %}
-            <div class="padding-top-1 text-primary-darker">
+            <p class="margin-y-0 text-primary-darker">
               {% if has_domain_renewal_flag and domain.is_expiring and is_domain_manager %}
                 This domain will expire soon. <a href="/not-available-yet">Renew to maintain access.</a>
               {% elif has_domain_renewal_flag and domain.is_expiring and is_portfolio_user %}
@@ -56,13 +53,11 @@
               {% else %}
                 {{ domain.get_state_help_text }}
               {% endif %}
-            </div>
-          {% endif %}
             </p>
+          {% endif %}
+          </div>
       </div>
     </div>    
-    <br>
-    
 
     {% include "includes/domain_dates.html" %}
 

src/registrar/templates/domain_dnssec.html

@@ -33,17 +33,17 @@
 
   <form class="usa-form usa-form--text-width" method="post">
     {% csrf_token %}
-    {% if has_dnssec_records %}
+
     <div
-        class="usa-summary-box dotgov-status-box padding-top-0" 
+        class="usa-summary-box " 
         role="region"
         aria-labelledby="Important notes on disabling DNSSEC"
     >
       <div class="usa-summary-box__body">
-        <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+        <h2 class="usa-summary-box__heading"
-           id="summary-box-key-information"
+        >To fully disable DNSSEC</h2>
-        >
+
-        <h2>To fully disable DNSSEC </h2>
+        <div class="usa-summary-box__text">
           <ul class="usa-list">
             <li>Click “Disable DNSSEC”  below.</li>
             <li>Wait until the Time to Live (TTL) expires on your DNSSEC records managed by your DNS hosting provider. This is often less than 24 hours, but confirm with your provider.</li>
@@ -51,6 +51,8 @@
           </ul>
           <p><strong>Warning:</strong> If you disable DNSSEC at your DNS hosting provider before TTL expiration, this may cause your domain to appear offline.</p>
         </div>
+        
+      </div>
     </div>
     <h2>DNSSEC is enabled on your domain</h2>
     <a
@@ -60,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">
@@ -69,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/domain_request_awaiting_review.html

@@ -1,12 +1,12 @@
 {% load url_helpers %}
 
-<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold" > 
+<h2 class="margin-top-0 margin-bottom-2 text-semibold" > 
   Next steps in this process
 </h2>
 <p>We received your .gov domain request. Our next step is to review your request. This usually takes 30 business days. We’ll email you if we have questions and when we complete our review. <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'contact' %}">Contact us with any questions</a>.</p>
 
 {% if show_withdraw_text %}
-  <h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold">
+  <h2 class="margin-top-0 margin-bottom-2 text-semibold">
     Need to make changes?
   </h2>
 

src/registrar/templates/includes/profile_information.html

@@ -12,7 +12,7 @@
       Your contact information
     </h3>
     <div class="usa-summary-box__text">
-      <ul>
+      <ul class="usa-list">
         <li>Full name: <b>{{ user.get_formatted_name }}</b></li>
         <li>Organization email: <b>{{ user.email }}</b></li>
         <li>Title or role in your organization: <b>{{ user.title }}</b></li>

src/registrar/templates/includes/request_status_manage.html

@@ -39,22 +39,20 @@
 
             {% block status_summary %}
             <div
-                class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2" 
+                class="usa-summary-box margin-top-3 padding-y-2 margin-bottom-1" 
                 role="region"
                 aria-labelledby="summary-box-key-information"
             >
                 <div class="usa-summary-box__body">
-                <p class="usa-summary-box__heading font-sans-md margin-bottom-0" 
+                    <div class="usa-summary-box__text padding-top-0" 
-                    id="summary-box-key-information"
                     > 
-                <span class="text-bold text-primary-darker">
+                        <p class="font-sans-md margin-y-0 text-primary-darker">
-                    Status:
+                            <strong>Status:</strong>
-                </span>
                             {{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
                         </p>
                     </div>
                 </div>
-            <br>
+            </div>
             {% endblock status_summary %}
             
             {% block status_metadata %}
@@ -142,7 +140,7 @@
 
         <div class="grid-col maxw-fit-content desktop:grid-offset-2 ">
             {% block request_summary_header %}
-            <h2 class="text-primary-darker"> Summary of your domain request </h2> 
+            <h2> Summary of your domain request </h2> 
             {% endblock request_summary_header%}
 
             {% block request_summary %}