Made a mixin for main button cta

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/footer/footer.component.scss

@@ -42,6 +42,8 @@
   @include text_link();
   color: var(--yellow);
   border-color: var(--yellow);
+
+  @include focus_accessible();
 }
 
 .footer__copyright {
@@ -55,10 +57,6 @@
 }
 
 .footer__viewGithub {
-  color: var(--offwhite);
-  font-size: pxToRem(12);
-  display: block;
+  @include hard_button_base();
   margin-bottom: pxToRem($grid-unit * 2);
-
-  @include focus_accessible($focus_box_shadow_color_alt);
 }

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss

@@ -167,35 +167,12 @@
 }
 
 .infoHighlight {
-  border-radius: var(--border-radius-button);
+  border-radius: var(--border-radius-chip);
   padding: pxToRem($grid-unit / 4) pxToRem($grid-unit * 2);
   color: var(--black);
   background-color: var(--peach);
 }
 
 .actionButton {
-  border-radius: var(--border-radius-button);
-  border: pxToRem(2) solid var(--offwhite);
-  text-transform: uppercase;
-  font-family: var(--font-family-main);
-  font-size: pxToRem(18);
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-block;
-  background-color: transparent;
-  padding: pxToRem($grid-unit) pxToRem($grid-unit * 2);
-  color: var(--offwhite);
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-display);
-  margin-top: pxToRem($grid-unit * 3);
-
-  @include focus_accessible();
-
-  &:hover {
-    border-color: var(--yellow);
-    color: var(--yellow);
-  }
+  @include hard_button_base();
 }

apps/fretonator-web/src/styles.scss

@@ -30,7 +30,8 @@
 
   --border-width-base: 1px;
   --border-radius-base: 2px;
-  --border-radius-button: 16px;
+  --border-radius-chip: 16px;
+  --border-radius-button: 0;
 
   --border-width-button: 2px;
 

apps/fretonator-web/src/styles/_mixins.scss

@@ -41,7 +41,7 @@
   border-style: solid;
   border-color: var(--black);
   background-color: var(--white);
-  border-radius: var(--border-radius-button);
+  border-radius: var(--border-radius-chip);
   padding: pxToRem(4) pxToRem(8);
   cursor: pointer;
   font-weight: var(--font-weight-bold);
@@ -52,3 +52,33 @@
 
   @include focus_accessible();
 }
+
+@mixin hard_button_base(
+    $foregroundColor: var(--offwhite),
+    $backgroundColor: var(--black)) {
+  border-radius: var(--border-radius-button);
+  border: pxToRem(2) solid $foregroundColor;
+  text-transform: uppercase;
+  font-family: var(--font-family-main);
+  font-size: pxToRem(18);
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+  background-color: $backgroundColor;
+  padding: pxToRem($grid-unit) pxToRem($grid-unit * 2);
+  color: $foregroundColor;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-display);
+  margin-top: pxToRem($grid-unit * 3);
+  box-shadow: 8px 8px 0 0 $foregroundColor;
+
+  @include focus_accessible();
+
+  &:hover {
+    border-color: var(--yellow);
+    color: var(--yellow);
+  }
+}