src/app/modules/plus/plan/payment-plan.component.html

 <div class="m-plus-plan__container">
  
- <section class="m-plus-plan__row">
- <!-- Header -->
- <section class="m-plus-plan__section">
- <h1 i18n="@@PAYMENT_PLAN__TITLE" style="font-size: 36px; text-transform: none;">
- Minds Plus
- </h1>
- </section>
+ <section class="m-plus-plan__row">
+ <!-- Header -->
+ <section class="m-plus-plan__section">
+ <h1 i18n="@@PAYMENT_PLAN__TITLE" style="font-size: 36px; text-transform: none;">
+ Minds Plus
+ </h1>
  </section>
- 
- <!-- Plan Type -->
- <section class="m-plus-plan__row">
- <section class="m-plus-plan__section">
- <div class="m-plus-plan__subtitle">
- <h5>Subscription Plans</h5>
- <i class="material-icons mdl-color-text--blue-grey-700 m-plus-plan__plus-logo">add_circle_outline</i>
- </div>
- <div class="m-plus-plan__plans">
+ </section>
+ 
+ <!-- Plan Type -->
+ <section class="m-plus-plan__row">
+ <section class="m-plus-plan__section">
+ <div class="m-plus-plan__subtitle">
+ <h5>Subscription Plans</h5>
+ <i class="material-icons mdl-color-text--blue-grey-700 m-plus-plan__plus-logo">add_circle_outline</i>
+ </div>
+ <div class="m-plus-plan__plans">
+ <form class="m-plus-plan__paymentsForm" name="form" (ngSubmit)="submit()">
  <div class="m-plus-plan__period-container">
  <h6 class="m-plus-plan__period-title">Monthly</h6>
- <span class="m-plus-plan__period-price">20 MINDS /pm</span>
- <button class="m-plus-plan__period-buy-button"
- (click)="onClick('month')"
- >
- <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>
- </button>
+ <span class="m-plus-plan__period-price"><strong>20 OffChain Tokens</strong><input [(ngModel)]="tier" type="radio" name="offchainMonthly" [value]="tiers.OFFCHAIN_MONTHLY"></span>
+ <span class="m-m-plus-plan__period-price"><em>OnChain not available</em></span>
+ <span class="m-m-plus-plan__period-price"><strong>5 USD</strong></span>
  </div>
  <div class="m-plus-plan__period-container">
- <h6 class="m-plus-plan__period-title">Yearly</h6>
- <span class="m-plus-plan__period-price">180 MINDS /pa</span>
- <button class="m-plus-plan__period-buy-button"
- (click)="onClick('year')"
- >
- <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>
- </button>
+ <h6 class="m-plus-plan__period-title">Annual</h6>
+ <span class="m-plus-plan__period-price"><strong>200 OffChain Tokens</strong><input [(ngModel)]="tier" type="radio" name="offchainYearly" [value]="tiers.OFFCHAIN_YEARLY"></span>
+ <span class="m-plus-plan__period-price"><strong>40 OnChain Tokens</strong><input [(ngModel)]="tier" type="radio" name="onchainYearly" [value]="tiers.ONCHAIN_YEARLY"></span>
+ <span class="m-plus-plan__period-price"><strong>50 USD</strong></span>
  </div>
  <div class="m-plus-plan__period-container">
  <h6 class="m-plus-plan__period-title">Lifetime</h6>
- <span class="m-plus-plan__period-price">500 MINDS</span>
- <button class="m-plus-plan__period-buy-button__blue"
- (click)="onClick('lifetime')"
- >
- <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>
- </button>
+ <span class="m-plus-plan__period-price"><strong>5,000 OffChain Tokens</strong><input [(ngModel)]="tier" type="radio" name="offchainLife" [value]="tiers.OFFCHAIN_LIFETIME"></span>
+ <span class="m-plus-plan__period-price"><strong>400 OnChain Tokens</strong><input [(ngModel)]="tier" type="radio" name="onchainLife" [value]="tiers.ONCHAIN_LIFETIME"></span>
+ <span class="m-plus-plan__period-price"><strong>500 USD</strong></span>
  </div>
- </div>
- </section> 
- </section>
- 
- </div>
+ </form>
+ </div>
+ </section> 
+ </section>
+ <div class="minds-error mdl-color--red mdl-color-text--white" [hidden]="!error">{{error}}</div>
+ <!-- Confirm Button -->
+ <section class="m-plus-tier__purchaseRow">
+ <button class="m-plus-plan__period-buy-button__blue"
+ (click)="submit(tier);"
+ type="submit"
+ >Purchase</button>
+ </section>
+</div>
  

