CRS-1977 - Design Adjustments (#731)

ministryofjustice · Jun 12, 2024 · ee65b63 · ee65b63
1 parent 0b1068e
commit ee65b63
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 42 deletions.
diff --git a/server/routes/viewRoutes.test.ts b/server/routes/viewRoutes.test.ts
@@ -453,15 +453,14 @@ describe('View journey routes tests', () => {
         .expect(200)
         .expect(res => {
           const $ = cheerio.load(res.text)
-          expect($('[data-qa=prisoner-name]').text()).toStrictEqual('Release dates')
+          expect($('[data-qa=calculation-title]').text()).toStrictEqual('Calculation details')
           expect($('[data-qa=calculation-date]').text()).toStrictEqual('01 January 2022')
           expect($('[data-qa=calculation-reason]').text()).toStrictEqual('Some reason')
           expect($('[data-qa=calculation-source]').text()).toStrictEqual('NOMIS')
-          expect($('[data-qa=release-dates-title]').text()).toStrictEqual('Release dates')
+          expect($('[data-qa=release-dates-title]').text()).toContain('Release dates')
           expect($('[data-qa=calculation-date-title]').text()).toStrictEqual('Date of calculation')
           expect($('[data-qa=calculation-reason-title]').text()).toStrictEqual('Calculation reason')
           expect($('[data-qa=calculation-source-title]').text()).toStrictEqual('Source')
-          expect($('[data-qa=calculation-details-title]').text()).toStrictEqual('Calculation details')
           expect($('[data-qa=HDCED-date]').text().trim()).toContain('Sunday, 12 May 2024')
           expect($('[data-qa=HDCED-short-name]').text().trim()).toContain('HDCED')
           expect($('[data-qa=HDCED-full-name]').text().trim()).toStrictEqual('Home detention curfew eligibility date')

diff --git a/server/views/pages/components/approved-summary-dates-card/template.njk b/server/views/pages/components/approved-summary-dates-card/template.njk
@@ -20,12 +20,9 @@
     </div>
 {% endmacro %}
 
-<div class="custom-card">
-    <div class="custom-card-main">
-        <dl class="govuk-summary-list">
-            {%  for approvedDate in approvedSummaryDatesCardModel.approvedDates %}
-                {{ approvedDateLine(approvedDate, approvedSummaryDatesCardModel.showActions, approvedSummaryDatesCardModel.actionConfig) }}
-            {% endfor %}
-        </dl>
-    </div>
-</div>
+
+<dl class="govuk-summary-list">
+    {%  for approvedDate in approvedSummaryDatesCardModel.approvedDates %}
+        {{ approvedDateLine(approvedDate, approvedSummaryDatesCardModel.showActions, approvedSummaryDatesCardModel.actionConfig) }}
+    {% endfor %}
+</dl>
diff --git a/server/views/pages/components/calculation-summary-dates-card/template.njk b/server/views/pages/components/calculation-summary-dates-card/template.njk
@@ -19,15 +19,11 @@
     <p class="govuk-body" data-qa="None-date"></p>
 {% endmacro %}
 
-<div class="custom-card">
-    <div class="custom-card-main">
-        <dl class="govuk-summary-list">
-            {%  for releaseDate in calculationSummaryDatesCardModel.releaseDates %}
-                {{ releaseDateLine(releaseDate) }}
-            {% endfor %}
-            {% if calculationSummaryDatesCardModel.showNoDatesApply %}
-                {{ releaseNoDateLine() }}
-            {% endif %}
-        </dl>
-    </div>
-</div>
+<dl class="govuk-summary-list">
+    {%  for releaseDate in calculationSummaryDatesCardModel.releaseDates %}
+        {{ releaseDateLine(releaseDate) }}
+    {% endfor %}
+    {% if calculationSummaryDatesCardModel.showNoDatesApply %}
+        {{ releaseNoDateLine() }}
+    {% endif %}
+</dl>
diff --git a/server/views/pages/manualEntry/confirmation.njk b/server/views/pages/manualEntry/confirmation.njk
@@ -28,15 +28,16 @@
                class="govuk-link govuk-link--no-visited-state" data-qa="add-another-release-date-link">Add another release date</a>
             </p>
         </div>
-    </div>
-    <div>
-        <h2 class="govuk-heading-m">Confirm and save to NOMIS</h2>
-        <p class="govuk-body">By saving this calculation you are confirming that, to the best of your knowledge, it is
-            correct. These dates will be saved in NOMIS as a manual calculation.</p>
-        {{ govukButton({
-            text: "Confirm and save to NOMIS",
-            href: "/calculation/" + prisonerDetail.offenderNo + "/manual-entry/save",
-            attributes: { 'data-qa': 'submit-to-nomis' }
-        }) }}
+
+        <div class="govuk-grid-column-two-thirds">
+            <h2 class="govuk-heading-m">Confirm and save to NOMIS</h2>
+            <p class="govuk-body">By saving this calculation you are confirming that, to the best of your knowledge, it is
+                correct. These dates will be saved in NOMIS as a manual calculation.</p>
+            {{ govukButton({
+                text: "Confirm and save to NOMIS",
+                href: "/calculation/" + prisonerDetail.offenderNo + "/manual-entry/save",
+                attributes: { 'data-qa': 'submit-to-nomis' }
+            }) }}
+        </div>
     </div>
 {% endblock %}
diff --git a/server/views/pages/partials/calculationSummary/summarySection.njk b/server/views/pages/partials/calculationSummary/summarySection.njk
@@ -15,15 +15,31 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
-        <h2 class="govuk-heading-l govuk-!-margin-top-4">Release dates</h2>
-        {{ calculationSummaryDatesCard(calculationSummaryDatesCardModel) }}
+        <div class="govuk-summary-card">
+          <div class="govuk-summary-card__title-wrapper">
+            <h2 class="govuk-summary-card__title" data-qa="release-dates-title">
+              Release dates
+            </h2>
+          </div>
+          <div class="govuk-summary-card__content">
+            {{ calculationSummaryDatesCard(calculationSummaryDatesCardModel) }}
+          </div>
+        </div>
     </div>
 </div>
 {% if model.approvedDates %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-three-quarters">
-            <h2 class="govuk-heading-l govuk-!-margin-top-4">Manual dates</h2>
-            {{ approvedSummaryDatesCard(approvedSummaryDatesCardModel) }}
+            <div class="govuk-summary-card">
+              <div class="govuk-summary-card__title-wrapper">
+                <h2 class="govuk-summary-card__title" data-qa=" manual-dates-title">
+                  Manual dates
+                </h2>
+              </div>
+              <div class="govuk-summary-card__content">
+                {{ approvedSummaryDatesCard(approvedSummaryDatesCardModel) }}
+              </div>
+            </div>
         </div>
     </div>
 {% endif %}

diff --git a/server/views/pages/view/nomisCalculationSummary.njk b/server/views/pages/view/nomisCalculationSummary.njk
@@ -21,9 +21,8 @@
 {% block content %}
     <div class="govuk-grid-row">
        <div class="govuk-grid-column-three-quarters">
-           <h1 class="govuk-heading-xl govuk-!-margin-bottom-6" data-qa="prisoner-name">Release dates</h1>
+           <h1 class="govuk-heading-xl govuk-!-margin-bottom-6" data-qa="calculation-title">Calculation details</h1>
           <div class="moj-width-container">
-             <h3 class="govuk-heading-m govuk-!-margin-bottom-2" data-qa="calculation-details-title">Calculation details</h3>
                  <div class="govuk-grid-row">
                      <div class="govuk-grid-column-two-thirds ">
                          <dl class="govuk-summary-list govuk-summary-list--no-border govuk-!-margin-bottom-2">
@@ -44,8 +43,16 @@
                  </div>
           </div>
           <br>
-          <h2 class="govuk-heading-l govuk-!-margin-top-4" data-qa="release-dates-title">Release dates</h2>
-          {{ calculationSummaryDatesCard(calculationSummaryDatesCardModel) }}
+          <div class="govuk-summary-card">
+                <div class="govuk-summary-card__title-wrapper">
+                  <h2 class="govuk-summary-card__title" data-qa="release-dates-title">
+                    Release dates
+                  </h2>
+                </div>
+                <div class="govuk-summary-card__content">
+                  {{ calculationSummaryDatesCard(calculationSummaryDatesCardModel) }}
+                </div>
+          </div>
     </div>
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">