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

@@ -6,6 +6,7 @@
     <img
       class="m-proChannelTopbar__logo"
       [src]="channel.pro_settings.logo_image"
+      [routerLink]="['/pro', channel.username]"
     >
 
     <div class="m-proChannelTopbar__SearchBox">
@@ -24,13 +25,15 @@
     <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
 
     <ng-container *ngIf="currentUser; else authLink">
-      <minds-avatar [object]="currentUser" [editMode]="false"></minds-avatar>
+      <a [routerLink]="['/', channel.username]" routerLinkActive="active">
+        <minds-avatar [object]="currentUser" [editMode]="false"></minds-avatar>
+      </a>
     </ng-container>
     <ng-template #authLink>
       <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
     </ng-template>
 
-    <m-pro-user-menu></m-pro-user-menu>
+    <m-pro-user-menu [channelName]="channel.username"></m-pro-user-menu>
   </div>
 
   <div class="m-proChannel__body">

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

@@ -28,6 +28,7 @@ m-pro--channel {
 
     .m-proChannelTopbar__logo {
       max-height: 100%;
+      cursor: pointer;
     }
 
     & > * {

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

@@ -8,7 +8,7 @@ m-pro--channel-list {
   .m-proChannelList__content {
     width: 85%;
     margin: 0 auto;
-    display: flex;
+    //display: flex;
     //align-items: center;
     justify-content: center;
 
@@ -30,6 +30,18 @@ m-pro--channel-list {
     background-color: #eceff1 !important;
   }
 
+  .m-proChannelListContentList__seeMore {
+    color: var(--text-color);
+    background-color: var(--plain-background-color);
+    border: 1px solid #777;
+
+    font-size: 30px;
+    text-align: center;
+    vertical-align: middle;
+
+    cursor: pointer;
+  }
+
   ul.m-proChannelListContent__list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -67,18 +79,6 @@ m-pro--channel-list {
         }
       }
 
-      &.m-proChannelListContentList__seeMore {
-        color: var(--text-color);
-        background-color: var(--plain-background-color);
-        border: 1px solid #777;
-
-        font-size: 30px;
-        text-align: center;
-        vertical-align: middle;
-
-        cursor: pointer;
-      }
-
       &:nth-child(1), &:nth-child(2) {
         & > video {
           width: 500px;

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

@@ -6,7 +6,7 @@
       class="m-dropdownList__item m-pro-user-menuDropdown__Item"
       (click)="closeMenu()"
     >
-      <a [routerLink]="['/', getCurrentUser()?.username]">
+      <a [routerLink]="['/', channelName]">
         <i class="material-icons">remove_red_eye</i>
         <span i18n>View on Minds</span>
       </a>

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Input } from "@angular/core";
 import { Session } from "../../../../services/session";
 import { ThemeService } from "../../../../common/services/theme.service";
 
@@ -9,6 +9,8 @@ import { ThemeService } from "../../../../common/services/theme.service";
 })
 export class ProUserMenuComponent implements OnInit {
   isOpen: boolean = false;
+
+  @Input() channelName: string;
   
   constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
   }

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

@@ -3,16 +3,15 @@ m-pro--channel-signup {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
+  @media screen and (max-width: $max-mobile) {
+    justify-content: center;
+  }
 }
 
 .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;
@@ -160,16 +159,12 @@ m-pro--channel-signup {
         }
       }
       .m-login-box .mdl-checkbox__box-outline {
-        @include m-theme(){
-          border-color: themed($m-white);
-        }
+          border-color: var(--text-color);
       }
       .m-btn--action {
         margin-right: 16px;
-        @include m-theme(){
-          color: themed($m-white) !important;
-          border: 1px solid themed($m-white);
-        }
+        color: var(--text-color) !important;
+        border: 1px solid var(--text-color);
       }
       .mdl-card__actions{
         flex-direction:row-reverse;
@@ -178,13 +173,9 @@ m-pro--channel-signup {
         .m-register-tac{
           padding-right:16px;
           font-family: 'Roboto', Helvetica, sans-serif;
-          @include m-theme(){
-            color: rgba(themed($m-white),0.8);
-          }
+          color: var(--text-color) !important;
           a {
-            @include m-theme(){
-              color: themed($m-white);
-            }
+            color: var(--text-color) !important;
           }
         }
       }

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

@@ -3,6 +3,7 @@ m-pro--channel-tile {
   position: relative;
   width: 100%;
   height: 320px;
+  border-bottom-style: groove;
 
   img {
     height: 320px;
@@ -14,8 +15,8 @@ m-pro--channel-tile {
   .m-proChannelTile__text {
     position: absolute;
     bottom: 0;
-    background-color: white;
-    color: black;
+    background-color: #00000061;
+    color: rgb(255, 255, 255);
     padding: 16px 16px 0;
     font-size: 20px;
     width: 100%;
@@ -25,8 +26,9 @@ m-pro--channel-tile {
       font-size: 20px;
       line-height: 20px;
       overflow: visible;
-      color: rgba(0, 0, 0, .75) !important;
+      color: rgb(255, 255, 255) !important;
       margin: 0;
+      font-weight: 700;
     }
 
     p {
@@ -39,7 +41,7 @@ m-pro--channel-tile {
       margin: 8px 0;
       padding: 0;
       line-height: 1.25;
-      color: #263238 !important;
+      color: rgb(255, 255, 255) !important;
     }
 
     a {