Merge pull request #42 from ishythefishy/add-audio-playback

Add credits to footer

Author: whitep4nth3r

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

@@ -1,10 +1,47 @@
 <footer class="footer">
-  <p class="footer__copyright">&copy; {{ date | date: "yyyy" }} Fretonator</p>
+  <h6 class="footer__creditsTitle">Fretonator is open source</h6>
+  <p class="footer__thanksCopy">
+    Thank you to the following generous contributors:
+  </p>
+  <ul class="footer__creditsList">
+    <li class="footer__creditsListItem">
+      <a
+        href="http://drozar.io"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+      >
+        Jacob D'Rozario
+      </a>
+      - design & UX
+    </li>
+    <li class="footer__creditsListItem">
+      <a
+        href="https://github.com/geometricpanda"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+        >Jim Drury</a
+      >
+      - all things Angular
+    </li>
+    <li class="footer__creditsListItem">
+      <a
+        href="https://ell.io.tt/"
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        class="footer__creditsListItemLink"
+        >Elliot Brooks</a
+      >
+      - audio playback
+    </li>
+  </ul>
   <a
     class="footer__viewGithub"
     href="https://github.com/ishythefishy/fretonator"
     rel="nofollow noopener noreferrer"
     target="_blank"
     >View on GitHub</a
   >
+  <p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>
 </footer>

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

@@ -1,9 +1,10 @@
-@import "../../../styles/vars";
-@import "../../../styles/functions";
-@import "../../../styles/mixins";
+@import '../../../styles/vars';
+@import '../../../styles/functions';
+@import '../../../styles/mixins';
+@import '../../../styles/typography';
 
 .footer {
-  background-color: var(--peach);
+  background-color: var(--black);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -12,8 +13,41 @@
   padding: pxToRem($grid-unit * 2);
 }
 
+.footer__thanksCopy {
+  @include font_bodyCopy();
+  color: var(--offwhite);
+}
+
+.footer__creditsTitle {
+  @include font_medium();
+  margin-top: pxToRem($grid-unit);
+  margin-bottom: pxToRem($grid-unit);
+  color: var(--peach);
+  font-weight: var(--font-weight-bold);
+}
+
+.footer__creditsList {
+  list-style: none;
+  text-align: center;
+  padding: 0;
+  margin-bottom: pxToRem($grid-unit * 4);
+}
+
+.footer__creditsListItem {
+  @include font_bodyCopy();
+  color: var(--offwhite);
+}
+
+.footer__creditsListItemLink {
+  @include text_link();
+  color: var(--yellow);
+  border-color: var(--yellow);
+
+  @include focus_accessible();
+}
+
 .footer__copyright {
-  color: var(--black);
+  color: var(--offwhite);
   font-size: pxToRem(12);
   letter-spacing: var(--letter-spacing-display);
   font-weight: var(--font-weight-bold);
@@ -23,10 +57,6 @@
 }
 
 .footer__viewGithub {
-  color: var(--black);
-  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);
+  }
+}