From 485d25b1202b32506f132f24889687e64a85fcbd Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Thu, 6 Feb 2020 13:36:17 +0000
Subject: [PATCH] Update start button on signed out homepage

---
 .../stylesheets/views/product-page.scss       | 66 +++++++++++--------
 app/templates/views/signedout.html            | 22 ++++---
 2 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss
index afc0d09bb..927379ff2 100644
--- a/app/assets/stylesheets/views/product-page.scss
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -1,3 +1,7 @@
+$product-page-blue: #005EA5;
+// See https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss#L24
+$button-shadow-size: $govuk-border-width-form-element;
+
 .product-page {
 
   &-intro {
@@ -9,7 +13,7 @@
     position: relative;
     margin: -10px 0 $gutter * 1.5 0;
     padding: 0 0 $gutter * 2 0;
-    background: $govuk-blue;
+    background: $product-page-blue;
     color: $white;
 
     &-wrapper {
@@ -35,31 +39,7 @@
       margin: $gutter-half 0 $gutter;
     }
 
-    .button-container {
-      line-height: 45px;
-    }
-
-    .button {
-
-      @include box-shadow(0 2px 0 darken($govuk-blue, 15%));
-      background: $white;
-      margin-right: 15px;
-      padding-right: 1.25em;
-
-      &:link,
-      &:visited,
-      &:hover {
-        color: $govuk-blue;
-      }
-
-      &:hover {
-        background: $light-blue-25;
-        outline: none;
-      }
-
-    }
-
-    a {
+    .govuk-link {
 
       &:link,
       &:visited {
@@ -103,3 +83,37 @@
   }
 
 }
+
+.button-container {
+  line-height: 2.36;
+}
+
+.button-container__button {
+  vertical-align: baseline;
+}
+
+.product-page-button {
+
+  // based on the govuk-button styles:
+  // https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss
+  @include govuk-font($size: 24, $weight: bold);
+  color: $product-page-blue;
+  box-shadow: 0 $button-shadow-size 0 govuk-shade($colour: $product-page-blue, $percentage: 15%);
+  background: $white;
+
+  &:link,
+  &:visited,
+  &:hover {
+    color: $product-page-blue;
+  }
+
+  &:focus {
+    background: $white;
+  }
+
+  &:hover {
+    background: $light-blue-25;
+    outline: none;
+  }
+
+}
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index 8f6906b89..66e379a32 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -1,4 +1,5 @@
 {% extends "fullwidth_template.html" %}
+{% from "components/button/macro.njk" import govukButton %}
 
 {% block meta %}
   <meta name="description" content="GOV.UK Notify lets you send emails, text messages and letters to your users. Try it now if you work in central government, a local authority, or the NHS.">
@@ -15,10 +16,10 @@
       <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
        <ol itemscope itemtype="http://schema.org/BreadcrumbList">
          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-           <a href="https://www.gov.uk/service-toolkit#gov-uk-services" itemprop="item"><span itemprop="name">GOV.UK services</span></a>
+           <a class="govuk-link" href="https://www.gov.uk/service-toolkit#gov-uk-services" itemprop="item"><span itemprop="name">GOV.UK services</span></a>
          </li>
          <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-           <a href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
+           <a class="govuk-link" href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
          </li>
        </ol>
       </nav>
@@ -31,10 +32,13 @@
             Try GOV.UK Notify now if you work in central government, a&nbsp;local authority, or the NHS.
           </p>
           <div class="button-container">
-            <a class="button button-start" role="button" draggable="false" href='{{ url_for('.register' )}}'>
-              Create an account
-            </a>
-            or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
+            {{ govukButton({
+              "element": "a",
+              "text": "Create an account",
+              "classes": "product-page-button button-container__button govuk-!-margin-right-3",
+              "href": url_for('main.register' )
+            }) }}
+            or <a class="govuk-link" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
             it before
           </div>
         </div>
@@ -131,7 +135,7 @@
       </div>
       <p>
         See the
-        <a href="https://www.gov.uk/performance/govuk-notify/government-services">list of services and organisations</a>.
+        <a class="govuk-link" href="https://www.gov.uk/performance/govuk-notify/government-services">list of services and organisations</a>.
       </p>
     </div>
   </div>
@@ -159,7 +163,7 @@
           <p class="align-with-big-number-hint">
             There’s no monthly charge, no setup fee and no&nbsp;procurement process.
           </p>
-          <p>Find out more about <a href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
+          <p>Find out more about <a class="govuk-link" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
           </p>
         </div>
       </div>
@@ -176,7 +180,7 @@
           and is supported 24 hours a day, 7 days a week.
         </p>
         <p>
-          <a href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
+          <a class="govuk-link" href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
           to give feedback.
         </p>
       </div>