src/app/modules/plus/plan/payment-plan.component.scss

 @import "defaults";
 @import "themes";
 
-.m-plus-plan__container {
+.m-plus-plan__container { 
+ overflow: hidden;
+
  .m-plus-plan__row {
  .m-plus-plan__section {
  h1 {
@@ -13,11 +15,13 @@
  letter-spacing: 1.2px;
  align-items: center;
  margin: 16px 0 8px 40px;
+ @media screen and (max-width:$min-tablet) {
+ margin: 16px 0 8px 0px;
+ }
  }
 
  .m-plus-plan__subtitle {
  display: inline-flex;
- flex-direction: column;
  width: 30%;
  align-items: center;
  font-size: 14px;
@@ -26,6 +30,13 @@
  letter-spacing: 1.2px;
  align-items: center;
  margin: 0 0 8px 0;
+ flex-direction: column;
+ @media screen and (max-width:$min-tablet) {
+ flex-direction: row;
+ display: flex;
+ justify-content: space-between;
+ width: 100%
+ }
 
  i, .m-plus-plan__plus-logo {
  font-size: 50pt;
@@ -34,60 +45,90 @@
  }
  .m-plus-plan__plans {
  display: inline-flex;
- flex-direction: row;
- justify-content: space-evenly;
  width: 70%;
-
- .m-plus-plan__period-container {
- border-style: solid;
- border-width: 0 0 0 2px;
- padding: $minds-padding * 2;
-
- @include m-theme(){
- border-color: themed($m-grey-50);
- }
-
- .m-plus-plan__period-title {
- display: block;
- font-weight: bold;
- font-size: 18px;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
+ @media screen and (max-width:$min-tablet){
+ width: 100%;
+ }
+ .m-plus-plan__paymentsForm { 
+ display: inline-flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ width: 100%;
+ @media screen and (max-width:$min-tablet) {
+ flex-direction: column;
  }
 
- .m-plus-plan__period-price {
- display: block;
- }
- .m-plus-plan__period-buy-button {
- display: block;
- margin-top: $minds-padding * 4;
- font-size: 14px;
- padding: 8px 32px;
- background: none;
- border-radius: 0;
- cursor: pointer;
 
+ .m-plus-plan__period-container {
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ line-height: 32px;
+ border-style: solid;
+ border-width: 0 0 0 2px;
+ @media screen and (max-width:$min-tablet) {
+ border-width: 2px 0 0 0;
+ padding: 8px;
+ }
  @include m-theme(){
- border: 1px solid themed($m-grey-700);
- color: themed($m-grey-700);
+ border-color: themed($m-grey-50);
  }
- }
- .m-plus-plan__period-buy-button__blue {
- display: block;
- margin-top: $minds-padding * 4;
- font-size: 14px;
- padding: 8px 32px;
- background: none;
- border-radius: 0;
- cursor: pointer;
 
- @include m-theme(){
- border: 1px solid themed($m-blue);
- color: themed($m-blue);
+ .m-plus-plan__period-title {
+ display: block;
+ font-weight: bold;
+ font-size: 18px;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ @media screen and (max-width:$min-tablet) {
+ margin-block-end: 10px;
+ margin-block-start: 10px;
+ }
+ }
+
+ .m-plus-plan__period-price {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+
+ input {
+ align-self: center;
+ margin-left: 14px;
+ width: 16px;
+ height: 16px;
+ @media screen and (max-width:$min-tablet) {
+ display: flex;
+ width:24px;
+ }
+ }
  }
  }
  }
  }
  }
  }
+
+ .m-plus-tier__purchaseRow {
+ display: flex;
+ justify-content: flex-end;
+
+ .m-plus-plan__period-buy-button__blue {
+ margin-top: $minds-padding * 4;
+ font-size: 14px;
+ padding: 8px 32px;
+ background: none;
+ border-radius: 0;
+ cursor: pointer;
+ margin-right: 40px;
+ @media screen and (max-width:$min-tablet) {
+ margin: 0 0 16px 0;
+ height: 100%;
+ width: 100%;
+ }
+ @include m-theme(){
+ border: 1px solid themed($m-blue);
+ color: themed($m-blue);
+ }
+ }
+ }
 }