design tweaks

app/views/form/_interruption_screen_question.html.erb

@@ -4,7 +4,7 @@
 ) do %>
   <%= display_informative_text(informative_text, case_log) %>
   <%= f.govuk_radio_buttons_fieldset question.id.to_sym,
-    legend: legend(question, page_header, conditional),
+    legend: { text: question.header },
     hint: { text: question.hint_text&.html_safe } do %>
     <% question.answer_options.map do |key, options| %>
       <% if key.starts_with?("divider") %>
@@ -19,4 +19,5 @@
       <% end %>
     <% end %>
   <% end %>
+  <%= f.govuk_submit "Save and continue", accesskey: "s", class: "app-button--inverse govuk-!-margin-bottom-0" %>
 <% end %>

app/views/form/page.html.erb

@@ -50,7 +50,9 @@
         <% if @case_log.form.is_last_question?(@page, @subsection, @case_log) %>
           <%= f.govuk_submit "Submit lettings log", accesskey: "s" %>
         <%else %>
+          <% if !@page.id.include?("value_check") %>
             <%= f.govuk_submit "Save and continue", accesskey: "s"  %>
+          <% end %>
         <%end %>
       </div>
     </div>

app/webpacker/styles/_button.scss

@@ -0,0 +1,31 @@
+$app-button-shadow-size: $govuk-border-width-form-element;
+$app-button-inverse-background-colour: govuk-colour("white");
+$app-button-inverse-foreground-colour: $govuk-brand-colour;
+$app-button-inverse-shadow-colour: govuk-shade($app-button-inverse-foreground-colour, 30%);
+$app-button-inverse-hover-background-colour: govuk-tint($app-button-inverse-foreground-colour, 90%);
+
+.app-button--inverse,
+.app-button--inverse:link,
+.app-button--inverse:visited {
+  color: $app-button-inverse-foreground-colour;
+  background-color: $app-button-inverse-background-colour;
+  box-shadow: 0 $app-button-shadow-size 0 $app-button-inverse-shadow-colour;
+}
+
+.app-button--inverse:hover {
+  color: $app-button-inverse-foreground-colour;
+  background-color: $app-button-inverse-hover-background-colour;
+}
+
+.app-button--inverse:focus:not(:hover) {
+  color: $govuk-focus-text-colour;
+  background-color: $govuk-focus-colour;
+}
+
+.app-button--inverse:active,
+.app-button--inverse:focus {
+  border-color: $govuk-focus-colour;
+  color: $app-button-inverse-foreground-colour;
+  background-color: $app-button-inverse-hover-background-colour;
+  box-shadow: inset 0 0 0 2px $govuk-focus-colour;
+}

app/webpacker/styles/application.scss

@@ -13,6 +13,7 @@ $govuk-global-styles: true;
 @import "~govuk-frontend/govuk/all";
 
 @import "accessible-autocomplete";
+@import "button";
 @import "figure";
 @import "input";
 @import "related-navigation";

config/locales/en.yml

@@ -143,7 +143,7 @@ en:
 
   soft_validations:
     net_income:
-      hint_text: "This is based on the tenant’s work situation: <strong>%{ecstat1}</strong><br>The household income you have entered is <strong>%{earnings}</strong>"
+      hint_text: "This is based on the tenant’s work situation: <strong>%{ecstat1}</strong><br><br>The household income you have entered is <strong>%{earnings}</strong>"
       in_soft_min_range:
         message: "Net income is lower than expected based on the main tenant’s working situation. Are you sure this is correct?"
       in_soft_max_range: