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

@@ -11,7 +11,7 @@ m-marketing__footer {
  @include m-theme() {
  background: linear-gradient(
  180deg,
- themed($m-bg-gradient-start) 0%,
+ themed($m-marketing-bg-gradient-start) 0%,
  themed($m-white) 100%
  );
  }

src/app/common/components/marketing/marketing-styles.scss

@@ -102,7 +102,7 @@
  background: linear-gradient(
  180deg,
  themed($m-white) 0%,
- themed($m-bg-gradient-start) 100%
+ themed($m-marketing-bg-gradient-start) 100%
  );
  }
 
@@ -151,13 +151,16 @@
  left: 0;
  transform: translate(-86px, -56px);
  clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
- background: linear-gradient(
- 180deg,
- #f6eded 0%,
- #f5f5fe 99.99%
- ); // TODO: Theme
  z-index: -1;
 
+ @include m-theme() {
+ background: linear-gradient(
+ 180deg,
+ themed($m-marketing-bg-colored-gradient-start) 0%,
+ themed($m-marketing-bg-colored-gradient-end) 99.99%
+ );
+ }
+
  @media screen and (max-width: $m-grid-min-vp) {
  right: 0;
  bottom: -3vw;
@@ -167,6 +170,10 @@
  }
 
  h1 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
  @media screen and (max-width: $m-grid-min-vp) {
  margin: 15px 0 15px;
  text-align: center;
@@ -174,6 +181,10 @@
  }
 
  h2 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
  @media screen and (max-width: $m-grid-min-vp) {
  font-size: 28px;
  line-height: 32px;
@@ -191,6 +202,10 @@
  color: themed($m-grey-300);
  }
 
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
  @media screen and (max-width: $m-grid-min-vp) {
  padding-right: 0;
  margin-bottom: 30px;

src/app/foundation/buttons.scss

@@ -23,6 +23,14 @@
  border-color: themed($m-blue);
  }
 
