Styling changes

Author: Salma Alam-Naylor

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

@@ -14,7 +14,7 @@ <h4 class="similarModes__title">Did you know?</h4>
   </div>
 
   <p class="similarModes__copy">There are only 7 patterns you need to learn. Once you've memorised those patterns,
-    you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from
+    you can play any of the 7 standard modes <em>(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian</em>) from
     any starting note, anywhere on the fretboard.</p>
   <p class="similarModes__copy">These patterns always appear in the same order, one after the other.</p>
 </div>

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

@@ -6,6 +6,9 @@
 .chipsContainer {
   margin-top: pxToRem($grid-unit * 2);
   margin-bottom: pxToRem($grid-unit * 4);
+  display: flex;
+  justify-content: center;
+  width: 100%;
 }
 
 .similarModes {
@@ -30,4 +33,8 @@
 .similarModes__copy {
   @include font_bodyCopy();
   margin-bottom: pxToRem($grid-unit * 2);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }

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

@@ -149,6 +149,7 @@
 
 .modeSelector__label {
   @include font_medium();
+  font-size: pxToRem(16);
   font-weight: var(--font-weight-bold);
   margin-top: pxToRem($grid-unit * 1);
   margin-bottom: pxToRem($grid-unit * 1);