(refactor): Upgrade options (w/mobile); button foundations

src/app/common/components/marketing/footer.component.scss

@@ -2,6 +2,7 @@
 
 m-marketing__footer {
  display: block;
+ margin-top: 105px;
 
  @include m-theme() {
  background: linear-gradient(

src/app/common/components/marketing/marketing.component.html

 <div class="m-marketing">
- <ng-content></ng-content>
+ <ng-content select=".m-marketing__main"></ng-content>
+
+ <div class="m-marketing__sep" *ngIf="bodyWrapper?.children?.length > 0"></div>
+
+ <div class="m-marketing__bodyWrapper" #bodyWrapper>
+ <ng-content select=".m-marketing__body"></ng-content>
+ </div>
 </div>
 
 <m-marketing__footer></m-marketing__footer>

src/app/common/components/marketing/marketing.component.scss

 @import '../../../foundation/grid-values';
 
 m-marketing {
+ display: block;
+ font-family: Roboto, sans-serif;
+
+ @include m-theme() {
+ background: themed($m-white);
+ color: themed($m-grey-800);
+ }
+
  .m-marketing {
  font-family: Roboto, sans-serif;
  font-weight: 400;
@@ -28,4 +36,12 @@ m-marketing {
  border-color: themed($m-grey-50);
  }
  }
+
+ .m-marketing__body {
+ > * > * {
+ max-width: 1084px;
+ margin: 0 auto;
+ box-sizing: border-box;
+ }
+ }
 }

src/app/foundation/buttons.scss

+.mf-button {
+ display: inline-block;
+ padding: 14px 32px;
+ font-size: 18px;
+ line-height: 24px;
+ border: 1px solid;
+ border-radius: 2px;
+ font-weight: 400;
+ cursor: pointer;
+ user-select: none;
+
+ @include m-theme() {
+ background: themed($m-blue);
+ color: themed($m-white-always);
+ border-color: themed($m-blue);
+ }
+
+ &.mf-button--hollow {
+ @include m-theme() {
+ background: themed($m-white);
+ color: themed($m-black);
+ border-color: themed($m-blue);
+ }
+ }
+}

src/app/modules/upgrades/upgrade-options.component.html

@@ -29,17 +29,23 @@
  </div>
 
  <div class="m-upgradesUpgradeOptions__plans">
- <div class="m-upgradesUpgradeOptions__plan">
- <h3>Plus</h3>
+ <div
+ class="m-upgradesUpgradeOptionsPlan__row m-upgradesUpgradeOptionsPlan__row--first"
+ >
+ <h3 i18n>Plus</h3>
 
  <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  Ideal for all Minds Users
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__description">
  Upgrade your channel to unlock new features and upgrade your experience.
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
  <li>Access exclusive content</li>
  <li>Channel verification</li>
@@ -47,9 +53,13 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/plus"
+ >More info</a
+ >
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__pricing">
  <span>$5</span> per month
  </p>
@@ -57,23 +67,31 @@
  <p class="m-upgradesUpgradeOptionsPlan__offer">
  $7 per month
  </p>
+ </div>
 
- <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
- >Upgrade to Plus</a
- >
+ <div class="m-upgradesUpgradeOptionsPlan__row">
+ <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ Upgrade to Plus
+ </a>
  </div>
 
- <div class="m-upgradesUpgradeOptions__plan">
+ <div
+ class="m-upgradesUpgradeOptionsPlan__row m-upgradesUpgradeOptionsPlan__row--first"
+ >
  <h3>Pro</h3>
 
  <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  For independent content creators
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__description">
  The ultimate platform for independent content creators on the Internet.
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
  <li>TBD</li>
  <li>TBD</li>
@@ -81,9 +99,13 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo" routerLink="/pro"
+ >More info</a
+ >
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__pricing">
  <span>$50</span> per month
  </p>
@@ -91,23 +113,31 @@
  <p class="m-upgradesUpgradeOptionsPlan__offer">
  $60 per month
  </p>
+ </div>
 
- <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
- >Upgrade to Pro</a
- >
+ <div class="m-upgradesUpgradeOptionsPlan__row">
+ <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ Upgrade to Pro
+ </a>
  </div>
 
- <div class="m-upgradesUpgradeOptions__plan">
+ <div
+ class="m-upgradesUpgradeOptionsPlan__row m-upgradesUpgradeOptionsPlan__row--first"
+ >
  <h3>Node</h3>
 
  <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  For next-level content creators
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__description">
  Launch your own white-labeled social network and mobile app.
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <ul>
  <li>White-labeled mobile app</li>
  <li>Custom domain</li>
@@ -115,16 +145,20 @@
  </ul>
 
  <p>
- <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo" href="#">More info</a>
  </p>
+ </div>
 
+ <div class="m-upgradesUpgradeOptionsPlan__row">
  <p class="m-upgradesUpgradeOptionsPlan__pricing">
  Contact us for pricing
  </p>
+ </div>
 
- <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
- >Contact us</a
- >
+ <div class="m-upgradesUpgradeOptionsPlan__row">
+ <a class="mf-button m-upgradesUpgradeOptionsPlan__action">
+ Contact us
+ </a>
  </div>
  </div>
 </div>

src/app/modules/upgrades/upgrade-options.component.scss

@@ -9,10 +9,20 @@ m-upgrades__upgradeOptions {
  align-items: center;
  justify-content: space-between;
 
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: block;
+ margin: 0 40px 25px;
+ }
+
  h2 {
  font-size: 32px;
  font-weight: 900;
  line-height: 43px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 24px;
+ margin: 0 0 20px;
+ }
  }
 
  .m-upgradesUpgradeOptionsHeader__toggleContainer {
@@ -36,18 +46,30 @@ m-upgrades__upgradeOptions {
 
  .m-upgradesUpgradeOptions__plans {
  display: grid;
- grid-gap: 65px;
+ grid-auto-flow: column;
+ grid-column-gap: 65px;
+ grid-row-gap: 0;
  grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(5, auto);
  padding: 40px 60px 60px;
 
  @include m-theme() {
  background-color: lighten(themed($m-grey-50), 5%);
  }
- }
 
- .m-upgradesUpgradeOptions__plan {
- position: relative;
- padding-bottom: 75px;
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: block;
+ margin: 0 20px;
+ padding: 40px;
+
+ .m-upgradesUpgradeOptionsPlan__row.m-upgradesUpgradeOptionsPlan__row--first {
+ margin-top: 40px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+ }
 
  h3 {
  font-size: 28px;
@@ -99,6 +121,7 @@ m-upgrades__upgradeOptions {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
+ margin-bottom: 0;
 
  @include m-theme() {
  color: themed($m-grey-600);
@@ -114,9 +137,9 @@ m-upgrades__upgradeOptions {
  }
 
  .m-upgradesUpgradeOptionsPlan__offer {
- margin: -32px 0 0 0;
  font-size: 14px;
  text-decoration: line-through;
+ margin-bottom: 0;
 
  @include m-theme() {
  color: themed($m-red);
@@ -124,8 +147,8 @@ m-upgrades__upgradeOptions {
  }
 
  .m-upgradesUpgradeOptionsPlan__action {
- position: absolute;
- bottom: 0;
+ display: inline-block;
+ margin-top: 25px;
  }
  }
 }

src/app/modules/upgrades/upgrades.component.html

-<m-marketing pageTitle="Upgrade your account" i18n-pageTitle>
- <div class="m-upgrades">
+<m-marketing class="m-upgrades" pageTitle="Upgrade your account" i18n-pageTitle>
+ <div class="m-marketing__main">
  <section class="m-upgrades__grid m-upgrades__mainFeatures">
  <div class="m-upgrades__gridColumn--5">
  <h1>Upgrade your Minds experience</h1>
@@ -47,11 +47,13 @@
  <li><img src="" alt="The Joe Rogan Experience" /></li>
  </ul>
  </section>
+ </div>
 
-  <div class="m-upgrades__separator"></div>
-
-  <m-upgrades__upgradeOptions class=""></m-upgrades__upgradeOptions>
+ <div class="m-marketing__body">
+ <m-upgrades__upgradeOptions></m-upgrades__upgradeOptions>
+ </div>
 
- <m-upgrades__buyTokens class=""></m-upgrades__buyTokens>
+ <div class="m-marketing__body">
+ <m-upgrades__buyTokens></m-upgrades__buyTokens>
  </div>
 </m-marketing>

src/app/modules/upgrades/upgrades.component.scss

-m-upgrades {
- display: block;
-
- @include m-theme() {
- background: themed($m-white);
- }
-}
-
-.m-upgrades {
- $cols: 12;
- $width: 72px;
- $gap: 20px;
-
- max-width: (($cols * $width) + (($cols - 1) * $gap));
- margin: 0 auto;
-
- section.m-upgrades__grid {
- display: grid;
- grid-gap: $gap;
- grid-template-columns: repeat($cols, 1fr);
-
- @for $i from 1 through $cols {
- .m-upgrades__gridColumn--#{$i} {
- grid-column: auto / span $i;
- }
- }
- }
-
- .m-upgrades__separator {
- width: 100%;
- height: 0;
- margin: 40px 0;
- border-top: 1px solid;
-
- @include m-theme() {
- border-color: themed($m-grey-50);
- }
- }
-
- .m-upgrades__button {
- display: inline-block;
- padding: 14px 32px;
- font-size: 18px;
- line-height: 24px;
- border: 1px solid;
- border-radius: 2px;
- font-weight: 400;
- cursor: pointer;
- user-select: none;
-
- @include m-theme() {
- background: themed($m-blue);
- color: themed($m-white-always);
- border-color: themed($m-blue);
- }
-
- &.m-upgrades__button--hollow {
- @include m-theme() {
- background: themed($m-white);
- color: themed($m-black);
- border-color: themed($m-blue);
- }
- }
- }
-}
-
 .m-upgrades {
- @include m-theme() {
- background: themed($m-white);
- color: themed($m-grey-800);
- }
-
- h1,
- h2,
- h3,
- p,
- ul {
- font-family: Roboto, sans-serif;
- }
-
  .m-upgrades__mainFeatures {
  padding: 96px 0 75px;
  }