Update styled page link block FE: update class names and clean up styles

Author: shyusu4

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags %}
 
-<a href="{% pageurl value.page %}" class="contact-cta__button button styled-page-link--{{ value.style }}">
+<a href="{% pageurl value.page %}" class="button styled-page-links__button styled-page-links__button--{{ value.style }}">
     {% if value.title %}
         {{ value.title }}
     {% else %}

tbx/static_src/sass/components/_styled-page-links.scss

@@ -4,37 +4,30 @@
     display: flex;
     flex-wrap: wrap;
     gap: $spacer-mini;
-    margin-bottom: $spacer-small;
 
-    @include media-query(large) {
-        margin-bottom: $spacer-medium;
-    }
-}
+    &__button {
+        &--theme-coral {
+            &:focus,
+            &:hover {
+                background-color: var(--color--coral);
+                color: var(--color--white);
+            }
+        }
 
-// Style variations for the contact-cta__button button
-.styled-page-link--charity {
-    &:hover,
-    &:focus {
-        background-color: $color--coral;
-        color: var(--color--background);
-        border-color: $color--coral;
-    }
-}
-
-.styled-page-link--public {
-    &:hover,
-    &:focus {
-        background-color: $color--nebuline;
-        color: var(--color--background);
-        border-color: $color--nebuline;
-    }
-}
+        &--theme-nebuline {
+            &:focus,
+            &:hover {
+                background-color: var(--color--nebuline);
+                color: var(--color--white);
+            }
+        }
 
-.styled-page-link--wagtail {
-    &:hover,
-    &:focus {
-        background-color: $color--lagoon;
-        color: var(--color--background);
-        border-color: $color--lagoon;
+        &--theme-lagoon {
+            &:focus,
+            &:hover {
+                background-color: var(--color--lagoon);
+                color: var(--color--white);
+            }
+        }
     }
 }