Make sign in page consistent with prototype

    There's an issue with using arbitrary action urls and govuk_button_to or
    button_to when passing a block: url_for is called to generate the form action.
    It seems passing an aribtrary path and a block is not possible.
    Hence the form plain HTML to render the Sign in button with an SVG inside it.

app/views/sign_in/new.html.erb

@@ -1,17 +1,26 @@
-<% if DfESignIn.bypass? %>
-  <%=
-    govuk_button_to(
-      "Sign in with DSI bypass",
-      "/auth/developer",
-      method: :post
-    )
-  %>
-<% else %>
-  <%=
-    govuk_button_to(
-      "Sign in with DSI",
-      "/auth/dfe",
-      method: :post
-    )
-  %>
-<% end %>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-l">Sign in</h1>
+
+    <p class="govuk-body">
+      You can use this service if you’re:
+    </p>
+    <ul class="govuk-list govuk-list--bullet">
+      <li>
+        waiting for the result of a DBS check for a new employee
+      </li>
+      <li>
+        checking the status of an employee who worked in a school or college less than 3 months ago
+      </li>
+    </ul>
+
+    <%= form_with url: (DfESignIn.bypass? ? "/auth/developer" : "/auth/dfe") do |f| %>
+      <button type="submit" class="govuk-button govuk-button--start">
+        <%= DfESignIn.bypass? ? "Sign in with DSI bypass" : "Sign in" %>
+        <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+          <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+        </svg>
+      </button>
+    <% end %>
+  </div>
+</div>

spec/support/system/authentication_steps.rb

@@ -25,6 +25,6 @@ def when_i_visit_the_sign_in_page
   end
 
   def and_click_the_dsi_sign_in_button
-    click_button "Sign in with DSI"
+    click_button "Sign in"
   end
 end