FS-2155, FS-2157: Fix score styling to match proto (#130)

communitiesuk · Jan 11, 2023 · ebbfe24 · ebbfe24
1 parent 325c8a0
commit ebbfe24
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/app/assess/templates/macros/scores_justification.html b/app/assess/templates/macros/scores_justification.html
@@ -6,12 +6,18 @@
 
 <div class="govuk-grid-column-full s26-scoring">
     {% if latest_score %}
-    <div class="s26-score-group" id="anchor">
+    <div class="score-group" id="score">
         <h2 class="govuk-heading-m">Current score: {{ latest_score['score'] }}</h2>
         <div>
-            <p class="govuk-body-s"><strong>Rationale: </strong>{{ latest_score.justification }}</p>
-            <p class="govuk-body-s"><strong>{% if latest_score.user_full_name %}{{ latest_score.user_full_name }}, {% endif %}</strong> {{ latest_score.highest_role }},
-                {% if latest_score.user_email %}{{ latest_score.user_email }}{% endif %}</p>
+            <p class="govuk-body-m"><strong>Rationale: </strong>{{ latest_score.justification }}</p>
+            <p class="govuk-body-s">
+                <strong>
+                    {% if latest_score.user_full_name %}{{ latest_score.user_full_name }} {% endif %}
+                </strong> ({{ latest_score.highest_role|all_caps_to_human }})
+                {% if latest_score.user_email %}
+                    {{ latest_score.user_email }}
+                {% endif %}
+            </p>
             <p class="govuk-body-s"> <strong>Date/time:</strong> {{ latest_score.date_created|datetime_format("%d/%m/%Y at %H:%M") }}</p>
         </div>
     </div>
@@ -27,29 +33,29 @@ <h2 class="govuk-heading-m">Current score: {{ latest_score['score'] }}</h2>
             {% for score in score_list %}
             <p><strong>Score: </strong>{{ score["score"] }}</p>
             <p><strong>Rationale: </strong>{{ score["justification"] }}</p>
-            <p class="govuk-body-s"><strong>{{ score["user_full_name"] }}: </strong> {{ score["highest_role"] }}, {{ score["user_email"] }}</p>
+            <p class="govuk-body-s"><strong>{{ score["user_full_name"] }}: </strong> {{ score["highest_role"]|all_caps_to_human }}, {{ score["user_email"] }}</p>
             <p class="govuk-body-s"><strong>Date/time:</strong> {{ score["date_created"]|datetime_format("%d/%m/%Y at %H:%M") }}</p>
             <hr>
             {% endfor %}
           </div>
         </div>
       </details>
-
     {% endif %}
     {% endif %}
 
     {% if scores_submitted %}
-    {{govukButton
-        ({
-            'text': 'Rescore',
-            'type': 'submit',
-            'href': url_for('assess_bp.display_sub_criteria', application_id=application_id, sub_criteria_id=sub_criteria_id, theme_id='score')
-        })
-    }}
+        {{govukButton
+            ({
+                'text': 'Rescore',
+                'type': 'submit',
+                'classes': 'secondary-button govuk-!-margin-top-4' if not score_list else 'secondary-button',
+                'href': url_for('assess_bp.display_sub_criteria', application_id=application_id, sub_criteria_id=sub_criteria_id, theme_id='score')
+            })
+        }}
     {% else %}
     <form method="POST">
         {{ form.csrf_token }}
-        <div class="govuk-form-group">
+        <div class="govuk-form-group govuk-!-margin-top-4">
             {% if latest_score %}
             <h2 class="govuk-heading-m">Rescore</h2>
             {% else %}
@@ -64,9 +70,9 @@ <h2 class="govuk-heading-m">Score</h2>
             {{justification(form.justification.id, justification_error)}}
         </div>
         {% if latest_score %}
-        {{govukButton({'text': 'Rescore', 'type':'submit'})}}
+            {{govukButton({'text': 'Save a new score', 'type':'submit', 'classes': 'primary-button'})}}
         {% else %}
-        {{govukButton({'text': 'Save score', 'type':'submit', 'classes':'primary-button'})}}
+            {{govukButton({'text': 'Save score', 'type':'submit', 'classes':'primary-button'})}}
         {% endif %}
     </form>
     {% endif %}

diff --git a/app/static/src/styles/govuk-overrides.css b/app/static/src/styles/govuk-overrides.css
@@ -204,3 +204,21 @@
 .fsd-login-banner-content {
     color:black;
 }
+
+.score-group h2 {
+    background-color: #1d70b8;
+    color: #ffffff;
+    padding: 20px 0px 20px 25px;
+    margin: 0px;
+}
+
+.score-group div {
+    background-color: #ffffff;
+    padding: 25px 25px 6px;
+    border: 2px #1d70b8 solid;
+}
+
+.score-group div .govuk-body-s {
+    color: #505a5f;
+    margin-top: -10px;
+}