Adjust spacing for definition list elements in Survivor Benefit

src/applications/survivor-dependent-education-benefit/22-5490/components/DirectDepositViewField.jsx

@@ -2,52 +2,42 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { obfuscate, titleCase } from '../helpers';
 
-export default function DirectDepositViewField({ formData }) {
+function DirectDepositViewField({ formData }) {
   const bankAccount = formData?.bankAccount || {};
-  const {
-    accountType,
-    accountNumber,
-    // financialInstitutionName,
-    routingNumber,
-  } = bankAccount;
+  const { accountType, accountNumber, routingNumber } = bankAccount;
 
   const accountTypeDisplay = accountType
     ? `${titleCase(accountType)} account`
     : 'Account';
 
   return (
-    <>
+    <div className="survivor-benefit-direct-deposit">
       <p className="vads-u-margin-bottom--4">
         <strong>Note</strong>: Your bank account information is what we
         currently have on file for you. Please ensure it is correct.
       </p>
       <div className="va-address-block vads-u-margin-left--0">
-        <h5>{`${accountTypeDisplay}`}</h5>
-        <dl className="meb-definition-list">
-          {/* <dt>Bank name:</dt>
-          <dd>{financialInstitutionName}</dd> */}
-
-          <dt className="meb-definition-list_term toe-definition-list_term--normal">
+        <h5>{accountTypeDisplay}</h5>
+        <dl className="survivor-benefit-definition-list">
+          <dt className="survivor-benefit-definition-list_term">
             Bank routing number:
           </dt>
-          <dd className="meb-definition-list_definition">
+          <dd className="survivor-benefit-definition-list_definition">
             {obfuscate(routingNumber)}
           </dd>
-
-          <dt className="meb-definition-list_term toe-definition-list_term--normal">
+          <dt className="survivor-benefit-definition-list_term">
             Bank account number:
           </dt>
-          <dd className="meb-definition-list_definition">
+          <dd className="survivor-benefit-definition-list_definition">
             {obfuscate(accountNumber)}
           </dd>
         </dl>
       </div>
-    </>
+    </div>
   );
 }
 
 DirectDepositViewField.propTypes = {
-  // formData is expected to be an object
   formData: PropTypes.shape({
     bankAccount: PropTypes.shape({
       accountType: PropTypes.string,
@@ -56,3 +46,5 @@ DirectDepositViewField.propTypes = {
     }),
   }).isRequired,
 };
+
+export default DirectDepositViewField;

src/applications/survivor-dependent-education-benefit/22-5490/components/ObfuscateReviewField.jsx

@@ -3,11 +3,20 @@ import PropTypes from 'prop-types';
 import { obfuscate } from '../helpers';
 
 function ObfuscateReviewField({ children, uiSchema }) {
+  const { formData } = children.props; // Extract form data
+  const maskedValue = obfuscate(formData); // Generate obfuscated value
+  const visibleLastDigits = formData.slice(-4); // Extract last 4 digits for accessibility
+
   return (
-    <div className="review-row">
-      <dt>{uiSchema['ui:title']}</dt>
-      <dd>{obfuscate(children.props.formData)}</dd>
-    </div>
+    <dl className="survivor-benefit-definition-list survivor-benefit-obfuscate-review">
+      <dt className="survivor-benefit-definition-list_term">
+        {uiSchema['ui:title']}
+      </dt>
+      <dd className="survivor-benefit-definition-list_definition">
+        <span aria-hidden="true">{maskedValue}</span>
+        <span className="sr-only">Ending in {visibleLastDigits}</span>
+      </dd>
+    </dl>
   );
 }
 
@@ -17,4 +26,5 @@ ObfuscateReviewField.propTypes = {
     'ui:title': PropTypes.string.isRequired,
   }).isRequired,
 };
+
 export default ObfuscateReviewField;

src/applications/survivor-dependent-education-benefit/22-5490/sass/survivor-dependent-education-benefit-22-5490.scss

@@ -120,3 +120,57 @@ $error-left-padding-width: 1.5rem;
   vertical-align: middle;
   padding-left: 2rem;
 }
+
+// Base styles for definition lists in Survivor Benefit Application
+.survivor-benefit-definition-list {
+  margin: 0;
+  padding: 0;
+
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  & > dt {
+    float: left;
+    clear: left;
+    font-weight: bold;
+    margin: 0 0 0.125rem; // Further reduce bottom margin for tighter spacing
+  }
+
+  & > dd {
+    float: left;
+    margin: 0 0 0.125rem 1em; // Further reduce bottom margin and adjust left spacing
+    white-space: nowrap; // Prevents wrapping for obfuscated text
+  }
+
+  // Modifier for lighter-weight terms
+  &--normal > dt {
+    font-weight: normal;
+  }
+}
+
+// Scoped styles for DirectDepositViewField
+.survivor-benefit-direct-deposit {
+  .survivor-benefit-definition-list_term {
+    margin-bottom: 0.125rem; // Even tighter space between terms and definitions
+  }
+
+  .survivor-benefit-definition-list_definition {
+    font-size: 1rem;
+    margin-bottom: 0.125rem; // Match the reduced spacing
+  }
+}
+
+// Scoped styles for ObfuscateReviewField
+.survivor-benefit-obfuscate-review {
+  .survivor-benefit-definition-list_term {
+    color: var(--vads-color-gray-dark);
+  }
+
+  .survivor-benefit-definition-list_definition {
+    font-size: 1rem;
+    margin-bottom: 0.125rem; // Match the reduced spacing
+  }
+}