From 2d717b030742f291c8b3150c9bf559f802c861ec Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Fri, 26 Jan 2024 12:38:24 -0500
Subject: [PATCH] css refactor

---
 src/registrar/assets/sass/_theme/_lists.scss     | 14 ++++++++++++++
 .../assets/sass/_theme/_register-form.scss       | 16 ++++++++++++++--
 src/registrar/assets/sass/_theme/styles.scss     |  1 +
 src/registrar/templates/application_review.html  |  2 +-
 .../templates/includes/summary_item.html         |  4 ++--
 5 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/registrar/assets/sass/_theme/_lists.scss

diff --git a/src/registrar/assets/sass/_theme/_lists.scss b/src/registrar/assets/sass/_theme/_lists.scss
new file mode 100644
index 000000000..b97abd569
--- /dev/null
+++ b/src/registrar/assets/sass/_theme/_lists.scss
@@ -0,0 +1,14 @@
+@use "uswds-core" as *;
+
+dt {
+    color: color('primary-dark');
+    margin-top: units(2);
+    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;
+}
+dd {
+    margin-left: 0;
+}
+
diff --git a/src/registrar/assets/sass/_theme/_register-form.scss b/src/registrar/assets/sass/_theme/_register-form.scss
index d78bc512a..7c93f0a10 100644
--- a/src/registrar/assets/sass/_theme/_register-form.scss
+++ b/src/registrar/assets/sass/_theme/_register-form.scss
@@ -6,13 +6,15 @@
   margin-top: units(-1);
 }
 
-  //Tighter spacing when H2 is immediatly after H1
+// Tighter spacing when h2 is immediatly after h1
 .register-form-step .usa-fieldset:first-of-type h2:first-of-type,
 .register-form-step h1 + h2 {
   margin-top: units(1);
 }
 
-.register-form-step h3:not(.text-base-darkest) {
+// register-form-review-header 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);
@@ -23,6 +25,16 @@
   }
 }
 
+h3.register-form-review-header {
+  color: color('primary-dark');
+  margin-top: units(2);
+  margin-bottom: 0;
+  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;
+}
+
 .register-form-step h4 {
   margin-bottom: 0;
 
diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss
index 8a2e1d2d3..0239199e7 100644
--- a/src/registrar/assets/sass/_theme/styles.scss
+++ b/src/registrar/assets/sass/_theme/styles.scss
@@ -10,6 +10,7 @@
 --- Custom Styles ---------------------------------*/
 @forward "base";
 @forward "typography";
+@forward "lists";
 @forward "buttons";
 @forward "forms";
 @forward "fieldsets";
diff --git a/src/registrar/templates/application_review.html b/src/registrar/templates/application_review.html
index b6d37f6e3..7a4c1529b 100644
--- a/src/registrar/templates/application_review.html
+++ b/src/registrar/templates/application_review.html
@@ -112,7 +112,7 @@
           {% endwith %}
 
           {% if application.alternative_domains.all %}
-            <h3 class="margin-bottom-0 margin-top-2 text-base-darkest font-body-sm text-semibold">Alternative domains</h3>
+            <h3 class="register-form-review-header">Alternative domains</h3>
             <ul class="usa-list usa-list--unstyled margin-top-0">
               {% for site in application.alternative_domains.all %}
                 <li>{{ site.website }}</li>
diff --git a/src/registrar/templates/includes/summary_item.html b/src/registrar/templates/includes/summary_item.html
index d2bdae709..7c0d801ad 100644
--- a/src/registrar/templates/includes/summary_item.html
+++ b/src/registrar/templates/includes/summary_item.html
@@ -31,10 +31,10 @@
             {% if value %}
               <dl class="usa-list usa-list--unstyled margin-top-0">
                 {% for item in value %}
-                  <dt class="font-body-sm text-semibold margin-top-2">
+                  <dt>
                     Contact {{forloop.counter}}
                   </dt>
-                  <dd class="margin-left-0">
+                  <dd>
                     {% include "includes/contact.html" with contact=item %}
                   </dd>
                 {% endfor %}