+ &.mf-button--alt {
+ @include m-theme() {
+ background: themed($m-aqua);
+ border-color: themed($m-aqua);
+ color: themed($m-white-always);
+ }
+ }
+
  @media screen and (max-width: $m-grid-min-vp) {
  display: block;
  font-size: 15px;

src/app/modules/pro/pro.module.ts

@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '../../common/common.module';
 import { ProService } from './pro.service';
 import { ProMarketingComponent } from './marketing.component';
-import { ProSubscriptionComponent } from './channel/subscription/subscription.component';
+import { ProSubscriptionComponent } from './subscription/subscription.component';
 import { ProChannelComponent } from './channel/channel.component';
 import { ProChannelLoginComponent } from './channel/login/login.component';
 import { MindsFormsModule } from '../forms/forms.module';

src/app/modules/pro/pro.service.ts

@@ -17,12 +17,6 @@ export class ProService {
  return Boolean(result.isActive);
  }
 
- async enable(): Promise<boolean> {
- // TODO: Payments
- await this.client.post('api/v2/pro');
- return true;
- }
-
  async disable(): Promise<boolean> {
  await this.client.delete('api/v2/pro');
  return true;

src/app/modules/pro/channel/subscription/subscription.component.html → src/app/modules/pro/subscription/subscription.component.html

@@ -2,11 +2,11 @@
  <ng-container *ngIf="!inProgress; else inProgressSpinner">
  <button
  *ngIf="!active"
- class="mdl-button mdl-button--colored mdl-color--green"
+ class="mf-button mf-button--alt"
  [disabled]="inProgress || criticalError"
  (click)="enable()"
  >
- Become Pro
+ Upgrade to Pro
  </button>
 
  <button

src/app/modules/pro/channel/subscription/subscription.component.ts → src/app/modules/pro/subscription/subscription.component.ts

@@ -6,8 +6,11 @@ import {
  OnInit,
  Output,
 } from '@angular/core';
-import { Session } from '../../../../services/session';
-import { ProService } from '../../pro.service';
+import { Session } from '../../../services/session';
+import { ProService } from '../pro.service';
+import { WireCreatorComponent } from '../../wire/creator/creator.component';
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { EntitiesService } from '../../../common/services/entities.service';
 
 @Component({
  selector: 'm-pro--subscription',
@@ -34,6 +37,8 @@ export class ProSubscriptionComponent implements OnInit {
  constructor(
  protected service: ProService,
  protected session: Session,
+ protected overlayModal: OverlayModalService,
+ protected entities: EntitiesService,
  protected cd: ChangeDetectorRef
  ) {}
 
@@ -67,17 +72,32 @@ export class ProSubscriptionComponent implements OnInit {
  this.detectChanges();
 
  try {
- await this.service.enable();
- this.active = true;
- this.minds.user.pro = true;
- this.onEnable.emit(Date.now());
+ const proHandler = ((await this.entities
+ .setCastToActivities(false)
+ .fetch([`urn:user:${this.minds.handlers.pro}`])) as any).entities[0];
+
+ this.overlayModal
+ .create(WireCreatorComponent, proHandler, {
+ onComplete: () => {
+ this.active = true;
+ this.minds.user.pro = true;
+ this.onEnable.emit(Date.now());
+ this.inProgress = false;
+ this.detectChanges();
+ },
+ })
+ .onDidDismiss(() => {
+ this.inProgress = false;
+ this.detectChanges();
+ })
+ .present();
  } catch (e) {
  this.active = false;
  this.minds.user.pro = false;
  this.error = (e && e.message) || 'Unknown error';
+ this.inProgress = false;
  }
 
- this.inProgress = false;
  this.detectChanges();
  }
 

src/stylesheets/themes.scss

+// General rules for themes
+@mixin m-on-theme($theme) {
+ body.m-theme__#{$theme} &,
+ body .m-theme--wrapper.m-theme--wrapper__#{$theme} & {
+ @content;
+ }
+}
+
 // Create css selectors for themes
 // Colors change when .theme__light/.theme__dark classes are toggled on body tag
 @mixin m-theme() {
  @each $theme, $colors in $themes {
- body.m-theme__#{$theme} &,
- body .m-theme--wrapper.m-theme--wrapper__#{$theme} & {
+ @include m-on-theme($theme) {
  $theme-map: () !global;
  @each $color-name, $color in $colors {
  $value: map-get(map-get($themes, $theme), '#{$color-name}');
@@ -60,6 +67,7 @@ $blue-light: #71aae7;
 $green-dark: #388e3c;
 $green: #4caf50;
 $green-light: #8bc34a;
+$aqua: #4fc3a9;
 $amber-dark: #ffa000;
 $amber: #ffc108;
 $amber-light: #ffecb3;
@@ -107,6 +115,7 @@ $themes: (
  m-blue-dark: $blue-dark,
  m-blue: $blue,
  m-blue-light: $blue-light,
+ m-aqua: $aqua,
  m-green-dark: $green-dark,
  m-green: $green,
  m-green-light: $green-light,
@@ -121,7 +130,9 @@ $themes: (
  m-white: $white,
  m-white-always: $white,
  m-body-bg: #f8f8f8,
- m-bg-gradient-start: #f9fafc,
+ m-marketing-bg-gradient-start: #f9fafc,
+ m-marketing-bg-colored-gradient-start: #f6eded,
+ m-marketing-bg-colored-gradient-end: #f5f5fe,
  m-warn-bg: $amber-light,
  m-warn-fg: $black,
  m-facebook: $facebook,
@@ -160,10 +171,13 @@ $themes: (
  m-white: lighten($grey-990, $percent),
  m-white-always: $white,
  m-body-bg: lighten(#080808, $percent),
- m-bg-gradient-start: #292827,
+ m-marketing-bg-gradient-start: #292827,
+ m-marketing-bg-colored-gradient-start: #4e5965,
+ m-marketing-bg-colored-gradient-end: #58565c,
  m-blue-dark: lighten($blue-bright, 15%),
  m-blue: $blue-bright,
  m-blue-light: $blue-dark,
+ m-aqua: $aqua,
  m-green-dark: lighten($green-dark, $percent),
  m-green: lighten($green, $percent),
  m-green-light: lighten($green-light, $percent),
@@ -217,11 +231,13 @@ $m-black-always: 'm-black-always';
 $m-white: 'm-white';
 $m-white-always: 'm-white-always';
 $m-body-bg: 'm-body-bg';
-$m-bg-gradient-start: 'm-bg-gradient-start';
-
+$m-marketing-bg-gradient-start: 'm-marketing-bg-gradient-start';
+$m-marketing-bg-colored-gradient-start: 'm-marketing-bg-colored-gradient-start';
+$m-marketing-bg-colored-gradient-end: 'm-marketing-bg-colored-gradient-end';
 $m-blue-dark: 'm-blue-dark';
 $m-blue: 'm-blue';
 $m-blue-light: 'm-blue-light';
+$m-aqua: 'm-aqua';
 $m-green-dark: 'm-green-dark';
 $m-green: 'm-green';
 $m-green-light: 'm-green-light';

src/typings/minds.d.ts

@@ -27,6 +27,7 @@ interface Minds {
  last_tos_update: number;
  tags: string[];
  pro?: any;
+ handlers?: { pro: string; plus: string };
 }
 
 interface MindsNavigation {