From 34526db59248a25e462180d8c2b609d2fa9e319d Mon Sep 17 00:00:00 2001
From: sarahcrack <73823091+sarahcrack@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:13:39 +0000
Subject: [PATCH] added some media queries with colours to experiment with
 resonsiveness - work in progress. Currently rendering link on homepage

---
 .../home/mailing_list_component.html.erb      |  1 +
 app/webpacker/styles/links-and-buttons.scss   | 19 +++++++++++++++++--
 app/webpacker/styles/utility.scss             |  4 ++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/components/home/mailing_list_component.html.erb b/app/components/home/mailing_list_component.html.erb
index 3e61c95db4..99aa66f8ee 100644
--- a/app/components/home/mailing_list_component.html.erb
+++ b/app/components/home/mailing_list_component.html.erb
@@ -15,6 +15,7 @@
             Your details are protected under the terms of our <%= link_to("privacy notice (opens in new tab)", privacy_policy_path(id: privacy_policy.id), { class: "link--black", target: :blank }) %>. This explains how we use your personal data. It's important you read it before signing up to receive emails.
           </small>
         </p>
+        <%= render 'content/shared/links_and_buttons/cta_circle_button_link', cta_link_text: "Steps to become a teacher", href: "/steps-to-become-a-teacher" %>
       </div>
       <%= form_with builder: GOVUKDesignSystemFormBuilder::FormBuilder, url: mailing_list_step_path(:name), scope: :mailing_list_steps_name, method: :put do |f| %>
         <%= f.govuk_text_field :first_name, autocomplete: "given-name" %>
diff --git a/app/webpacker/styles/links-and-buttons.scss b/app/webpacker/styles/links-and-buttons.scss
index 8d1406da20..e8e4b90393 100644
--- a/app/webpacker/styles/links-and-buttons.scss
+++ b/app/webpacker/styles/links-and-buttons.scss
@@ -259,9 +259,24 @@ body a.govuk-back-link {
     @include mq($until: narrow) {
       width: 28px; 
       height: 28px;
-      @include arrow ($length: .9em);
+      background-color: pink;
+      @include arrow ($dimensions: .5em, $length: .9em);
     }
-}
+
+    @include mq($from: narrow, $until: mobile) {
+      background-color: blue;
+      width: 30px; 
+      height: 30px;
+      @include arrow ($dimensions: .55em, $length: 1em);
+    }
+
+    @include mq ($from: mobile, $until: tablet) {
+      background-color: black;
+      width: 32px; 
+      height: 32px;
+      @include arrow ($dimensions: .6em, $length: 1em);
+    }
+  }
 
   .cta-link-text {
     @extend .link;
diff --git a/app/webpacker/styles/utility.scss b/app/webpacker/styles/utility.scss
index 4eb705497c..4a9ce9aec2 100644
--- a/app/webpacker/styles/utility.scss
+++ b/app/webpacker/styles/utility.scss
@@ -54,12 +54,12 @@ $chevron-direction-map: (
   &::before {
     @include horizontal-line($color: $color, $length: $length, $thickness: $thickness);
     // position: absolute;
-    left: 0.35em;
+    left: 20%;
   }
   
   &::after {
     @include chevron-icon($color: $color, $dimensions: $dimensions, $rotate: $degrees);
-    right: 0.4em;
+    right: 20%;
   }
 }