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 {