From 98a5ced52f0698b883a3d23ea5db48e0edda7013 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 28 Jun 2020 19:03:17 +0100 Subject: [PATCH 01/14] Small accessibility fixes --- .../fretonator-web/src/app/app.component.html | 4 +- .../app/common/footer/footer.component.html | 4 +- .../fretboard/fretboard.component.html | 4 +- .../fretonator/fretonator.component.html | 4 +- .../scale-map/scale-map.component.html | 16 +- .../home/home-index/home-index.component.html | 162 +++++++++--------- 6 files changed, 96 insertions(+), 98 deletions(-) diff --git a/apps/fretonator-web/src/app/app.component.html b/apps/fretonator-web/src/app/app.component.html index b80dc14..f8ed5ad 100644 --- a/apps/fretonator-web/src/app/app.component.html +++ b/apps/fretonator-web/src/app/app.component.html @@ -1,5 +1,5 @@ -
+
-
+ diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.html b/apps/fretonator-web/src/app/common/footer/footer.component.html index 168624c..49a7425 100644 --- a/apps/fretonator-web/src/app/common/footer/footer.component.html +++ b/apps/fretonator-web/src/app/common/footer/footer.component.html @@ -2,9 +2,9 @@
-
+
Fretonator is open source -
+

Thank you to the following generous contributors:

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 8ee252e..482accb 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -80,9 +80,9 @@
-

+

Tap notes on the fretboard for sound! -

+

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index daf6548..2b483ac 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -1,4 +1,4 @@ -
Check out the fretboard
+

Check out the fretboard

@@ -15,7 +15,7 @@
Check out the fretboard
-
Learn the theory
+

Learn the theory

-

Theoretical  Scale

+

Theoretical  Scale

-
+

{{ note.displayName }} -

+

@@ -49,14 +49,14 @@

Degrees

-

About Theoretical Scales +

About Theoretical Scales -

+

A theoretical scale or impossible key is a key whose key signature has at least one double flat (𝄫) or double sharp (x).

