src/app/common/components/button/button.component.scss

@@ -43,15 +43,6 @@ minds-button {
   }
 }
 
-a.m-link-btn {
-  display: inline-block;
-  padding: 8px !important;
-  line-height: 1.2;
-  height: auto;
-  text-decoration: none;
-  font-weight: inherit;
-}
-
 .m-btn--slim {
   height: 32px;
 }

src/app/interfaces/entities.ts

@@ -69,7 +69,7 @@ export interface MindsUser {
   tags?: Array<string>;
   toaster_notifications?: boolean;
   pro?: boolean;
-  pro_settings?: { styles?: { [key: string]: string }, [key: string]: string | { [key: string]: string } };
+  pro_settings?: { [key: string]: string };
 }
 
 export interface MindsGroup {

src/app/modules/channels/sidebar/sidebar.html

@@ -135,18 +135,6 @@
         <span [hidden]="!editing" i18n="@@M__ACTION__SAVE">Save</span>
       </button>
     </div>
-    <ng-container *ngIf="session.getLoggedInUser()?.guid == user.guid">
-      <a *ngIf="!user.pro" class="m-btn m-link-btn m-btn--with-icon m-btn--slim m-btn--action" routerLink="/pro">
-        <i class="material-icons">business_center</i>
-        <span i18n>Become Pro</span>
-      </a>
-
-      <a *ngIf="user.pro" class="m-btn m-link-btn m-btn--with-icon m-btn--slim" routerLink="/pro/settings">
-        <i class="material-icons">business_center</i>
-        <span i18n>Pro Settings</span>
-      </a>
-    </ng-container>
-
     <minds-button-boost *ngIf="session.getLoggedInUser().guid == user.guid" [object]="user"></minds-button-boost>
     <m-channel--badges [user]="user"></m-channel--badges>
   </div>

src/app/modules/newsfeed/newsfeed.module.ts

@@ -92,7 +92,6 @@ const routes: Routes = [
     NewsfeedBoostRotatorComponent,
     NewsfeedEntityComponent,
     NewsfeedTilesComponent,
-    NewsfeedComponent,
   ],
   entryComponents: [
     NewsfeedComponent,

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

@@ -14,7 +14,7 @@
     <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
     <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
     <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
-<!--    <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>-->
+    <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
     <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
 
     <ng-container *ngIf="currentUser; else authLink">
@@ -23,6 +23,8 @@
     <ng-template #authLink>
       <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
     </ng-template>
+
+    <m-pro-user-menu></m-pro-user-menu>
   </div>
 
   <div class="m-proChannel__body">

src/app/modules/pro/channel/channel.component.scss

@@ -2,10 +2,6 @@ m-pro--channel {
   display: block;
   background: none no-repeat center fixed;
   background-size: cover;
-
-  --primary-color: #4690D6;
-  --plain-background-color: rgba(0, 0, 0, 0.7);
-  --text-color: #fff;
 }
 
 .m-pro--channel {
@@ -63,10 +59,10 @@ m-pro--channel {
 
   // colors
   a.active, a:hover {
-    color: var(--primary-color) !important;
+    color: #4690D6 !important;
   }
 
   a, h1, h2, h3, h4, h5, p, i {
-    color: var(--text-color) !important;
+    color: white !important;
   }
 }

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

-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
 import { MindsUser } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
 import { Title } from "@angular/platform-browser";
-import { ProChannelService } from './channel.service';
+import { ProService } from "../pro.service";
 
 @Component({
   providers: [
-    ProChannelService,
+    ProService,
   ],
   selector: 'm-pro--channel',
   templateUrl: 'channel.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProChannelComponent implements OnInit, OnDestroy {
-
   username: string;
 
   channel: MindsUser;
@@ -36,9 +27,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
   params$: Subscription;
 
   constructor(
-    protected element: ElementRef,
     protected session: Session,
-    protected channelService: ProChannelService,
+    protected proService: ProService,
     protected client: Client,
     protected title: Title,
     protected router: Router,
@@ -72,11 +62,9 @@ export class ProChannelComponent implements OnInit, OnDestroy {
     this.detectChanges();
 
     try {
-      this.channel = await this.channelService.load(this.username);
-
-      let title = this.channel.pro_settings.title as string || this.channel.name;
+      this.channel = await this.proService.load(this.username);
 
-      this.bindCssVariables();
+      let title = this.channel.pro_settings.title || this.channel.name;
 
       if (this.channel.pro_settings.headline) {
         title += ` - ${this.channel.pro_settings.headline}`;
@@ -90,26 +78,6 @@ export class ProChannelComponent implements OnInit, OnDestroy {
     this.detectChanges();
   }
 
-  bindCssVariables() {
-    const styles = this.channel.pro_settings.styles;
-
-    for (const style in styles) {
-      if (!styles.hasOwnProperty(style)) {
-        continue;
-      }
-
-      let value = styles[style].trim();
-
-      if (!value) {
-        continue;
-      }
-
-      const styleAttr = style.replace(/_/g, "-");
-      this.element.nativeElement
-        .style.setProperty(`--${styleAttr}`, styles[style]);
-    }
-  }
-
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

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

-import { Injectable } from '@angular/core';
-import { MindsChannelResponse } from '../../../interfaces/responses';
-import { MindsUser } from '../../../interfaces/entities';
-import { Client } from '../../../services/api/client';
-
-@Injectable()
-export class ProChannelService {
-  currentChannel: MindsUser;
-
-  constructor(
-    protected client: Client,
-  ) { }
-
-  async load(id: string) {
-    try {
-      this.currentChannel = void 0;
-
-      const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
-
-      this.currentChannel = response.channel;
-
-      return this.currentChannel;
-    } catch (e) {
-      if (e.status === 0) {
-        throw new Error('Sorry, there was a timeout error.');
-      } else {
-        console.log('couldn\'t load channel', e);
-        throw new Error('Sorry, the channel couldn\'t be found');
-      }
-    }
-  }
-}

src/app/modules/pro/channel/list/list.component.html

@@ -26,6 +26,9 @@
       See more
     </li>
   </ul>
+  <ng-container *ngIf="(feedsService.feed | async) && (feedsService.feed | async).length">
+    <div class="noFeeds">No Feeds!</div>
+  </ng-container>
   <ng-container *ngIf="type === 'activities'">
     <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
     <!-- talk to Emi about this -->

src/app/modules/pro/channel/list/list.component.scss

@@ -17,6 +17,16 @@ m-pro--channel-list {
       margin-top: 100px;
       height: fit-content;
     }
+
+    .noFeeds {
+      max-width: 200px;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 600;
+      padding: 8px;
+      color: #90a4ae!important;
+      background-color: #eceff1!important;
+    }
   }
 
   ul.m-proChannelListContent__list {
@@ -38,29 +48,9 @@ m-pro--channel-list {
       justify-content: center;
       align-items: center;
 
-      m-newsfeed__entity {
-        width: 100%;
-
-        .m-groups--tile {
-          width: 100%;
-
-          h3, i {
-            color: #444 !important;
-          }
-
-          .m-groups--tile-block {
-            margin-top: 0;
-          }
-
-          .m-groups--tile-buttons {
-            padding: 0 $minds-padding * 2;
-          }
-        }
-      }
-
       &.m-proChannelListContentList__seeMore {
-        color: var(--text-color);
-        background-color: var(--plain-background-color);
+        color: white;
+        background-color: rgba(0, 0, 0, 0.7);
         border: 1px solid #777;
 
         font-size: 30px;
@@ -86,10 +76,7 @@ m-pro--channel-list {
       &:nth-child(2) {
         grid-column: 3 / span 2;
         margin-bottom: $minds-padding * 4;
-
-        &:not(.m-proChannelListContentList__seeMore) {
-          justify-content: flex-end;
-        }
+        justify-content: flex-end;
       }
 
       & > video {

src/app/modules/pro/channel/list/list.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { ActivatedRoute } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
-import { ProChannelService } from '../channel.service';
+import { ProService } from "../../pro.service";
 
 @Component({
   selector: 'm-pro--channel-list',
@@ -17,8 +17,8 @@ export class ProChannelListComponent implements OnInit {
 
   constructor(
     public feedsService: FeedsService,
-    protected channelService: ProChannelService,
-    protected route: ActivatedRoute,
+    private proService: ProService,
+    private route: ActivatedRoute,
     protected cd: ChangeDetectorRef,
   ) {
   }
@@ -62,8 +62,8 @@ export class ProChannelListComponent implements OnInit {
 
     try {
       this.feedsService
-        .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}`)
-        .setLimit(9)
+        .setEndpoint(`api/v2/feeds/channel/${this.proService.currentChannel.guid}/${this.type}`)
+        .setLimit(8)
         .fetch();
 
     } catch (e) {
@@ -77,12 +77,26 @@ export class ProChannelListComponent implements OnInit {
     this.feedsService.loadMore();
   }
 
+  seeMore() {
+    let url = `${window.Minds.site_url}${this.proService.currentChannel.username}`;
+
+    let type = this.type;
+
+    if (this.type === 'feed') {
+      type = null;
+    }
+    else if (this.type === 'articles') {
+      type = 'blogs';
+    }
+
+    if (type) {
+      url += `/${type}`;
+    }
+    window.location.href = url;
+  }
+
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();
   }
-
-  get seeMoreRoute() {
-    return ['/', this.channelService.currentChannel.username];
-  }
 }

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

+<div class="m-pro-user-menu m-dropdown">
+  <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
+
+  <ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
+    <li
+      class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+      (click)="closeMenu()"
+    >
+      <a [routerLink]="['/', getCurrentUser()?.username]">
+        <i class="material-icons">remove_red_eye</i>
+        <span i18n>View on Minds</span>
+      </a>
+    </li>
+    <li
+      class="m-dropdownList__item m-user-menuDropdown__Item"
+      *ngIf="getCurrentUser()"
+      (click)="closeMenu()"
+    >
+      <a routerLink="/logout">
+        <i class="material-icons">exit_to_app</i>
+        <span i18n>Logout</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>
\ No newline at end of file

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

+m-pro-user-menu {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
+.m-pro-user-menu__Dropdown {
+  list-style: none;
+  margin: 34px 0 0;
+  @include m-theme(){
+    background-color: themed('m-white');
+    color: themed('m-grey-700');
+  }
+
+  li:hover {
+    @include m-theme(){
+      background-color: rgba(themed('m-grey-50'), 0.5);
+    }
+  }
+
+  a {
+    font-size: 14px!important;
+    padding: 0px!important;
+    color: #555!important;
+    
+  }
+
+  i {
+    color: #555!important;
+  }
+
+}

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { Session } from "../../../../services/session";
+import { ThemeService } from "../../../../common/services/theme.service";
+
+@Component({
+  selector: 'm-pro-user-menu',
+  templateUrl: 'pro-user-menu.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProUserMenuComponent implements OnInit {
+  isOpen: boolean = false;
+  
+  constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
+  }
+
+  getCurrentUser() {
+    return this.session.getLoggedInUser();
+  }
+
+  ngOnInit() {
+    this.session.isLoggedIn(() => this.detectChanges());
+  }
+
+  toggleMenu() {
+    this.isOpen = !this.isOpen;
+  }
+
+  closeMenu() {
+    this.isOpen = false;
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+    this.themeService.applyThemePreference();
+  }
+
+}

src/app/modules/pro/channel/signup/signup.component.scss

+@import "defaults";
 m-pro--channel-signup {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
 }
+
+.m-ProChannelSignup--hero{
+  position:relative;
+
+  //background-image: url(/assets/photos/circles.png);
+  background-image: url("<%= APP_CDN %>/assets/videos/what-1/what-1.jpg");
+  background-size: cover;
+  background-position: center center;
+
+  .m-ProChannelSignup--hero--inner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 100px 52px;
+    margin: auto;
+    max-width: 1280px;
+
+    @media screen and (max-width: 1000px){
+      padding: 120px 16px;
+      flex-wrap: wrap;
+    }
+    @media screen and (max-width: $max-mobile) {
+      padding: 62px 0px;
+    }
+
+    .m-ProChannelSignup--app-buttons {
+      display: flex;
+      justify-content: flex-start;
+      * {
+        margin-left: 2px;
+      }
+      .m-ProChannelSignup--app-buttons__iosBanner {
+        > a > img {
+          height: 48px;
+
+          @media screen and (max-width: 480px) {
+            height: 32px;
+          }
+        }
+      }
+
+      @media screen and (max-width: 480px) {
+        .m-androidApp__download {
+          zoom: 0.65;
+        }
+      }
+    }
+  }
+
+  .m-ProChannelSignup--hero--video {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    video {
+      position: absolute;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+
+  .m-ProChannelSignup--hero--overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    @include m-theme(){
+      background-color: rgba(themed($m-black),0.4);
+    }
+  }
+
+  .m-ProChannelSignup--hero--slogans{
+    flex: 2;
+    h1, h3, h4 {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      margin: 0;
+      @include m-theme(){
+        color: themed($m-white);
+      }
+    }
+
+    h1 {
+      font-size: 80px;
+      font-weight: 600;
+      letter-spacing: 1.25px;
+      line-height: 1;
+      //color: rgba(255,255,255,0.85);
+      //color: rgba(0,0,0,0.85);
+
+      @media screen and (max-width: 720px){
+        font-size: 42px;
+      }
+    }
+
+    h3 {
+      font-size: 26px;
+      //color: rgba(255, 255, 255, 0.8);
+      font-weight: 400;
+      letter-spacing: 0.25px;
+      line-height: 1.25;
+      margin-top: 16px;
+      padding-right: 70px;
+
+      @media screen and (max-width: 720px){
+        padding-right: 8px;
+        font-size: 16px;
+      }
+    }
+    z-index: 2;
+  }
+
+  .m-ProChannelSignup--signup{
+    flex: 1;
+    margin-left: 16px;
+
+    @media screen and (max-width: 1000px){
+      flex-basis: 100%;
+      margin-left: 0;
+    }
+    minds-form-register{
+      .mdl-card{
+        background:transparent;
+        padding:0;
+      }
+      .mdl-card__title{
+        //color: #FFF !important;
+        display:none;
+      }
+      .m-login-box input{
+        border:0;
+        border-radius:3px;
+        font-weight: 600;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        font-family: 'Roboto', Helvetica, sans-serif;
+        letter-spacing: 1px;
+        //box-shadow: 0 0 6px rgba(255,255,255,0.22);
+        @include m-theme(){
+          background:rgba(themed($m-white),0.9);
+          color:themed($m-grey-800);
+          border:1px solid rgba(themed($m-white),0.25);
+        }
+        &::placeholder{
+          @include m-theme(){
+            color: themed($m-grey-800);
+          }
+        }
+      }
+      .m-login-box .mdl-checkbox__box-outline {
+        @include m-theme(){
+          border-color: themed($m-white);
+        }
+      }
+      .m-btn--action {
+        margin-right: 16px;
+        @include m-theme(){
+          color: themed($m-white) !important;
+          border: 1px solid themed($m-white);
+        }
+      }
+      .mdl-card__actions{
+        flex-direction:row-reverse;
+        padding-left: 8px;
+
+        .m-register-tac{
+          padding-right:16px;
+          font-family: 'Roboto', Helvetica, sans-serif;
+          @include m-theme(){
+            color: rgba(themed($m-white),0.8);
+          }
+          a {
+            @include m-theme(){
+              color: themed($m-white);
+            }
+          }
+        }
+      }
+      .password-help {
+        padding: 12px;
+        border-radius: 4px;
+        font-weight: 300;
+        @include m-theme(){
+          color: themed($m-white);
+          background-color: themed($m-black);
+        }
+      }
+      .m-register-btn {
+        font-family: 'Roboto', Helvetica, sans-serif;
+        letter-spacing: 1.25px;
+        background: transparent;
+        font-size: 12px;
+        box-shadow: none !important;
+        @include m-theme(){
+          border: 1px solid themed($m-grey-50);
+        }
+      }
+    }
+    z-index: 2;
+  }
+
+  @media (max-width: $max-mobile){
+    .m-ProChannelSignup--grid{
+      .m-ProChannelSignup--titles{
+        h1{
+          font-size: 32px;
+          line-height:32px;
+          //font-weight: 200;
+          //margin:16px;
+          padding:0;
+          padding:0 $minds-padding*2;
+        }
+        h3{
+          font-size:16px;
+          //font-weight: 200;
+          line-height:16px;
+          padding:16px 16px 0;
+        }
+      }
+    }
+    .m-ProChannelSignup--titles {
+      //display:none;
+    }
+    .m-app-links {
+      //max-width:60%;
+      margin:$minds-margin;
+      a{
+        flex:auto;
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/app/modules/pro/channel/signup/signup.component.ts

@@ -6,15 +6,24 @@ import { Session } from "../../../../services/session";
 @Component({
   selector: 'm-pro--channel-signup',
   template: `
-    <div class="m-ProChannelSignup__Text">
-      <!-- TODO: this text should be dynamic -->
-      <h2>Independent.</h2>
-      <h2>Community-owned.</h2>
-      <h2>Decentralized News</h2>
-    </div>
-    <div class="m-ProChannelSignup__SignupForm">
-      <minds-form-register (done)="registered()"></minds-form-register>
-    </div>
+    <section class="m-ProChannelSignup--hero">
+
+      <div class="m-ProChannelSignup--hero--inner">
+
+        <div class="m-ProChannelSignup--hero--slogans">
+          <!-- TODO: this text should be dynamic -->
+          <h1>Independent.</h1>
+          <h1>Community-owned.</h1>
+          <h1>Decentralized News</h1>
+        </div>
+
+        <div class="m-ProChannelSignup--signup">
+          <minds-form-register (done)="registered()"></minds-form-register>
+        </div>
+
+      </div>
+      
+    </section>
   `
 })
 

src/app/modules/pro/channel/tile/tile.component.scss

+@import "defaults";
+
 m-pro--channel-tile {
   cursor: pointer;
   position: relative;
-  width: 100%;
-  height: 320px;
 
   img {
-    height: 320px;
+    max-height: 320px;
     width: 100%;
     object-fit: cover;
   }
@@ -16,10 +16,9 @@ m-pro--channel-tile {
     bottom: 0;
     background-color: white;
     color: black;
-    padding: 16px 16px 0;
+    min-width: stretch;
+    padding: $minds-padding*2 $minds-padding*2 0;
     font-size: 20px;
-    width: 100%;
-    box-sizing: border-box;
 
     h2 {
       font-size: 20px;

src/app/modules/pro/marketing.component.html

@@ -16,9 +16,7 @@
       </div>
 
       <div class="m-marketing--hero--actions m-marketing--action-button">
-        <m-pro--subscription
-          (onEnable)="goToSettings()"
-        ></m-pro--subscription>
+        <m-pro--subscription></m-pro--subscription>
       </div>
     </div>
   </div>

src/app/modules/pro/marketing.component.ts

 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'm-pro--marketing',
@@ -8,13 +7,4 @@ import { Router } from '@angular/router';
 })
 export class ProMarketingComponent {
   minds = window.Minds;
-
-  constructor(
-    protected router: Router,
-  ) {
-  }
-
-  goToSettings() {
-    this.router.navigate(['/pro/settings']);
-  }
 }

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

@@ -12,6 +12,7 @@ import { MindsFormsModule } from "../forms/forms.module";
 import { ProChannelListComponent } from "./channel/list/list.component";
 import { ProChannelDonateComponent } from './channel/donate/donate.component';
 import { ProTileComponent } from "./channel/tile/tile.component";
+import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
 import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { ProSettingsComponent } from './settings/settings.component';
 
@@ -76,6 +77,7 @@ const routes: Routes = [
     ProChannelSignupComponent,
     ProChannelListComponent,
     ProChannelDonateComponent,
+    ProUserMenuComponent
   ],
   exports: [],
   entryComponents: [