theming

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

@@ -20,7 +20,7 @@
  <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-btn m-btn--action m-btn--slim m-plus-plan__period-buy-button"
+ <button class="m-plus-plan__period-buy-button"
  (click)="onClick('month')"
  >
  <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>
@@ -29,7 +29,7 @@
  <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-btn m-btn--action m-btn--slim m-plus-plan__period-buy-button"
+ <button class="m-plus-plan__period-buy-button"
  (click)="onClick('year')"
  >
  <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>
@@ -38,7 +38,7 @@
  <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-btn m-btn--action m-btn--slim m-plus-plan__period-buy-button"
+ <button class="m-plus-plan__period-buy-button__blue"
  (click)="onClick('lifetime')"
  >
  <ng-container i18n="verb|@@M__ACTION__PURCHASE">Purchase</ng-container>

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

 @import "defaults";
+@import "themes";
 
 .m-plus-plan__container {
  .m-plus-plan__row {
  .m-plus-plan__section {
+ h1 {
+ font-size: 36px;
+ text-transform: none;
+ display: block;
+ font-weight: 600;
+ line-height: 1;
+ letter-spacing: 1.2px;
+ align-items: center;
+ margin: 16px 0 8px 40px;
+ }
+
  .m-plus-plan__subtitle {
  display: inline-flex;
  flex-direction: column;
- maxwidth: 30%;
+ width: 30%;
  align-items: center;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1;
+ letter-spacing: 1.2px;
+ align-items: center;
+ margin: 0 0 8px 0;
 
  i, .m-plus-plan__plus-logo {
  font-size: 50pt;
+ padding-top: $minds-padding * 2;
  }
  }
  .m-plus-plan__plans {
@@ -23,10 +42,17 @@
  border-style: solid;
  border-width: 0 0 0 2px;
  padding: $minds-padding * 2;
- border-color: #e8e8e8;
+
+ @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;
  }
 
  .m-plus-plan__period-price {
@@ -35,6 +61,30 @@
  .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;
+
+ @include m-theme(){
+ border: 1px solid themed($m-grey-700);
+ color: themed($m-grey-700);
+ }
+ }
+ .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);
+ }
  }
  }
  }