changed argument values to px and created some media queries to handl…

…e responsivess for the size of button and arrow inside

app/components/home/mailing_list_component.html.erb

@@ -15,7 +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" %>
+        <%= render 'content/shared/links_and_buttons/cta_circle_button_link', cta_link_text: "Find out more", 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" %>

app/webpacker/styles/links-and-buttons.scss

@@ -239,6 +239,9 @@ body a.govuk-back-link {
   }
 }
 
+// CTA link with green arrow circle button
+// Arrow created here: app/webpacker/styles/utility.scss
+// Partial for rendering here: app/views/shared/_cta_circle_link.html.erb
 .cta-circle-link-wrapper {
   display: inline-flex;
   align-items: center;
@@ -247,39 +250,47 @@ body a.govuk-back-link {
 
   .cta-circle-button {
     @include button;
-    font-size: inherit;
+    // font-size: inherit;
     border-radius: 50%;
-    width: 34px; 
-    height: 34px;
+    // width: 34px; 
+    // height: 34px;
     display: inline-block;
     box-shadow: none;
     padding: 0;
-    @include arrow;
+    line-height: 1;
+    // @include arrow;
 
     @include mq($until: narrow) {
       width: 28px; 
       height: 28px;
       background-color: pink;
-      @include arrow ($dimensions: .5em, $length: .9em);
+      @include arrow ($dimensions: 8px, $length: 16px);
     }
 
     @include mq($from: narrow, $until: mobile) {
       background-color: blue;
       width: 30px; 
       height: 30px;
-      @include arrow ($dimensions: .55em, $length: 1em);
+      @include arrow ($dimensions: 8px, $length: 18px);
     }
 
     @include mq ($from: mobile, $until: tablet) {
       background-color: black;
       width: 32px; 
       height: 32px;
-      @include arrow ($dimensions: .6em, $length: 1em);
+      @include arrow ($dimensions: 10px, $length: 20px);
+    }
+
+    @include mq ($from: tablet) {
+      background-color: purple;
+      width: 34px; 
+      height: 34px;
+      @include arrow ($dimensions: 12px, $length: 22px);
     }
   }
 
   .cta-link-text {
-    @extend .link;
+    @include font-size("small");
   }
 }
 

app/webpacker/styles/utility.scss

@@ -44,7 +44,7 @@ $chevron-direction-map: (
 }
 
 
-@mixin arrow($color: $white, $direction: right, $dimensions: .6em, $length: 1.2em, $thickness: 3px) {
+@mixin arrow($color: $white, $direction: right, $dimensions: $dimensions, $length: $length, $thickness: 3px) {
   $degrees: map-get($chevron-direction-map, $direction);
   position: relative;
   display: flex;
@@ -53,7 +53,6 @@ $chevron-direction-map: (
 
   &::before {
     @include horizontal-line($color: $color, $length: $length, $thickness: $thickness);
-    // position: absolute;
     left: 20%;
   }