Spacing tweaks

Author: Salma Alam-Naylor

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

@@ -85,7 +85,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: pxToRem($grid-unit * 8);
+  margin-bottom: pxToRem($grid-unit * 4);
   width: 100%;
 
   @media screen and (min-width: $screen-med) {
@@ -230,5 +230,6 @@
 
 .actionButton {
   @include hard_button_base();
-  margin-left: auto;
+  margin-bottom: pxToRem($grid-unit * 2);
+  align-self: flex-start;
 }

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss

@@ -46,5 +46,5 @@
 
 .similarModes__cta {
   @include hard_button_base;
-  margin-left: auto;
+  align-self: flex-start;
 }

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss

@@ -67,6 +67,7 @@
       var(--offwhite),
       var(--purple)
   );
+  margin-bottom: pxToRem($grid-unit * 4);
 }
 
 .tagRow {

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

@@ -107,10 +107,10 @@
   border: pxToRem(2) solid $foregroundColor;
   text-transform: uppercase;
   font-family: var(--font-family-main);
-  font-size: pxToRem(18);
+  font-size: pxToRem(16);
   display: inline-block;
   background-color: $backgroundColor;
-  padding: pxToRem($grid-unit) pxToRem($grid-unit * 2);
+  padding: pxToRem($grid-unit * 2);
   color: $foregroundColor;
   text-decoration: none;
   cursor: pointer;