(wip): Upgrades page (II)

src/app/app.module.ts

@@ -70,9 +70,9 @@ import { HttpClientModule } from '@angular/common/http';
 import { AnalyticsModule } from './modules/analytics/analytics.module';
 import { ProModule } from './modules/pro/pro.module';
 import { ChannelContainerModule } from './modules/channel-container/channel-container.module';
+import { UpgradesModule } from './modules/upgrades/upgrades.module';
 
 import * as Sentry from '@sentry/browser';
-import { UpgradesModule } from './modules/upgrades/upgrades.module';
 
 Sentry.init({
  dsn: 'https://3f786f8407e042db9053434a3ab527a2@sentry.io/1538008', // TODO: do not hardcard

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

 <div class="m-upgrades__upgradeOptions">
- <div class="">
+ <div class="m-upgradesUpgradeOptions__header">
  <h2>Upgrade Options</h2>
 
- <div class="">
- <div class="">
+ <div class="m-upgradesUpgradeOptionsHeader__toggleContainer">
+ <div class="m-upgradesUpgradeOptionsHeader__toggle">
  <span class="">Yearly</span>
- <span class=""></span>
+ <!-- TODO: left/right toggle -->
  <span class="">Monthly</span>
  </div>
- <div class="">
+ <div class="m-upgradesUpgradeOptionsHeader__toggle">
  <span class="">USD</span>
- <span class=""></span>
+ <!-- TODO: left/right toggle -->
  <span class="">Tokens</span>
  </div>
  </div>
  </div>
 
- <div class="">
- <div class="">
+ <div class="m-upgradesUpgradeOptions__plans">
+ <div class="m-upgradesUpgradeOptions__plan">
  <h3>Plus</h3>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  Ideal for all Minds Users
  </p>
 
- <p>
+ <p class="m-upgradesUpgradeOptionsPlan__description">
  Upgrade your channel to unlock new features and upgrade your experience.
  </p>
 
@@ -35,28 +35,30 @@
  </ul>
 
  <p>
- <a>More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
  </p>
 
- <p class=""><span>$5</span> per month</p>
+ <p class="m-upgradesUpgradeOptionsPlan__pricing">
+ <span>$5</span> per month
+ </p>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__offer">
  $7 per month
  </p>
 
- <p>
- <a>Upgrade to Plus</a>
- </p>
+ <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
+ >Upgrade to Plus</a
+ >
  </div>
 
- <div class="">
+ <div class="m-upgradesUpgradeOptions__plan">
  <h3>Pro</h3>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  For independent content creators
  </p>
 
- <p>
+ <p class="m-upgradesUpgradeOptionsPlan__description">
  The ultimate platform for independent content creators on the Internet.
  </p>
 
@@ -67,28 +69,30 @@
  </ul>
 
  <p>
- <a>More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
  </p>
 
- <p class=""><span>$50</span> per month</p>
+ <p class="m-upgradesUpgradeOptionsPlan__pricing">
+ <span>$50</span> per month
+ </p>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__offer">
  $60 per month
  </p>
 
- <p>
- <a>Upgrade to Pro</a>
- </p>
+ <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
+ >Upgrade to Pro</a
+ >
  </div>
 
- <div class="">
+ <div class="m-upgradesUpgradeOptions__plan">
  <h3>Node</h3>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__targetAudience">
  For next-level content creators
  </p>
 
- <p>
+ <p class="m-upgradesUpgradeOptionsPlan__description">
  Launch your own white-labeled social network and mobile app.
  </p>
 
@@ -99,16 +103,16 @@
  </ul>
 
  <p>
- <a>More info</a>
+ <a class="m-upgradesUpgradeOptionsPlan__moreInfo">More info</a>
  </p>
 
- <p class="">
+ <p class="m-upgradesUpgradeOptionsPlan__pricing">
  Contact us for pricing
  </p>
 
- <p>
- <a>Contact us</a>
- </p>
+ <a class="m-upgrades__button m-upgradesUpgradeOptionsPlan__action"
+ >Contact us</a
+ >
  </div>
  </div>
 </div>

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

+m-upgrades__upgradeOptions {
+ display: block;
+}
+
+.m-upgrades__upgradeOptions {
+ .m-upgradesUpgradeOptions__header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ h2 {
+ font-size: 32px;
+ font-weight: 900;
+ line-height: 43px;
+ }
+
+ .m-upgradesUpgradeOptionsHeader__toggleContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .m-upgradesUpgradeOptionsHeader__toggle {
+ margin-right: 50px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ .m-upgradesUpgradeOptions__plans {
+ display: grid;
+ grid-gap: 65px;
+ grid-template-columns: repeat(3, 1fr);
+ padding: 40px 60px 60px;
+
+ @include m-theme() {
+ background-color: lighten(themed($m-grey-50), 5%);
+ }
+ }
+
+ .m-upgradesUpgradeOptions__plan {
+ position: relative;
+ padding-bottom: 75px;
+
+ h3 {
+ font-size: 28px;
+ font-weight: 900;
+ line-height: 37px;
+ padding: 0 0 2px;
+ margin: 0;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 21px;
+ margin: 0 0 31px;
+
+ &.m-upgradesUpgradeOptionsPlan__targetAudience {
+ @include m-theme() {
+ color: themed($m-green);
+ }
+ }
+
+ &.m-upgradesUpgradeOptionsPlan__description {
+ @include m-theme() {
+ color: themed($m-grey-600);
+ }
+ }
+ }
+
+ ul {
+ padding: 0 12px;
+ margin: 0 0 16px;
+
+ li {
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+ }
+
+ .m-upgradesUpgradeOptionsPlan__moreInfo {
+ font-size: 14px;
+ line-height: 19px;
+ cursor: pointer;
+
+ @include m-theme() {
+ color: themed($m-blue);
+ }
+ }
+
+ .m-upgradesUpgradeOptionsPlan__pricing {
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 24px;
+
+ @include m-theme() {
+ color: themed($m-grey-600);
+ }
+
+ span {
+ font-size: 24px;
+
+ @include m-theme() {
+ color: themed($m-black);
+ }
+ }
+ }
+
+ .m-upgradesUpgradeOptionsPlan__offer {
+ margin: -32px 0 0 0;
+ font-size: 14px;
+ text-decoration: line-through;
+
+ @include m-theme() {
+ color: themed($m-red);
+ }
+ }
+
+ .m-upgradesUpgradeOptionsPlan__action {
+ position: absolute;
+ bottom: 0;
+ }
+ }
+}

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

 <div class="m-upgrades">
- <div class="">
- <div class="">
+ <section class="m-upgrades__grid m-upgrades__mainFeatures">
+ <div class="m-upgrades__gridColumn--5">
  <h1>Upgrade your Minds experience</h1>
 
- <p>
+ <p class="m-upgrades__description">
  Minds offers a unique range of powerful upgrades that will supercharge
  your Minds experience.
  </p>
 
- <ul>
+ <ul class="m-upgrades__features">
  <li>
  TBD
  </li>
@@ -21,26 +21,29 @@
  </ul>
 
  <p>
- <a>Upgrade Now</a>
+ <a class="m-upgrades__button m-upgrades__button--hollow">Upgrade Now</a>
  </p>
  </div>
- <div class="">
+
+ <div class="m-upgrades__gridColumn--7">
  <!-- Main assets here -->
  </div>
- </div>
-
- <ul class="">
- <li>As featured in</li>
- <li>BBC</li>
- <li>Fox News</li>
- <li>Forbes</li>
- <li>TechCrunch</li>
- <li>Reuters</li>
- <li>Wired</li>
- <li>TJRE</li>
- </ul>
-
- <div class=""></div>
+ </section>
+
+ <section class="m-upgrades__grid">
+ <ul class="m-upgrades__gridColumn--12 m-upgrades__featuredIn">
+ <li>As featured in</li>
+ <li class="m-upgrades__featuredInItem--big"><img src="" alt="BBC" /></li>
+ <li><img src="" alt="Fox News" /></li>
+ <li><img src="" alt="Forbes" /></li>
+ <li><img src="" alt="TechCrunch" /></li>
+ <li><img src="" alt="Reuters" /></li>
+ <li><img src="" alt="Wired" /></li>
+ <li><img src="" alt="The Joe Rogan Experience" /></li>
+ </ul>
+ </section>
+
+ <div class="m-upgrades__separator"></div>
 
  <m-upgrades__upgradeOptions class=""></m-upgrades__upgradeOptions>
 

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

+m-upgrades {
+ display: block;
+
+ @include m-theme() {
+ background: themed($m-white);
+ }
+}
+
+.m-upgrades {
+ max-width: ((12 * 72px) + (11 * 20px));
+ margin: 0 auto;
+
+ section.m-upgrades__grid {
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(12, 1fr);
+
+ @for $i from 1 through 12 {
+ .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-bottom: 75px;
+ }
+
+ h1 {
+ font-size: 48px;
+ font-weight: 900;
+ line-height: 53px;
+ padding-right: 35px;
+ margin: 0 0 26px 0;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 23px;
+
+ &.m-upgrades__description {
+ margin-bottom: 36px;
+
+ @include m-theme() {
+ color: themed($m-grey-200);
+ }
+ }
+ }
+
+ ul {
+ &.m-upgrades__features {
+ margin-bottom: 45px;
+
+ li {
+ font-size: 16px;
+ line-height: 21px;
+ margin-bottom: 19px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+
+ .m-upgrades__featuredIn {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ font-size: 14px;
+
+ @include m-theme() {
+ color: themed($m-grey-200);
+ }
+
+ img {
+ width: 55px;
+ height: 55px;
+ object-fit: contain;
+ }
+
+ &.m-upgrades__featuredInItem--big {
+ img {
+ width: 96px;
+ height: 96px;
+ }
+ }
+ }
+ }
+}