{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can @@ -74,14 +74,14 @@

About Theoretical Scales
-

About Scale Degrees +

About Scale Degrees -

+

Each of the 7 notes of a mode or scale is called a scale degree, and has a specific name.

diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html index c1b41f4..8c733a7 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html @@ -1,93 +1,91 @@ -
-
-

- How to use the Fretonator - Fretonator: the ultimate interactive free guitar theory tool -

-
    -
  1. Choose a starting note
    2. -
  2. Pick a mode
    3. -
  3. Check out the fretboard
    4. -
  4. Have a jam!
    5. -
  5. Learn the theory
    6. -
+
+

+ How to use the Fretonator + Fretonator: the ultimate interactive free guitar theory tool +

+
    +
  1. Choose a starting note
    2. +
  2. Pick a mode
    3. +
  3. Check out the fretboard
    4. +
  4. Have a jam!
    5. +
  5. Learn the theory
    6. +
- -
+ +
-
-
-

Choose a starting note

+
+
+

Choose a starting note

- - {{thisNote | titlecase}} - + + {{thisNote | titlecase}} + - - {{note | titlecase}}♭ - + + {{note | titlecase}}♭ + - {{note | titlecase}} + {{note | titlecase}} - {{note | titlecase}}# - - -
+ {{note | titlecase}}# + + +
-
-

Pick a mode

+
+

Pick a mode

- - {{thisMode.displayName}} - + + {{thisMode.displayName}} + -
+
- + -
-
+
From 924ef9231542993e0de04c448f4dd2508c5a2e3e Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 28 Jun 2020 20:59:54 +0100 Subject: [PATCH 02/14] fretonator + home page converted to dark mode draft 1 --- .../app/common/footer/footer.component.scss | 28 ++-- .../chord-map/chord-map.component.scss | 1 + .../fretboard/fretboard.component.scss | 12 +- .../interval-map/interval-map.component.scss | 1 + .../scale-map/scale-map.component.scss | 6 +- .../app/common/header/header.component.scss | 10 +- .../video-loader/video-loader.component.scss | 3 +- .../home/home-index/home-index.component.scss | 12 +- apps/fretonator-web/src/index-dev.html | 2 +- apps/fretonator-web/src/styles.scss | 133 +++++++++++++++--- apps/fretonator-web/src/styles/_mixins.scss | 8 +- .../src/styles/_typography.scss | 1 + apps/fretonator-web/src/styles/_vars.scss | 2 - 13 files changed, 159 insertions(+), 60 deletions(-) diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.scss b/apps/fretonator-web/src/app/common/footer/footer.component.scss index 1b0fbbb..e85df51 100644 --- a/apps/fretonator-web/src/app/common/footer/footer.component.scss +++ b/apps/fretonator-web/src/app/common/footer/footer.component.scss @@ -4,10 +4,10 @@ @import '../../../styles/typography'; .footer { - background-color: var(--black); + background-color: var(--footer-background); box-sizing: border-box; padding: pxToRem($grid-unit * 6); - border-top: pxToRem($grid-unit) solid var(--peach); + border-top: pxToRem($grid-unit) solid var(--footer-border-color); } .footer__inner { @@ -56,7 +56,7 @@ @include font_bodyCopy; font-size: pxToRem(15); line-height: pxToRem(22); - color: var(--offwhite); + color: var(--footer-copy-color); display: flex; flex-direction: column; justify-content: center; @@ -79,8 +79,8 @@ .footer__copy--link { @include text_link(); - color: var(--peach); - border-color: var(--peach); + color: var(--footer-link-color); + border-color: var(--footer-link-color); } .footer__sectionTitle { @@ -89,7 +89,7 @@ line-height: pxToRem(28); margin-top: pxToRem($grid-unit); margin-bottom: pxToRem($grid-unit); - color: var(--peach); + color: var(--footer-title-color); font-weight: var(--font-weight-bold); display: flex; text-align: center; @@ -114,19 +114,19 @@ @include font_bodyCopy; font-size: pxToRem(15); line-height: pxToRem(26); - color: var(--offwhite); + color: var(--footer-copy-color); } .footer__listItemLink { @include text_link(); - color: var(--yellow); - border-color: var(--yellow); + color: var(--footer-list-link-color); + border-color: var(--footer-list-link-color); @include focus_accessible(); } .footer__copyright { - color: var(--offwhite); + color: var(--footer-copy-color); font-size: pxToRem(12); letter-spacing: var(--letter-spacing-display); font-weight: var(--font-weight-bold); @@ -153,11 +153,11 @@ flex-direction: row; justify-content: center; align-items: center; - background-color: var(--black); + background-color: var(--footer-background); margin-top: pxToRem($grid-unit * 4); padding: pxToRem($grid-unit / 2) pxToRem($grid-unit * 2); - color: var(--yellow); - border-color: var(--yellow); + color: var(--footer-link-color); + border-color: var(--footer-link-color); &:focus { border-color: transparent; @@ -172,7 +172,7 @@ .footer__twitchButton { background-color: #9147ff; - color: var(--white); + color: #ffffff; padding: pxToRem($grid-unit * 2); font-family: var(--font-family-main); font-weight: var(--font-weight-bold); diff --git a/apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss index c356e9b..d3d2758 100644 --- a/apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss @@ -40,4 +40,5 @@ margin-right: pxToRem($grid-unit); margin-bottom: pxToRem($grid-unit); font-weight: var(--font-weight-bold); + color: var(--foreground-color-base); } diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 042757f..56766b2 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -39,7 +39,7 @@ font-family: var(--font-family-main); font-style: italic; font-weight: var(--font-weight-bold); - color: var(--grey); + color: var(--fretboard-help-text-color); font-size: pxToRem(14); opacity: 0.5; } @@ -207,7 +207,7 @@ &[data-string="G"][data-fret="21"], &[data-string="B"][data-fret="12"], &[data-string="D"][data-fret="12"] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); + background-image: var(--fret-marker-url); background-repeat: no-repeat; background-position: center calc(var(--string-height-base) - 15px); background-size: 30px 30px; @@ -223,7 +223,7 @@ &[data-string="D"][data-fret="21"], &[data-string="G"][data-fret="12"], &[data-string="A"][data-fret="12"] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); + background-image: var(--fret-marker-url); background-repeat: no-repeat; background-position: center -15px; background-size: 30px 30px; @@ -407,7 +407,7 @@ justify-content: center; align-items: center; margin-bottom: pxToRem($grid-unit * 2); - color: var(--grey); + color: var(--fretboard-play-cta-color); line-height: 1; margin-left: auto; margin-right: auto; @@ -429,8 +429,8 @@ } .fretboard__toggleButton--active { - background-color: var(--black); - color: var(--offwhite); + background-color: var(--chip-background-color-active); + color: var(--chip-foreground-color-active); } .fretboard__toggleButton--twelve { diff --git a/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss index 059c1fa..62895b4 100644 --- a/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/interval-map/interval-map.component.scss @@ -39,6 +39,7 @@ margin-right: pxToRem($grid-unit); margin-bottom: pxToRem($grid-unit); font-weight: var(--font-weight-bold); + color: var(--foreground-color-base); } .intervalMap__separator { diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss index 83360d3..41fbda9 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss @@ -106,6 +106,7 @@ justify-content: space-between; align-items: center; height: $infoContainer_info_row_height; + color: var(--foreground-color-base); } .scaleDisplay__note { @@ -154,7 +155,6 @@ } display: none; - } .button__playScale__svg { @@ -166,8 +166,8 @@ .button__infoToggle { @include chip_button_base(); - border-color: var(--grey); - color: var(--grey); + border-color: var(--info-toggle-foreground-color); + color: var(--info-toggle-foreground-color); margin-top: pxToRem($grid-unit * 2); } diff --git a/apps/fretonator-web/src/app/common/header/header.component.scss b/apps/fretonator-web/src/app/common/header/header.component.scss index ad175c5..c724d21 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.scss +++ b/apps/fretonator-web/src/app/common/header/header.component.scss @@ -3,7 +3,7 @@ @import "../../../styles/mixins"; .header { - background-color: var(--black); + background-color: var(--header-background); position: relative; display: flex; flex-direction: column; @@ -29,7 +29,7 @@ align-items: center; width: pxToRem(60); cursor: pointer; - color: var(--offwhite); + color: var(--header-logo-color); @include focus_accessible(); @@ -103,7 +103,7 @@ display: block; top: $hamburger_layer-height / 2; margin-top: $hamburger_layer-height / -2; - background-color: $hamburger_active-layer-color; + background-color: var(--hamburger_layer-color); transition: background-color 0s 0.13s linear; &, @@ -113,7 +113,7 @@ display: block; width: $hamburger_layer-width; height: $hamburger_layer-height; - background-color: $hamburger_layer-color; + background-color: var(--hamburger_layer-color); border-radius: $hamburger_layer-border-radius; position: absolute; transition-property: transform; @@ -186,7 +186,7 @@ } .header__linksItemLink { - color: var(--peach); + color: var(--header-link-color); font-size: pxToRem(14); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-display); diff --git a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.scss b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.scss index a6152bd..329556d 100644 --- a/apps/fretonator-web/src/app/common/video-loader/video-loader.component.scss +++ b/apps/fretonator-web/src/app/common/video-loader/video-loader.component.scss @@ -26,6 +26,7 @@ font-size: pxToRem(20); font-style: italic; text-align: center; + color: var(--foreground-color-base); } .videoLoader__video { @@ -34,7 +35,7 @@ height: 0; padding-bottom: percentage(9/16); overflow: hidden; - background-color: var(--black); + background-color: var(--video-loader-background-color); position: relative; } diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index 23c649a..92af93a 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -8,7 +8,7 @@ } .hero { - background-color: var(--black); + background-color: var(--hero-background-color); display: block; width: 100%; padding-top: pxToRem($grid-unit * 4); @@ -31,7 +31,7 @@ .hero__title { font-family: var(--font-family-main); display: block; - color: var(--offwhite); + color: var(--hero-title-color); letter-spacing: var(--letter-spacing-display); font-size: pxToRem(14); text-transform: uppercase; @@ -67,7 +67,7 @@ padding-right: pxToRem($grid-unit * 2); padding-bottom: pxToRem($grid-unit * 4); margin: pxToRem($grid-unit); - box-shadow: 8px 8px 0 0 var(--grey); + box-shadow: 8px 8px 0 0 var(--hero-block-box-shadow-color); @media screen and (min-width: $screen-sm) { flex-basis: 20%; @@ -116,9 +116,9 @@ margin-left: auto; margin-right: auto; display: block; - color: var(--offwhite); - background-color: var(--black); - border-color: var(--offwhite); + color: var(--hero-toggle-foreground-color); + background-color: var(--hero-toggle-background-color); + border-color: var(--hero-toggle-foreground-color); margin-top: pxToRem($grid-unit * 4); &:focus { diff --git a/apps/fretonator-web/src/index-dev.html b/apps/fretonator-web/src/index-dev.html index b584a98..01c57be 100644 --- a/apps/fretonator-web/src/index-dev.html +++ b/apps/fretonator-web/src/index-dev.html @@ -1,5 +1,5 @@ - + diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 2f5ebf5..3815e6a 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -3,7 +3,47 @@ @import "./styles/mixins"; :root { - --black: #1c1c1c; + --font-weight-normal: 300; + --font-weight-bold: 500; + --font-weight-display: 700; + --letter-spacing-display: 2px; + --letter-spacing-mega: 4px; + --font-family-main: "Montserrat", sans-serif; + + --fret-width-base: 2px; + --fretboard-height: 100px; + --string-height-base: 48px; + + --note-height: 36px; + --note-height-hover: 39px; + + --border-width-base: 1px; + --border-radius-base: 2px; + --border-radius-chip: 16px; + --border-radius-button: 0; + + --border-width-button: 2px; + + --header-background: #202124; + --header-logo-color: #e1e1e1; + + --footer-background: #202124; + --footer-border-color: #fecdaa; + --footer-copy-color: #e1e1e1; + --footer-link-color: #fecdaa; + --footer-title-color: #fecdaa; + --footer-list-link-color: #fafac6; + + --hamburger_layer-color: #fecdaa; + --header-link-color: #fecdaa; + + --hero-background-color: #202124; + --hero-title-color: #e1e1e1; + --hero-block-box-shadow-color: #474350; + --hero-toggle-foreground-color: #e1e1e1; + --hero-toggle-background-color: #202124; + + --black: #202124; --white: #ffffff; --offwhite: #f9f9f9; --grey: #474350; @@ -12,7 +52,9 @@ --blue: #3993dd; --turquoise: #73eedc; --purple: #adb9e3; +} +:root[color-mode="light"] { --error-bg: #d64045; --error-fg: #f9f9f9; @@ -21,21 +63,21 @@ --background-color-base: #f9f9f9; --background-color-light: #ffffff; --foreground-color-base: #1c1c1c; - --font-family-main: "Montserrat", sans-serif; + --text-link-color: #474350; + --text-link-hover-color: #fecdaa; --string-color: #1c1c1c; --string-label-color: #1c1c1c; --nut-color: #1a1a1a; --fret-color: rgba(28, 28, 28, 0.2); + --fretboard-help-text-color: #474350; + --fretboard-play-cta-color: #474350; - --fret-width-base: 2px; - --fretboard-height: 100px; - --string-height-base: 48px; + --fret-marker-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); --note-color: #fafac6; --note-background: #1c1c1c; - --note-height: 36px; - --note-height-hover: 39px; + --note-bg-tonic: #fecdaa; --note-color-tonic: #1c1c1c; @@ -48,12 +90,6 @@ --note-bg-dominant: #adb9e3; --note-color-dominant: #1c1c1c; - --border-width-base: 1px; - --border-radius-base: 2px; - --border-radius-chip: 16px; - --border-radius-button: 0; - - --border-width-button: 2px; --chip-background-color: #ffffff; --chip-foreground-color: #1c1c1c; @@ -80,11 +116,72 @@ --form-input-autofill-bg-color: #fafac6; --form-input-autofill-color: #1c1c1c; - --font-weight-normal: 300; - --font-weight-bold: 500; - --font-weight-display: 700; - --letter-spacing-display: 2px; - --letter-spacing-mega: 4px; + --video-loader-background-color: #1c1c1c; + --info-toggle-foreground-color: #474350; +} + +:root[color-mode="dark"] { + --error-bg: #d64045; + --error-fg: #f9f9f9; + + --success-bg: #84dd63; + + --background-color-base: #202124; + --background-color-light: #474350; + --foreground-color-base: #e1e1e1; + --text-link-color: #fecdaa; + --text-link-hover-color: #FD7C21; + + --string-color: #e1e1e1; + --string-label-color: #e1e1e1; + --nut-color: #d3d3d3; + --fret-color: rgba(249, 249, 249, 0.2); + --fretboard-help-text-color: #e1e1e1; + --fretboard-play-cta-color: #d3d3d3; + + --fret-marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23474350'/%3E%3C/svg%3E"); + + --note-color: #202124; + --note-background: #b8b8b8; + + --note-bg-tonic: #fecdaa; + --note-color-tonic: #1c1c1c; + + --note-bg-ghost: #768AD0; + + --note-bg-mediant: #FD7C21; + --note-color-mediant: #1c1c1c; + + --note-bg-dominant: #CA5502; + --note-color-dominant: #1c1c1c; + + --chip-background-color: #474350; + --chip-foreground-color: #e1e1e1; + --chip-border-color: #474350; + + --chip-background-color-active: #fecdaa; + --chip-foreground-color-active: #202124; + --chip-border-color-active: #fecdaa; + + --chip-background-color-muted: #474350; + --chip-foreground-color-muted: #e1e1e1; + --chip-border-color-muted: #474350; + + --chip-foreground-color-muted-active: #fecdaa; + --chip-background-color-muted-active: #202124; + --chip-border-color-muted-active: #fecdaa; + + --form-container-bg-color: #1c1c1c; + --form-container-color: #f9f9f9; + --form-input-border-color: #f9f9f9; + --form-input-bg-color: #1c1c1c; + --form-label-color: #f9f9f9; + --form-input-color: #ffffff; + --form-input-autofill-bg-color: #fafac6; + --form-input-autofill-color: #1c1c1c; + + --video-loader-background-color: #474350; + --info-toggle-foreground-color: #e1e1e1; } body { diff --git a/apps/fretonator-web/src/styles/_mixins.scss b/apps/fretonator-web/src/styles/_mixins.scss index 778f4b7..ccd443a 100644 --- a/apps/fretonator-web/src/styles/_mixins.scss +++ b/apps/fretonator-web/src/styles/_mixins.scss @@ -21,17 +21,17 @@ font-weight: var(--font-weight-bold); text-decoration: none; font-size: inherit; - color: var(--grey); + color: var(--text-link-color); cursor: pointer; - border-bottom: pxToRem(2) solid var(--grey); + border-bottom: pxToRem(2) solid var(--text-link-color); padding-bottom: pxToRem(1); transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out; &:focus, &:hover, &:active { - color: var(--peach); - border-color: var(--peach); + color: var(--text-link-hover-color); + border-color: var(--text-link-hover-color); } } diff --git a/apps/fretonator-web/src/styles/_typography.scss b/apps/fretonator-web/src/styles/_typography.scss index c439b5b..14f6f75 100644 --- a/apps/fretonator-web/src/styles/_typography.scss +++ b/apps/fretonator-web/src/styles/_typography.scss @@ -38,6 +38,7 @@ margin-bottom: pxToRem($grid-unit * 2); display: flex; flex-direction: column; + color: var(--foreground-color-base); } @mixin fretonator_section_title { diff --git a/apps/fretonator-web/src/styles/_vars.scss b/apps/fretonator-web/src/styles/_vars.scss index 75fe223..32fedce 100644 --- a/apps/fretonator-web/src/styles/_vars.scss +++ b/apps/fretonator-web/src/styles/_vars.scss @@ -23,8 +23,6 @@ $hamburger_padding-y: 24px; $hamburger_layer-width: 32px; $hamburger_layer-height: 3px; $hamburger_layer-spacing: 6px; -$hamburger_layer-color: #fecdaa; $hamburger_layer-border-radius: 2px; $hamburger_hover-opacity: 0.9; -$hamburger_active-layer-color: $hamburger_layer-color; $hamburger_active-hover-opacity: $hamburger_hover-opacity; From 1166e0c634684bfa8f6eaf98784e2520c5b1b25d Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 28 Jun 2020 21:31:53 +0100 Subject: [PATCH 03/14] Fixed up learn content and rest of home page --- .../similar-modes.component.scss | 3 +- .../learn-index/learn-index.component.scss | 8 +- apps/fretonator-web/src/styles.scss | 145 ++++++++++-------- apps/fretonator-web/src/styles/_mixins.scss | 7 +- apps/fretonator-web/src/styles/content.scss | 5 + 5 files changed, 97 insertions(+), 71 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss index 482df47..b35a2b6 100644 --- a/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss @@ -12,7 +12,7 @@ } .similarModes { - background-color: var(--peach); + background-color: var(--similar-modes-background-color); padding: pxToRem($grid-unit * 4); margin-left: pxToRem($grid-unit * -4); margin-right: pxToRem($grid-unit * -4); @@ -33,6 +33,7 @@ .similarModes__copy { @include font_bodyCopy; margin-bottom: pxToRem($grid-unit * 2); + color: var(--foreground-color-base); &:last-of-type { margin-bottom: 0; diff --git a/apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss b/apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss index 6afb093..9e9962b 100644 --- a/apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss +++ b/apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss @@ -53,7 +53,7 @@ .grid__item__image { width: 100%; - border: pxToRem(2) solid var(--black); + border: pxToRem(2) solid var(--card-image-border-color); } .grid__item__copy { @@ -77,9 +77,11 @@ } .tag { - @include chip_tag; + @include chip_tag( + $bgColor: var(--chip-tag-background-color), + $fgColor: var(--chip-tag-foreground-color) + ); margin-right: pxToRem($grid-unit); border-width: 0; - background-color: var(--peach); } diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 3815e6a..7c55dda 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -3,6 +3,17 @@ @import "./styles/mixins"; :root { + + --black: #202124; + --white: #ffffff; + --offwhite: #f9f9f9; + --grey: #474350; + --yellow: #fafac6; + --peach: #fecdaa; + --blue: #3993dd; + --turquoise: #73eedc; + --purple: #adb9e3; + --font-weight-normal: 300; --font-weight-bold: 500; --font-weight-display: 700; @@ -24,70 +35,62 @@ --border-width-button: 2px; - --header-background: #202124; + --header-background: var(--black); --header-logo-color: #e1e1e1; - --footer-background: #202124; - --footer-border-color: #fecdaa; + --footer-background: var(--black); + --footer-border-color: var(--peach); --footer-copy-color: #e1e1e1; - --footer-link-color: #fecdaa; - --footer-title-color: #fecdaa; - --footer-list-link-color: #fafac6; + --footer-link-color: var(--peach); + --footer-title-color: var(--peach); + --footer-list-link-color: var(--yellow); - --hamburger_layer-color: #fecdaa; - --header-link-color: #fecdaa; + --hamburger_layer-color: var(--peach); + --header-link-color: var(--peach); - --hero-background-color: #202124; + --hero-background-color: var(--black); --hero-title-color: #e1e1e1; - --hero-block-box-shadow-color: #474350; + --hero-block-box-shadow-color: var(--grey); --hero-toggle-foreground-color: #e1e1e1; - --hero-toggle-background-color: #202124; + --hero-toggle-background-color: var(--black); + - --black: #202124; - --white: #ffffff; - --offwhite: #f9f9f9; - --grey: #474350; - --yellow: #fafac6; - --peach: #fecdaa; - --blue: #3993dd; - --turquoise: #73eedc; - --purple: #adb9e3; } :root[color-mode="light"] { --error-bg: #d64045; - --error-fg: #f9f9f9; + --error-fg: var(--offwhite); --success-bg: #84dd63; - --background-color-base: #f9f9f9; + --background-color-base: var(--offwhite); --background-color-light: #ffffff; --foreground-color-base: #1c1c1c; - --text-link-color: #474350; - --text-link-hover-color: #fecdaa; + --text-link-color: var(--grey); + --text-link-hover-color: var(--peach); --string-color: #1c1c1c; --string-label-color: #1c1c1c; --nut-color: #1a1a1a; --fret-color: rgba(28, 28, 28, 0.2); - --fretboard-help-text-color: #474350; - --fretboard-play-cta-color: #474350; + --fretboard-help-text-color: var(--grey); + --fretboard-play-cta-color: var(--grey); --fret-marker-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); - --note-color: #fafac6; + --note-color: var(--yellow); --note-background: #1c1c1c; - --note-bg-tonic: #fecdaa; + --note-bg-tonic: var(--peach); --note-color-tonic: #1c1c1c; - --note-bg-ghost: #adb9e3; + --note-bg-ghost: var(--purple); - --note-bg-mediant: #73eedc; + --note-bg-mediant: var(--turquoise); --note-color-mediant: #1c1c1c; - --note-bg-dominant: #adb9e3; + --note-bg-dominant: var(--purple); --note-color-dominant: #1c1c1c; @@ -96,40 +99,48 @@ --chip-border-color: #1c1c1c; --chip-background-color-active: #1c1c1c; - --chip-foreground-color-active: #f9f9f9; + --chip-foreground-color-active: var(--offwhite); --chip-border-color-active: #1c1c1c; --chip-background-color-muted: #ffffff; - --chip-foreground-color-muted: #474350; - --chip-border-color-muted: #474350;; + --chip-foreground-color-muted: var(--grey); + --chip-border-color-muted: var(--grey);; - --chip-foreground-color-muted-active: #f9f9f9; - --chip-background-color-muted-active: #474350; - --chip-border-color-muted-active: #474350; + --chip-foreground-color-muted-active: var(--offwhite); + --chip-background-color-muted-active: var(--grey); + --chip-border-color-muted-active: var(--grey); --form-container-bg-color: #1c1c1c; - --form-container-color: #f9f9f9; - --form-input-border-color: #f9f9f9; + --form-container-color: var(--offwhite); + --form-input-border-color: var(--offwhite); --form-input-bg-color: #1c1c1c; - --form-label-color: #f9f9f9; + --form-label-color: var(--offwhite); --form-input-color: #ffffff; - --form-input-autofill-bg-color: #fafac6; + --form-input-autofill-bg-color: var(--yellow); --form-input-autofill-color: #1c1c1c; --video-loader-background-color: #1c1c1c; - --info-toggle-foreground-color: #474350; + --info-toggle-foreground-color: var(--grey); + --card-background-color: #ffffff; + --card-border-color: #1c1c1c; + --card-box-shadow-color: var(--grey); + --card-image-border-color: #1c1c1c; + --chip-tag-background-color: var(--peach); + --chip-tag-foreground-color: var(--black); + + --similar-modes-background-color: var(--peach); } :root[color-mode="dark"] { --error-bg: #d64045; - --error-fg: #f9f9f9; + --error-fg: var(--offwhite); --success-bg: #84dd63; - --background-color-base: #202124; - --background-color-light: #474350; + --background-color-base: var(--black); + --background-color-light: var(--grey); --foreground-color-base: #e1e1e1; - --text-link-color: #fecdaa; + --text-link-color: var(--peach); --text-link-hover-color: #FD7C21; --string-color: #e1e1e1; @@ -141,10 +152,10 @@ --fret-marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23474350'/%3E%3C/svg%3E"); - --note-color: #202124; + --note-color: var(--black); --note-background: #b8b8b8; - --note-bg-tonic: #fecdaa; + --note-bg-tonic: var(--peach); --note-color-tonic: #1c1c1c; --note-bg-ghost: #768AD0; @@ -155,33 +166,41 @@ --note-bg-dominant: #CA5502; --note-color-dominant: #1c1c1c; - --chip-background-color: #474350; + --chip-background-color: var(--grey); --chip-foreground-color: #e1e1e1; - --chip-border-color: #474350; + --chip-border-color: var(--grey); - --chip-background-color-active: #fecdaa; - --chip-foreground-color-active: #202124; - --chip-border-color-active: #fecdaa; + --chip-background-color-active: var(--peach); + --chip-foreground-color-active: var(--black); + --chip-border-color-active: var(--peach); - --chip-background-color-muted: #474350; + --chip-background-color-muted: var(--grey); --chip-foreground-color-muted: #e1e1e1; - --chip-border-color-muted: #474350; + --chip-border-color-muted: var(--grey); - --chip-foreground-color-muted-active: #fecdaa; - --chip-background-color-muted-active: #202124; - --chip-border-color-muted-active: #fecdaa; + --chip-foreground-color-muted-active: var(--peach); + --chip-background-color-muted-active: var(--black); + --chip-border-color-muted-active: var(--peach); --form-container-bg-color: #1c1c1c; - --form-container-color: #f9f9f9; - --form-input-border-color: #f9f9f9; + --form-container-color: var(--offwhite); + --form-input-border-color: var(--offwhite); --form-input-bg-color: #1c1c1c; - --form-label-color: #f9f9f9; + --form-label-color: var(--offwhite); --form-input-color: #ffffff; - --form-input-autofill-bg-color: #fafac6; + --form-input-autofill-bg-color: var(--yellow); --form-input-autofill-color: #1c1c1c; - --video-loader-background-color: #474350; + --video-loader-background-color: var(--grey); --info-toggle-foreground-color: #e1e1e1; + --card-background-color: var(--grey); + --card-border-color: var(--grey); + --card-box-shadow-color: #0A0A0B; + --card-image-border-color: #0A0A0B; + --chip-tag-background-color: var(--peach); + --chip-tag-foreground-color: var(--black); + + --similar-modes-background-color: var(--black); } body { diff --git a/apps/fretonator-web/src/styles/_mixins.scss b/apps/fretonator-web/src/styles/_mixins.scss index ccd443a..c7efbf8 100644 --- a/apps/fretonator-web/src/styles/_mixins.scss +++ b/apps/fretonator-web/src/styles/_mixins.scss @@ -155,12 +155,11 @@ @include focus_accessible(); } - @mixin card { - background-color: var(--white); + background-color: var(--card-background-color); padding: pxToRem($grid-unit * 2); - border: pxToRem(2) solid var(--foreground-color-base); + border: pxToRem(2) solid var(--card-border-color); text-decoration: none; color: var(--foreground-color-base); - @include hard_box_shadow(var(--grey)); + @include hard_box_shadow(var(--card-box-shadow-color)); } diff --git a/apps/fretonator-web/src/styles/content.scss b/apps/fretonator-web/src/styles/content.scss index 89a2568..d9be9d3 100644 --- a/apps/fretonator-web/src/styles/content.scss +++ b/apps/fretonator-web/src/styles/content.scss @@ -15,25 +15,30 @@ $top_block_max_width: $screen-med; margin-bottom: pxToRem($grid-unit * 4); margin-top: pxToRem($grid-unit * 4); max-width: $top_block_max_width; + color: var(--foreground-color-base); } @mixin content_subtitle { @include font_medium; font-weight: var(--font-weight-bold); + color: var(--foreground-color-base); } @mixin content_intro_copy { @include font_bodyCopy(); margin-bottom: pxToRem($grid-unit * 4); max-width: $top_block_max_width; + color: var(--foreground-color-base); } @mixin content_copy { @include font_bodyCopy(); margin-bottom: pxToRem($grid-unit * 2); + color: var(--foreground-color-base); } @mixin content_ordered_list { @include font_bodyCopy(); padding: pxToRem($grid-unit * 3); + color: var(--foreground-color-base); } From b026979bf003e9221d1256c199c1e1fd14e27c66 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 10:33:43 +0100 Subject: [PATCH 04/14] Fixed up some theming in the root: --- .../fretboard/fretboard.component.html | 1 + .../fretboard/fretboard.component.scss | 6 ++ .../stripe-banner.component.html | 6 -- .../stripe-banner.component.scss | 30 +----- .../about-index/about-index.component.scss | 13 ++- .../contact-index.component.html | 1 + .../src/app/pages/contact/contact.module.ts | 4 +- .../home/home-index/home-index.component.html | 10 +- .../home/home-index/home-index.component.scss | 20 ++-- .../learn-index/learn-index.component.scss | 9 +- .../patterns-index.component.html | 1 + apps/fretonator-web/src/styles.scss | 91 ++++++++++++------- 12 files changed, 96 insertions(+), 96 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 505f7d9..59d0251 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -2,6 +2,7 @@ diff --git a/apps/fretonator-web/src/app/common/stripe-banner/stripe-banner.component.scss b/apps/fretonator-web/src/app/common/stripe-banner/stripe-banner.component.scss index d556928..bcc3d81 100644 --- a/apps/fretonator-web/src/app/common/stripe-banner/stripe-banner.component.scss +++ b/apps/fretonator-web/src/app/common/stripe-banner/stripe-banner.component.scss @@ -4,33 +4,7 @@ .stripeBanner { display: block; width: 100%; -} - -.stripeBanner__segment { position: relative; - height: pxToRem($grid-unit * 2); - - &.grey { - background-color: var(--grey); - } - - &.peach { - background-color: var(--peach); - } - - &.yellow { - background-color: var(--yellow); - } - - &.purple { - background-color: var(--purple); - } - - &.blue { - background-color: var(--blue); - } - - &.turquoise { - background-color: var(--turquoise); - } + height: pxToRem($grid-unit); + background-color: var(--stripe-banner-background); } diff --git a/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.scss b/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.scss index 008aa0b..9edfcfd 100644 --- a/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.scss +++ b/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.scss @@ -1,32 +1,31 @@ @import '../../../../styles/vars'; @import '../../../../styles/mixins'; @import '../../../../styles/typography'; +@import '../../../../styles/content'; .about__container { - @include content_wrapper(); + @include content_container; max-width: $screen-med; } .about__subtitle { - @include font_medium; - text-transform: none; - font-weight: var(--font-weight-bold); + @include content_subtitle; } .about__title { - @include font_large; + @include content_title; margin-top: pxToRem($grid-unit * 4); margin-bottom: pxToRem($grid-unit * 2); } .about__copy { - @include font_bodyCopy; + @include content_copy; margin-top: pxToRem($grid-unit * 4); margin-bottom: pxToRem($grid-unit * 4); } .about__signOff { - @include font_bodyCopy; + @include content_copy; font-style: italic; font-weight: var(--font-weight-bold); } diff --git a/apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html b/apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html index ffe3258..4078fc6 100644 --- a/apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html +++ b/apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html @@ -1,3 +1,4 @@ +

Share the love ❤️

My goal with diff --git a/apps/fretonator-web/src/app/pages/contact/contact.module.ts b/apps/fretonator-web/src/app/pages/contact/contact.module.ts index a2e299f..f34f37b 100644 --- a/apps/fretonator-web/src/app/pages/contact/contact.module.ts +++ b/apps/fretonator-web/src/app/pages/contact/contact.module.ts @@ -8,6 +8,7 @@ import { ContactSuccessComponent } from './contact-success/contact-success.compo import { HttpClientModule } from '@angular/common/http'; import { FormService } from './form.service'; import { TickModule } from '../../common/svgs/tick/tick.module'; +import { StripeBannerModule } from '../../common/stripe-banner/stripe-banner.module'; @NgModule({ @@ -18,7 +19,8 @@ import { TickModule } from '../../common/svgs/tick/tick.module'; ReactiveFormsModule, FormsModule, HttpClientModule, - TickModule + TickModule, + StripeBannerModule ], providers: [ FormService diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html index 8c733a7..366652d 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html @@ -7,11 +7,11 @@

id="howToList" [class.hidden]="!showHowTo" [attr.aria-expanded]="showHowTo"> -
  • Choose a starting note
    • -
  • Pick a mode
    • -
  • Check out the fretboard
    • -
  • Have a jam!
    • -
  • Learn the theory
    • +
  • Choose a starting note
    • +
  • Pick a mode
    • +
  • Check out the fretboard
    • +
  • Have a jam!
    • +
  • Learn the theory

    • diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 9ba117c..962aa52 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -3,7 +3,6 @@ @import "./styles/mixins"; :root { - --black: #202124; --white: #ffffff; --offwhite: #f9f9f9; @@ -13,6 +12,8 @@ --blue: #3993dd; --turquoise: #73eedc; --purple: #adb9e3; + --coral: #F67983; + --mint: #D9F9A5; --font-weight-normal: 300; --font-weight-bold: 500; @@ -65,12 +66,20 @@ --background-color-base: var(--offwhite); --background-color-light: #ffffff; - --foreground-color-base: #1c1c1c; + --foreground-color-base: var(--black); --text-link-color: var(--grey); --text-link-hover-color: var(--peach); - --string-color: #1c1c1c; - --string-label-color: #1c1c1c; + --stripe-banner-background: var(--peach); + + --hero-block-background-step-1: var(--peach); + --hero-block-background-step-2: var(--yellow); + --hero-block-background-step-3: var(--purple); + --hero-block-background-step-4: var(--turquoise); + --hero-block-background-step-5: var(--blue); + + --string-color: var(--black); + --string-label-color: var(--black); --nut-color: #1a1a1a; --fret-color: rgba(28, 28, 28, 0.2); --fretboard-help-text-color: var(--grey); @@ -79,52 +88,54 @@ --fret-marker-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); --note-color: var(--yellow); - --note-background: #1c1c1c; - + --note-background: var(--black); --note-bg-tonic: var(--peach); - --note-color-tonic: #1c1c1c; + --note-color-tonic: var(--black); + --note-background-learn-theme: var(--note-background); --note-bg-ghost: var(--purple); --note-bg-mediant: var(--turquoise); - --note-color-mediant: #1c1c1c; + --note-color-mediant: var(--black); --note-bg-dominant: var(--purple); - --note-color-dominant: #1c1c1c; - + --note-color-dominant: var(--black); --chip-background-color: #ffffff; - --chip-foreground-color: #1c1c1c; - --chip-border-color: #1c1c1c; + --chip-foreground-color: var(--black); + --chip-border-color: var(--black); - --chip-background-color-active: #1c1c1c; + --chip-background-color-active: var(--black); --chip-foreground-color-active: var(--offwhite); - --chip-border-color-active: #1c1c1c; + --chip-border-color-active: var(--black); --chip-background-color-muted: #ffffff; --chip-foreground-color-muted: var(--grey); - --chip-border-color-muted: var(--grey);; + --chip-border-color-muted: var(--grey); --chip-foreground-color-muted-active: var(--offwhite); --chip-background-color-muted-active: var(--grey); --chip-border-color-muted-active: var(--grey); - --form-container-bg-color: #1c1c1c; + --form-container-bg-color: var(--black); --form-container-color: var(--offwhite); --form-input-border-color: var(--offwhite); - --form-input-bg-color: #1c1c1c; + --form-input-bg-color: var(--black); --form-label-color: var(--offwhite); --form-input-color: #ffffff; --form-input-autofill-bg-color: var(--yellow); - --form-input-autofill-color: #1c1c1c; + --form-input-autofill-color: var(--black); - --video-loader-background-color: #1c1c1c; + --video-loader-background-color: var(--black); --info-toggle-foreground-color: var(--grey); --card-background-color: #ffffff; - --card-border-color: #1c1c1c; + --card-border-color: var(--black); --card-box-shadow-color: var(--grey); - --card-image-border-color: #1c1c1c; + --card-image-border-color: var(--black); + --card-button-foreground: var(--black); + --card-button-backgorund: var(--offwhite); + --card-button-hover: var(--purple); --chip-tag-background-color: var(--peach); --chip-tag-foreground-color: var(--black); @@ -143,6 +154,14 @@ --text-link-color: var(--peach); --text-link-hover-color: #FD7C21; + --stripe-banner-background: var(--peach); + + --hero-block-background-step-1: var(--peach); + --hero-block-background-step-2: var(--coral); + --hero-block-background-step-3: var(--mint); + --hero-block-background-step-4: var(--coral); + --hero-block-background-step-5: var(--peach); + --string-color: #e1e1e1; --string-label-color: #e1e1e1; --nut-color: #d3d3d3; @@ -152,19 +171,20 @@ --fret-marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23474350'/%3E%3C/svg%3E"); - --note-color: var(--black); - --note-background: #b8b8b8; + --note-color: var(--offwhite); + --note-background: #76818E; --note-bg-tonic: var(--peach); - --note-color-tonic: #1c1c1c; + --note-color-tonic: var(--black); - --note-bg-ghost: #768AD0; + --note-background-learn-theme: var(--peach); + --note-bg-ghost: var(--note-background); - --note-bg-mediant: #FD7C21; - --note-color-mediant: #1c1c1c; + --note-bg-mediant: var(--coral); + --note-color-mediant: var(--black); - --note-bg-dominant: #CA5502; - --note-color-dominant: #1c1c1c; + --note-bg-dominant: #D9F9A5; + --note-color-dominant: var(--black); --chip-background-color: var(--grey); --chip-foreground-color: #e1e1e1; @@ -182,22 +202,25 @@ --chip-background-color-muted-active: var(--black); --chip-border-color-muted-active: var(--peach); - --form-container-bg-color: #1c1c1c; + --form-container-bg-color: var(--black); --form-container-color: var(--offwhite); --form-input-border-color: var(--offwhite); - --form-input-bg-color: #1c1c1c; + --form-input-bg-color: var(--black); --form-label-color: var(--offwhite); --form-input-color: #ffffff; --form-input-autofill-bg-color: var(--yellow); - --form-input-autofill-color: #1c1c1c; + --form-input-autofill-color: var(--black); --video-loader-background-color: var(--grey); --info-toggle-foreground-color: #e1e1e1; --card-background-color: var(--grey); --card-border-color: var(--grey); --card-box-shadow-color: #0A0A0B; - --card-image-border-color: #0A0A0B; - --chip-tag-background-color: var(--peach); + --card-image-border-color: var(--black); + --card-button-foreground: var(--offwhite); + --card-button-backgorund: var(--black); + --card-button-hover: var(--yellow); + --chip-tag-background-color: var(--coral); --chip-tag-foreground-color: var(--black); --similar-modes-background-color: var(--black); From a691e6d25e73b2cf291d097e0d6ac8dda1a82a67 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 10:35:09 +0100 Subject: [PATCH 05/14] Re-add configuration to freboatd --- .../src/app/common/fretonator/fretboard/fretboard.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index f686796..6d7fa19 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -46,6 +46,7 @@ export class FretboardComponent implements OnChanges, OnInit { @Input() mode: Mode; @Input() stringNamesAreCaseSensitive = false; @Input() loadExpanded = false; + @Input() configuration; orientation; fretMode; frets; From d082d741add7c9f3f62a2134dddb7fcc73fa5e2e Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 11:07:52 +0100 Subject: [PATCH 06/14] Set up theme toggle button --- .../app/common/header/header.component.html | 6 +++++ .../app/common/header/header.component.scss | 20 +++++++++++++++ .../src/app/common/header/header.module.ts | 6 ++++- .../app/common/svgs/moon/moon.component.html | 3 +++ .../app/common/svgs/moon/moon.component.scss | 6 +++++ .../common/svgs/moon/moon.component.spec.ts | 25 +++++++++++++++++++ .../app/common/svgs/moon/moon.component.ts | 9 +++++++ .../src/app/common/svgs/moon/moon.module.ts | 16 ++++++++++++ .../app/common/svgs/sun/sun.component.html | 4 +++ .../app/common/svgs/sun/sun.component.scss | 6 +++++ .../app/common/svgs/sun/sun.component.spec.ts | 25 +++++++++++++++++++ .../src/app/common/svgs/sun/sun.component.ts | 9 +++++++ .../src/app/common/svgs/sun/sun.module.ts | 16 ++++++++++++ apps/fretonator-web/src/styles.scss | 1 + 14 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 apps/fretonator-web/src/app/common/svgs/moon/moon.component.html create mode 100644 apps/fretonator-web/src/app/common/svgs/moon/moon.component.scss create mode 100644 apps/fretonator-web/src/app/common/svgs/moon/moon.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/moon/moon.component.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/moon/moon.module.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/sun/sun.component.html create mode 100644 apps/fretonator-web/src/app/common/svgs/sun/sun.component.scss create mode 100644 apps/fretonator-web/src/app/common/svgs/sun/sun.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/sun/sun.component.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/sun/sun.module.ts diff --git a/apps/fretonator-web/src/app/common/header/header.component.html b/apps/fretonator-web/src/app/common/header/header.component.html index 6d58e46..6fd7497 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.html +++ b/apps/fretonator-web/src/app/common/header/header.component.html @@ -25,6 +25,12 @@ +
    + +
      + + diff --git a/apps/fretonator-web/src/app/common/svgs/moon/moon.component.scss b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.scss new file mode 100644 index 0000000..84ebcd7 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.scss @@ -0,0 +1,6 @@ +.svg { + flex: 1; + height: 100%; + width: 100%; + fill: currentColor; +} diff --git a/apps/fretonator-web/src/app/common/svgs/moon/moon.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.spec.ts new file mode 100644 index 0000000..24069d6 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MoonComponent } from './moon.component'; + +describe('MoonComponent', () => { + let component: MoonComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MoonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MoonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/svgs/moon/moon.component.ts b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.ts new file mode 100644 index 0000000..0ffdb97 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/moon/moon.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-moon-svg', + templateUrl: './moon.component.html', + styleUrls: ['./moon.component.scss'] +}) +export class MoonComponent { +} diff --git a/apps/fretonator-web/src/app/common/svgs/moon/moon.module.ts b/apps/fretonator-web/src/app/common/svgs/moon/moon.module.ts new file mode 100644 index 0000000..b7926a9 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/moon/moon.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MoonComponent } from './moon.component'; + + + +@NgModule({ + declarations: [MoonComponent], + exports: [ + MoonComponent + ], + imports: [ + CommonModule + ] +}) +export class MoonModule { } diff --git a/apps/fretonator-web/src/app/common/svgs/sun/sun.component.html b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.html new file mode 100644 index 0000000..1ecff2b --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.html @@ -0,0 +1,4 @@ + + + diff --git a/apps/fretonator-web/src/app/common/svgs/sun/sun.component.scss b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.scss new file mode 100644 index 0000000..84ebcd7 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.scss @@ -0,0 +1,6 @@ +.svg { + flex: 1; + height: 100%; + width: 100%; + fill: currentColor; +} diff --git a/apps/fretonator-web/src/app/common/svgs/sun/sun.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.spec.ts new file mode 100644 index 0000000..e59451b --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SunComponent } from './sun.component'; + +describe('SunComponent', () => { + let component: SunComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SunComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SunComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/svgs/sun/sun.component.ts b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.ts new file mode 100644 index 0000000..5035da9 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/sun/sun.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sun-svg', + templateUrl: './sun.component.html', + styleUrls: ['./sun.component.scss'] +}) +export class SunComponent { +} diff --git a/apps/fretonator-web/src/app/common/svgs/sun/sun.module.ts b/apps/fretonator-web/src/app/common/svgs/sun/sun.module.ts new file mode 100644 index 0000000..79b0f0f --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/sun/sun.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SunComponent } from './sun.component'; + + + +@NgModule({ + declarations: [SunComponent], + exports: [ + SunComponent + ], + imports: [ + CommonModule + ] +}) +export class SunModule { } diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 962aa52..2df7c43 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -38,6 +38,7 @@ --header-background: var(--black); --header-logo-color: #e1e1e1; + --theme-toggle-color: #e1e1e1; --footer-background: var(--black); --footer-border-color: var(--peach); From 563d999ae991fc95f204a553a2d350bd3f43beb7 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 12:02:55 +0100 Subject: [PATCH 07/14] Toggle works in header via event emitting --- apps/fretonator-web/src/app/app.component.html | 13 ++++++++----- apps/fretonator-web/src/app/app.component.scss | 3 +++ apps/fretonator-web/src/app/app.component.ts | 14 ++++++++++++++ apps/fretonator-web/src/app/app.module.ts | 6 +++++- .../fretonator/fretboard/fretboard.component.ts | 13 +------------ .../src/app/common/header/header.component.html | 7 ++++--- .../src/app/common/header/header.component.scss | 4 ++++ .../src/app/common/header/header.component.ts | 10 +++++++++- apps/fretonator-web/src/index-dev.html | 2 +- apps/fretonator-web/src/index.html | 2 +- apps/fretonator-web/src/styles.scss | 6 +++--- 11 files changed, 53 insertions(+), 27 deletions(-) diff --git a/apps/fretonator-web/src/app/app.component.html b/apps/fretonator-web/src/app/app.component.html index f8ed5ad..0a2cfe5 100644 --- a/apps/fretonator-web/src/app/app.component.html +++ b/apps/fretonator-web/src/app/app.component.html @@ -1,5 +1,8 @@ - -
      - -
      - +
      + +
      + +
      + +
      diff --git a/apps/fretonator-web/src/app/app.component.scss b/apps/fretonator-web/src/app/app.component.scss index e69de29..dc84f1b 100644 --- a/apps/fretonator-web/src/app/app.component.scss +++ b/apps/fretonator-web/src/app/app.component.scss @@ -0,0 +1,3 @@ +.app__wrapper { + background-color: var(--background-color-base); +} diff --git a/apps/fretonator-web/src/app/app.component.ts b/apps/fretonator-web/src/app/app.component.ts index 5ff4d91..ff23720 100644 --- a/apps/fretonator-web/src/app/app.component.ts +++ b/apps/fretonator-web/src/app/app.component.ts @@ -1,6 +1,11 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; import { GlobalService } from './global.service'; +export const ColorModes = { + light: 'light', + dark: 'dark' +}; + @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -8,6 +13,7 @@ import { GlobalService } from './global.service'; }) export class AppComponent implements AfterViewInit { @ViewChild('globalScrollTarget') globalScrollTarget: ElementRef; + colorMode = ColorModes.dark; constructor(private globalService: GlobalService) { } @@ -15,4 +21,12 @@ export class AppComponent implements AfterViewInit { ngAfterViewInit() { this.globalService.setGlobalScrollTarget(this.globalScrollTarget.nativeElement); } + + toggleColorMode() { + if (this.colorMode === ColorModes.dark) { + this.colorMode = ColorModes.light; + } else { + this.colorMode = ColorModes.dark; + } + } } diff --git a/apps/fretonator-web/src/app/app.module.ts b/apps/fretonator-web/src/app/app.module.ts index ff76e4e..0811f8a 100644 --- a/apps/fretonator-web/src/app/app.module.ts +++ b/apps/fretonator-web/src/app/app.module.ts @@ -6,6 +6,8 @@ import { AppComponent } from './app.component'; import { HeaderModule } from './common/header/header.module'; import { FooterModule } from './common/footer/footer.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MoonModule } from './common/svgs/moon/moon.module'; +import { SunModule } from './common/svgs/sun/sun.module'; // import { ServiceWorkerModule } from '@angular/service-worker'; @@ -16,7 +18,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; BrowserAnimationsModule, AppRoutingModule, HeaderModule, - FooterModule + FooterModule, + MoonModule, + SunModule // ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), ], providers: [], diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index 6d7fa19..0dcfd54 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -1,17 +1,6 @@ -import { - AfterViewInit, - Component, - ElementRef, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - ViewChild -} from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'; import { FretMap, Mode } from '../../../util/types'; import { NotePlaybackService } from '../../playback/note-playback.service'; -import { GlobalService } from '../../../global.service'; import { AbstractDataService } from '../../abstract-data/abstract-data.service'; export enum FretMode { diff --git a/apps/fretonator-web/src/app/common/header/header.component.html b/apps/fretonator-web/src/app/common/header/header.component.html index 6fd7497..5191d95 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.html +++ b/apps/fretonator-web/src/app/common/header/header.component.html @@ -26,9 +26,10 @@
      -
    diff --git a/apps/fretonator-web/src/app/common/header/header.component.scss b/apps/fretonator-web/src/app/common/header/header.component.scss index c2b6fbc..32d1c66 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.scss +++ b/apps/fretonator-web/src/app/common/header/header.component.scss @@ -218,10 +218,14 @@ } .theme__toggle { + cursor: pointer; appearance: none; background-color: transparent; border: 0; height: pxToRem($grid-unit * 4); width: pxToRem($grid-unit * 4); color: var(--theme-toggle-color); + + @include focus_accessible; } + diff --git a/apps/fretonator-web/src/app/common/header/header.component.ts b/apps/fretonator-web/src/app/common/header/header.component.ts index 635a508..222f3e7 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.ts +++ b/apps/fretonator-web/src/app/common/header/header.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { ColorModes } from '../../app.component'; @Component({ selector: 'app-header', @@ -6,7 +7,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { + @Output() toggleColorMode = new EventEmitter(); isMenuVisible = false; + darkColorMode = true; constructor() { } @@ -17,4 +20,9 @@ export class HeaderComponent implements OnInit { toggleMenu() { this.isMenuVisible = !this.isMenuVisible; } + + toggleTheme() { + this.darkColorMode = !this.darkColorMode; + this.toggleColorMode.emit(); + } } diff --git a/apps/fretonator-web/src/index-dev.html b/apps/fretonator-web/src/index-dev.html index 01c57be..b584a98 100644 --- a/apps/fretonator-web/src/index-dev.html +++ b/apps/fretonator-web/src/index-dev.html @@ -1,5 +1,5 @@ - + diff --git a/apps/fretonator-web/src/index.html b/apps/fretonator-web/src/index.html index 814237f..2818dc1 100644 --- a/apps/fretonator-web/src/index.html +++ b/apps/fretonator-web/src/index.html @@ -1,5 +1,5 @@ - + diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 2df7c43..cf312e7 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -59,7 +59,7 @@ } -:root[color-mode="light"] { +[color-mode="light"] { --error-bg: #d64045; --error-fg: var(--offwhite); @@ -143,7 +143,7 @@ --similar-modes-background-color: var(--peach); } -:root[color-mode="dark"] { +[color-mode="dark"] { --error-bg: #d64045; --error-fg: var(--offwhite); @@ -232,7 +232,6 @@ body { font-size: 16px; font-family: var(--font-family-main); font-weight: var(--font-weight-normal); - background-color: var(--background-color-base); * { margin: 0; @@ -240,3 +239,4 @@ body { font-weight: var(--font-weight-normal); } } + From 30fc30e7ed19ac2454c0499e0e36205f518ab8f8 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 12:05:17 +0100 Subject: [PATCH 08/14] Update snapshots --- .../header.component.spec.ts.snap | 23 + .../home-index.component.spec.ts.snap | 3166 ++++++++--------- 2 files changed, 1605 insertions(+), 1584 deletions(-) diff --git a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap index b38a710..0cd7f20 100644 --- a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap +++ b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap @@ -2,7 +2,9 @@ exports[`HeaderComponent should match snapshot 1`] = `
    +
    + +
    +
    -
    -

    + +
    - Choose a starting note -

    - -
    - - - - A - - - + + + - - B - - - + + + - - C - - - + + + - - D - - - + + + - - E - - - + + + - - F - - - + + + - - G - - -
    -     - -
    + +
    +     + +
    + + - - - - C - - - - + + + + - - C# - - -
    -     -
    -
    + +
    + +
    +
    +

    -

    + +
    - Pick a mode -

    - -
    - - - - Ionian (Major) - - - + + + - - Dorian - - - + + + - - Phrygian - - - + + + - - Lydian - - - + + + - - Mixolydian - - - + + + - - Aeolian (Minor) - - - + + + - - Locrian - - - + + + - - Harmonic Minor - - - + + + - - Phrygian Dominant - - - + + + - - Major Pentatonic - - - + + + - - Minor Pentatonic - - -
    -     -
    - -
    + +
    + +
    + +

    + Check out the fretboard +

    + + + +
    - Check out the fretboard - - - - -
    - + - - + - -
    + Right handed + + +
    +
    + +
    +
    - -
    -
    +
    - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    + class="fretboard__cell fretboard__cell--selected" + data-degree="subdominant" + data-display-note="F" + data-fret="1" + data-mode="ionian" + data-string="E" + /> +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    + class="fretboard__cell" + data-fret="2" + data-mode="ionian" + data-string="E" + /> + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    -

    + + + - - - - - Tap notes on the fretboard for sound! + class="fretboard__help" + data-fret="0" + /> + + + + + + + + + + + + + + + + + + + + + + + + + +

    +
    +

    + + + + + + Tap notes on the fretboard for sound! - - +

    + +
    + + Learn how to break this down into patterns in our learning hub → + +
    + + +
    - - Learn how to break this down into patterns in our learning hub → - -
    - - -
    -
    -

    - Have a jam -

    -

    - C Ionian (Major) Jam Track by Tom Strahle -

    -
    -
    +

    - - -

    -

    - View on YouTube -

    - - https://www.youtube.com/watch?v=oMZz2FeV8q4 - -
    - - -
    + C Ionian (Major) Jam Track by Tom Strahle +

    -     -
    - Learn the theory -
    -
    - -
    -
    -

    - - Scale -

    -
    - - -
    - C -
    - -
    - D -
    - -
    - E -
    - -
    - F -
    - -
    - G -
    - -
    - A -
    - -
    - B -
    -
    -
    - - -
    -
    - -
    -

    - Degrees -

    -
    - - 1 - - - 3 - - - 5 - -
    - + View on YouTube + + + https://www.youtube.com/watch?v=oMZz2FeV8q4 +
    -
    + - -     - +
    +
    + +

    + Learn the theory +

    +
    + +
    -

    - Mode interval pattern -

    + + Scale +
    -
    - tone -
    - - - - - - - -
    - tone -
    - - - - - - - -
    - semitone -
    - - - - - - + C +

    -
    - tone -
    + D +

    - - - - + E +

    - -
    - tone -
    + F +

    - - - - - + G +

    -
    - tone -
    + A +

    - - - - - - -
    +
    +
    +
    - - +

    - Chords (triads) + Degrees

    - - -
    - Cmaj -
    - - - + 1 - - -
    - Dmin -
    - - - - - - - -
    - Emin -
    - - - - - - - -
    - Fmaj -
    - - - - - - - -
    - Gmaj -
    - - - + 3 - - -
    - Amin -
    - - - + 5 - - -
    - Bdim -
    - -
    +
    -     - - +
    + + +     + +
    +

    + Mode interval pattern +

    -

    - Did you know? -

    -

    + + - If you know the notes of C Ionian (Major), you can play the modes below, which use the exact same notes. -

    -
    + + +
    - -
    - - - - D Dorian - - - - - E Phrygian - - - - - F Lydian - - - - - G Mixolydian - - - - - A Aeolian - - - - - B Locrian - - -
    -     -
    -

    + + + - + + + +

    - What's more, if you know the Ionian pattern, you can play the Ionian mode in any key. Just play the pattern starting on your chosen starting note (root note). -

    -

    + + - In order to play and jam in all 7 of the main modes, you - - only need to learn 7 patterns - - . -

    -

    + + +

    - These patterns always appear in - - the exact same order - - across the fretboard, regardless of the starting note or mode. -

    -

    + + - You might have heard this named as the - - 3 note per string - - method. Learn more about this and the 7 standard modes of the major scale in our learning hub. -

    - + + +
    + tone +
    + + + - + + + +
    + tone +
    + + + - + + + +
    - Go to the Hub - + semitone +
    + +
    - -
    - -
    - +
    + + +
    +

    + Chords (triads) +

    +
    + + +
    + Cmaj +
    + + + - + + + +
    + Dmin +
    + + + - + + + +
    + Emin +
    + + + - + + + +
    + Fmaj +
    + + + - + + + +
    + Gmaj +
    + + + - + + + +
    + Amin +
    + + + - + + + +
    + Bdim +
    + + +
    +
    +     + + +
    +

    + Did you know? +

    +

    + If you know the notes of C Ionian (Major), you can play the modes below, which use the exact same notes. +

    +
    + +
    + + + + D Dorian + + + + + E Phrygian + + + + + F Lydian + + + + + G Mixolydian + + + + + A Aeolian + + + + + B Locrian + + +
    +     +
    +

    + What's more, if you know the Ionian pattern, you can play the Ionian mode in any key. Just play the pattern starting on your chosen starting note (root note). +

    +

    + In order to play and jam in all 7 of the main modes, you + + only need to learn 7 patterns + + . +

    +

    + These patterns always appear in + + the exact same order + + across the fretboard, regardless of the starting note or mode. +

    +

    + You might have heard this named as the + + 3 note per string + + method. Learn more about this and the 7 standard modes of the major scale in our learning hub. +

    + + Go to the Hub + +
    +     +
    + +
    `; From 52f9ea71b8dafc5dfa03633c978d549acaee4ad8 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 12:14:06 +0100 Subject: [PATCH 09/14] Pass around setDarkColorMode as a bool and store in local storage --- .../fretonator-web/src/app/app.component.html | 2 +- apps/fretonator-web/src/app/app.component.ts | 8 +++--- .../src/app/common/header/header.component.ts | 25 ++++++++++++++++--- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/apps/fretonator-web/src/app/app.component.html b/apps/fretonator-web/src/app/app.component.html index 0a2cfe5..fb0ebf9 100644 --- a/apps/fretonator-web/src/app/app.component.html +++ b/apps/fretonator-web/src/app/app.component.html @@ -1,6 +1,6 @@
    - +
    diff --git a/apps/fretonator-web/src/app/app.component.ts b/apps/fretonator-web/src/app/app.component.ts index ff23720..4129ba4 100644 --- a/apps/fretonator-web/src/app/app.component.ts +++ b/apps/fretonator-web/src/app/app.component.ts @@ -22,11 +22,11 @@ export class AppComponent implements AfterViewInit { this.globalService.setGlobalScrollTarget(this.globalScrollTarget.nativeElement); } - toggleColorMode() { - if (this.colorMode === ColorModes.dark) { - this.colorMode = ColorModes.light; - } else { + setDarkColorMode(dark: Boolean) { + if (dark) { this.colorMode = ColorModes.dark; + } else { + this.colorMode = ColorModes.light; } } } diff --git a/apps/fretonator-web/src/app/common/header/header.component.ts b/apps/fretonator-web/src/app/common/header/header.component.ts index 222f3e7..6f67d4e 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.ts +++ b/apps/fretonator-web/src/app/common/header/header.component.ts @@ -1,5 +1,10 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { ColorModes } from '../../app.component'; +import { AbstractDataService } from '../abstract-data/abstract-data.service'; + +const StorageKeys = { + darkColorMode: 'fretonator_darkColorMode', +} @Component({ selector: 'app-header', @@ -7,14 +12,27 @@ import { ColorModes } from '../../app.component'; styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { - @Output() toggleColorMode = new EventEmitter(); + @Output() setDarkColorMode = new EventEmitter(); isMenuVisible = false; darkColorMode = true; - constructor() { + constructor(private localStorage: AbstractDataService) { } ngOnInit(): void { + const _darkColorMode = this.localStorage.getItem(StorageKeys.darkColorMode); + switch (_darkColorMode) { + case false: + this.darkColorMode = false; + break; + case true: + this.darkColorMode = true; + break; + default: + this.darkColorMode = true; + } + + this.setDarkColorMode.emit(this.darkColorMode); } toggleMenu() { @@ -23,6 +41,7 @@ export class HeaderComponent implements OnInit { toggleTheme() { this.darkColorMode = !this.darkColorMode; - this.toggleColorMode.emit(); + this.setDarkColorMode.emit(this.darkColorMode); + this.localStorage.setItem(StorageKeys.darkColorMode, this.darkColorMode); } } From c63080c9566690968d753937606bb0b4d17258c4 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Thu, 2 Jul 2020 12:17:42 +0100 Subject: [PATCH 10/14] update snapshot --- .../common/header/__snapshots__/header.component.spec.ts.snap | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap index 0cd7f20..91f76ff 100644 --- a/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap +++ b/apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap @@ -4,7 +4,8 @@ exports[`HeaderComponent should match snapshot 1`] = `
    Date: Thu, 2 Jul 2020 12:35:22 +0100 Subject: [PATCH 11/14] CSS tweaks for accessibility --- .../src/app/common/footer/footer.component.scss | 4 ++-- .../src/app/common/header/header.component.html | 1 + .../learn/patterns-index/patterns-index.component.scss | 6 +++--- apps/fretonator-web/src/styles.scss | 7 ++++--- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/fretonator-web/src/app/common/footer/footer.component.scss b/apps/fretonator-web/src/app/common/footer/footer.component.scss index e85df51..b764828 100644 --- a/apps/fretonator-web/src/app/common/footer/footer.component.scss +++ b/apps/fretonator-web/src/app/common/footer/footer.component.scss @@ -156,8 +156,8 @@ background-color: var(--footer-background); margin-top: pxToRem($grid-unit * 4); padding: pxToRem($grid-unit / 2) pxToRem($grid-unit * 2); - color: var(--footer-link-color); - border-color: var(--footer-link-color); + color: var(--footer-small-button-accent-color); + border-color: var(--footer-small-button-accent-color); &:focus { border-color: transparent; diff --git a/apps/fretonator-web/src/app/common/header/header.component.html b/apps/fretonator-web/src/app/common/header/header.component.html index 5191d95..eee38e5 100644 --- a/apps/fretonator-web/src/app/common/header/header.component.html +++ b/apps/fretonator-web/src/app/common/header/header.component.html @@ -27,6 +27,7 @@