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

@@ -265,7 +265,7 @@
   }
 
   .mf-button.mf-button--alt.mf-button--gradient {
-    background: #4eb69f; /* Old Browsers */
+    background: #5dbac0; /* Old Browsers */
     background: linear-gradient(
       45deg,
       #4eb69f 0%,

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

@@ -81,7 +81,11 @@
         padding-right: 200px;
       }
 
-      @media screen and(min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
+      @media screen and(min-width: 900px) and (max-width: $m-grid-min-vp) {
+        padding-right: 100px;
+      }
+
+      @media screen and(max-width: 900px) {
         padding-right: 0;
       }
 

src/app/common/layout/v2-topbar/v2-topbar.component.html

@@ -35,7 +35,7 @@
 
 <div
   class="m-v2-topbar__Top"
-  [class.m-v2-topbar__noBackground]="!showBackground"
+  [class.m-v2-topbar__marketingPages]="!showBackground"
 >
   <div class="m-v2-topbar">
     <div class="m-v2-topbar__Container--left">
@@ -78,11 +78,35 @@
         </div>
       </ng-container>
       <ng-template #loggedOutRightContainer>
-        <div class="m-v2-topbar__Container__LoginWrapper">
-          <a routerLink="/login" title="Login" i18n-title>
-            Login / Signup
-          </a>
-        </div>
+        <ng-container *ngIf="showSeparateLoginBtns; else singleButton">
+          <div class="m-v2-topbar__Container__LoginWrapper">
+            <a
+              class="m-v2-topbarLoginWrapper__login"
+              routerLink="/login"
+              title="Login"
+              i18n-title
+            >
+              Login
+            </a>
+
+            <a
+              class="m-v2-topbarLoginWrapper__joinMindsNow"
+              routerLink="/login"
+              title="Join Minds Now"
+              i18n-title
+            >
+              Join Minds Now
+            </a>
+          </div>
+        </ng-container>
+
+        <ng-template #singleButton>
+          <div class="m-v2-topbar__Container__LoginWrapper">
+            <a routerLink="/login" title="Login" i18n-title>
+              Login / Signup
+            </a>
+          </div>
+        </ng-template>
       </ng-template>
 
       <div class="m-v2-topbar__UserMenu" *ngIf="getCurrentUser()">

src/app/common/layout/v2-topbar/v2-topbar.component.scss

@@ -27,12 +27,29 @@
     width: 100%;
   }
 
-  &.m-v2-topbar__noBackground {
+  &.m-v2-topbar__marketingPages {
+    flex-direction: row;
+
     @include m-theme() {
       border: none;
       background-color: transparent;
     }
 
+    .m-v2-topbar {
+      padding: 15px 0 0;
+      max-width: 1084px;
+      margin: 0 auto;
+
+      @media screen and (max-width: 1168px) {
+        margin: 0 25px;
+      }
+
+      .m-v2-topbarNavItem__Logo {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
     .m-v2-topbar__Container__LoginWrapper > a {
       margin-right: 40px;
       @include m-theme() {
@@ -139,7 +156,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
 }
 
 .m-v2-topbar__Container--left {
@@ -287,11 +303,41 @@
     font-family: 'Roboto', sans-serif;
     cursor: pointer;
     @include m-theme() {
+      background-color: themed($m-white);
       background-color: themed($m-white);
       border: 1px solid themed($m-blue);
       color: themed($m-blue);
     }
   }
+
+  > a.m-v2-topbarLoginWrapper__login,
+  > a.m-v2-topbarLoginWrapper__joinMindsNow {
+    font-size: 16px;
+    line-height: 21px;
+    font-weight: normal;
+    text-transform: none;
+    white-space: nowrap;
+
+    @include m-theme() {
+      color: themed($m-grey-800);
+    }
+  }
+
+  > a.m-v2-topbarLoginWrapper__login {
+    padding: 0;
+    border: none !important;
+    @media screen and(max-width: $max-mobile) {
+      margin-right: 10px;
+    }
+  }
+
+  > a.m-v2-topbarLoginWrapper__joinMindsNow {
+    @include m-theme() {
+      border: 1px solid themed($m-grey-800);
+    }
+    margin-right: 0 !important;
+    border-radius: 4px;
+  }
 }
 
 .m-v2-topbar__Bottom {

src/app/common/layout/v2-topbar/v2-topbar.component.ts

@@ -23,6 +23,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
   timeout;
   isTouchScreen = false;
   showBackground: boolean = true;
+  showSeparateLoginBtns: boolean = false;
 
   @ViewChild(DynamicHostDirective, { static: true })
   notificationsToasterHost: DynamicHostDirective;
@@ -60,8 +61,13 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
     this.componentInstance = this.componentRef.instance;
   }
 
-  toggleBackground(value: boolean) {
-    this.showBackground = value;
+  /**
+   * Marketing pages set this to true in order to change how the topbar looks
+   * @param value
+   */
+  toggleMarketingPages(value: boolean) {
+    this.showBackground = !value;
+    this.showSeparateLoginBtns = value;
     this.detectChanges();
   }
 

src/app/common/layout/v2-topbar/v2-topbar.service.ts

@@ -13,9 +13,9 @@ export class V2TopbarService {
     return this;
   }
 
-  toggleBackground(value: boolean) {
+  toggleMarketingPages(value: boolean) {
     if (this.container) {
-      this.container.toggleBackground(value);
+      this.container.toggleMarketingPages(value);
     }
   }
 }

src/app/foundation/buttons.scss

 @import './grid-values';
 @import '../../stylesheets/themes';
+@import 'defaults';
 
 .mf-button {
   display: inline-block;
@@ -63,7 +64,7 @@
     }
   }
 
-  @media screen and (max-width: $m-grid-min-vp) {
+  @media screen and (max-width: $max-mobile) {
     display: block;
     font-size: 15px;
     padding: 12px 15px;

src/app/modules/forms/register/register.html

@@ -7,7 +7,7 @@
     {{errorMessage}}
   </div>
 </div>
-<h3 *ngIf="showTitle">Join the Minds revolution!</h3>
+<h3 *ngIf="showTitle">Join the Minds revolution</h3>
 
 <!-- START: Register -->
 <form
@@ -19,6 +19,9 @@
 >
   <div class="mdl-card__supporting-text mdl-grid">
     <div class="mdl-cell mdl-cell--12-col">
+      <label for="username" *ngIf="showLabels" i18n>
+        Username
+      </label>
       <input
         type="text"
         id="username"
@@ -28,43 +31,47 @@
         (keyup)="validationTimeoutHandler()"
         readonly
         onfocus="this.removeAttribute('readonly');"
+        [class.m-input--hide-placeholder]="showLabels"
       />
     </div>
 
     <div class="mdl-cell mdl-cell--12-col">
+      <label for="email" *ngIf="showLabels" i18n>
+        Email
+      </label>
       <input
         type="email"
         id="email"
         formControlName="email"
         placeholder="Email"
         i18n-placeholder="email placeholder|@@FORMS__REGISTER__EMAIL_PLACEHOLDER"
+        [class.m-input--hide-placeholder]="showLabels"
       />
     </div>
     <div class="mdl-cell mdl-cell--12-col" style="position: relative">
+      <label for="password" *ngIf="showLabels" i18n>
+        Password
+      </label>
       <m-popover--validation #popover>
         <input
           type="password"
           id="password"
           formControlName="password"
+          placeholder="Password"
           i18n-placeholder="@@M__COMMON__PASSWORD"
           readonly
           onfocus="this.removeAttribute('readonly');"
-          (focus)="popover.show()"
-          (focusout)="popover.hide()"
-          (ngModelChange)="popover.checkRules($event)"
+          (focus)="passwordOnFocus()"
+          (focusout)="passwordOnFocusOut()"
+          (ngModelChange)="popover.show(); popover.checkRules($event)"
+          [class.m-input--hide-placeholder]="showLabels"
         />
       </m-popover--validation>
-      <m-tooltip
-        class="tooltip-wrapper"
-        icon="help"
-        i18n="@@MINDS__PASSWORD_TOOLTIP"
-        anchor="right"
-      >
-        Password must have more than 8 characters. Including uppercase, numbers,
-        special characters (ie. !,#,@), and cannot have spaces.
-      </m-tooltip>
     </div>
     <div class="mdl-cell mdl-cell--12-col" [hidden]="!form.value.password">
+      <label for="password2" *ngIf="showLabels" i18n>
+        Confirm your password
+      </label>
       <input
         type="password"
         id="password2"
@@ -74,6 +81,7 @@
         (keydown.enter)="register($event)"
         readonly
         onfocus="this.removeAttribute('readonly');"
+        [class.m-input--hide-placeholder]="showLabels"
       />
     </div>
 
@@ -97,6 +105,7 @@
         class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
         [mdlSwitch]
         [toggled]="form.value.exclusive_promotions"
+        *ngIf="showPromotions"
       >
         <input
           type="checkbox"
@@ -128,21 +137,30 @@
           class="m-register-tac"
           i18n="@@FORMS__REGISTER__TOS_ACCEPTANCE_LABEL"
         >
-          I accept the
-          <a routerLink="/p/terms" target="_blank"> Terms & Conditions </a>
+          I have read and accept the
+          <a routerLink="/p/terms" target="_blank"> terms of use </a>
         </span>
       </label>
     </div>
 
     <button
-      [ngClass]="{
-      'm-btn m-btn--action': !gradientButton,
-      'mf-button mf-button--alt mf-button--gradient': gradientButton}"
       class="m-btn m-btn--action"
       (click)="register($event)"
       [disabled]="!this.form.valid || inProgress"
+      *ngIf="!showBigButton"
     >
       <ng-container i18n="@@FORMS__REGISTER__SIGNUP_ACTION">
+        Signup
+      </ng-container>
+    </button>
+
+    <button
+      class="mf-button mf-button--alt"
+      (click)="register($event)"
+      [disabled]="!this.form.valid || inProgress"
+      *ngIf="showBigButton"
+    >
+      <ng-container i18n="@@FORMS__REGISTER__JOIN_MINDS_NOW_ACTION">
         Join Minds Now
       </ng-container>
     </button>

src/app/modules/forms/register/register.scss

@@ -90,4 +90,8 @@ minds-form-register {
   .mdl-checkbox {
     padding-top: 5px;
   }
+
+  input.m-input--hide-placeholder::placeholder {
+    color: transparent;
+  }
 }

src/app/modules/forms/register/register.ts

@@ -13,6 +13,7 @@ import { Session } from '../../../services/session';
 import { ReCaptchaComponent } from '../../../modules/captcha/recaptcha/recaptcha.component';
 import { ExperimentsService } from '../../experiments/experiments.service';
 import { RouterHistoryService } from '../../../common/services/router-history.service';
+import { PopoverComponent } from '../popover-validation/popover.component';
 
 @Component({
   moduleId: module.id,
@@ -23,7 +24,9 @@ export class RegisterForm {
   @Input() referrer: string;
   @Input() parentId: string = '';
   @Input() showTitle: boolean = false;
-  @Input() gradientButton: boolean = false;
+  @Input() showBigButton: boolean = false;
+  @Input() showPromotions: boolean = true;
+  @Input() showLabels: boolean = false;
 
   @Output() done: EventEmitter<any> = new EventEmitter();
 
@@ -42,6 +45,7 @@ export class RegisterForm {
   minds = window.Minds;
 
   @ViewChild('reCaptcha', { static: false }) reCaptcha: ReCaptchaComponent;
+  @ViewChild('popover', { static: false }) popover: PopoverComponent;
 
   constructor(
     public session: Session,
@@ -162,4 +166,14 @@ export class RegisterForm {
       500
     );
   }
+
+  passwordOnFocus() {
+    if (this.form.value.password.length > 0) {
+      this.popover.show();
+    }
+  }
+
+  passwordOnFocusOut() {
+    this.popover.hide();
+  }
 }

src/app/modules/homepage/homepage.component.html

@@ -4,7 +4,7 @@
   <div class="m-marketing__main m-marketing__section--style-2">
     <div class="m-grid m-marketing__wrapper">
       <div
-        class="m-grid__column-7 m-grid__column-7--tablet m-grid__column-12--mobile m-marketing__body"
+        class="m-grid__column-7 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__body"
       >
         <h1 i18n>Minds <span class="m-homepage__yellowLine"></span></h1>
 
@@ -21,48 +21,63 @@
           Take back control of your social media.
         </p>
 
-        <button
-          class="mf-button mf-button--alt m-homepage__joinButton"
-          (click)="goToLoginPage()"
-          i18n
-        >
-          Join Minds Now
-        </button>
+        <ng-container *ngIf="!isMobile()">
+          <button
+            class="mf-button mf-button--alt m-homepage__joinButton m-homepage__joinButton--first"
+            (click)="goToLoginPage()"
+            *mExperiment="'Homepage121119'; bucket: 'base'"
+            i18n
+          >
+            Join Minds Now
+          </button>
+        </ng-container>
 
         <div class="m-homepage__appButtons">
           <a
-            href="https://itunes.apple.com/app/minds-com/id961771928"
+            href="https://play.google.com/store/apps/details?id=com.minds.mobile"
             target="_blank"
           >
-            <img [src]="cdnAssetsUrl + 'assets/app-store.png'" />
+            <img [src]="cdnAssetsUrl + 'assets/homepage/android.png'" />
           </a>
-
           <a
-            href="https://play.google.com/store/apps/details?id=com.minds.mobile"
+            href="https://itunes.apple.com/app/minds-com/id961771928"
             target="_blank"
           >
-            <img [src]="cdnAssetsUrl + 'assets/google-play.png'" />
+            <img [src]="cdnAssetsUrl + 'assets/homepage/app-store.png'" />
           </a>
         </div>
+
+        <ng-container *ngIf="isMobile()">
+          <button
+            class="mf-button mf-button--alt m-homepage__joinButton"
+            (click)="goToLoginPage()"
+            *mExperiment="'Homepage121119'; bucket: 'base'"
+            i18n
+          >
+            Join Minds Now
+          </button>
+        </ng-container>
       </div>
 
       <div
-        class="m-grid__column-5 m-grid__column-5--tablet m-grid__column-12--mobile m-marketing__image"
+        class="m-grid__column-5 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__image"
         *mExperiment="'Homepage121119'; bucket: 'base'"
       >
-        <span>
-          <img
-            class="m-homepage__cellphone"
-            [src]="cdnAssetsUrl + 'assets/homepage/homepage-1.png'"
-          />
+        <span class="m-homepage__cellphone">
+          <img [src]="cdnAssetsUrl + 'assets/homepage/homepage-1.png'" />
         </span>
       </div>
 
       <div
-        class="m-grid__column-5 m-grid__column-12--mobile m-homepage__registerForm"
+        class="m-grid__column-5 m-grid__column-6--tablet m-grid__column-12--mobile m-homepage__registerForm"
         *mExperiment="'Homepage121119'; bucket: 'form'"
       >
-        <minds-form-register [showTitle]="true" [gradientButton]="true">
+        <minds-form-register
+          [showTitle]="true"
+          [showBigButton]="true"
+          [showPromotions]="false"
+          [showLabels]="true"
+        >
         </minds-form-register>
       </div>
     </div>

src/app/modules/homepage/homepage.component.scss

@@ -8,46 +8,63 @@ m-homepage {
 
   .m-marketing__main {
     &.m-marketing__section--style-2 {
-      .m-marketing__body {
-        &::before {
-          transform: translate(311px, -123px);
-          clip-path: polygon(57% 0, 100% 0, 100% 15%, 15% 90%);
-          bottom: -80px;
-
-          @include m-theme() {
-            background: themed($m-amber-medium);
-          }
+      .m-marketing__wrapper {
+        @media screen and (min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
+          padding: 72px 0 0;
         }
-
-        .m-homepage__joinButton {
-          margin-bottom: 120px;
-          background: #5dbac0 !important;
-          border-color: #5dbac0 !important;
+        @media screen and (max-width: $max-mobile) {
+          padding: 0;
         }
 
-        &::after {
-          content: '';
-          clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
-          background: #f5f6ff;
+        .m-marketing__body {
+          &::before {
+            transform: translate(311px, -123px);
+            clip-path: polygon(57% 0, 100% 0, 100% 15%, 15% 90%);
+            bottom: -80px;
 
-          position: absolute;
-          bottom: -10px;
-          left: -140px;
-          height: 202px;
-          right: -600px;
+            @include m-theme() {
+              background: themed($m-amber-medium);
+            }
+          }
 
-          z-index: -2;
-        }
+          .m-homepage__joinButton {
+            margin: 60px 0;
+            @include m-theme() {
+              background: themed($m-aqua);
+              border-color: themed($m-aqua) !important;
+            }
 
-        @media screen and (max-width: $max-mobile) {
-          &::before {
-            transform: translate(161px, 205px);
+            &.m-homepage__joinButton--first {
+              margin: 0 0 175px;
+            }
           }
 
           &::after {
-            left: 0;
-            right: 0;
-            bottom: -750px;
+            content: '';
+            clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
+            background: #f5f6ff;
+
+            position: absolute;
+            bottom: -10px;
+            left: -140px;
+            height: 202px;
+            right: -600px;
+
+            z-index: -2;
+          }
+
+          @media screen and (max-width: $max-mobile) {
+            &::before {
+              transform: translate(153px, 212px);
+              clip-path: polygon(69% 0, 100% 0, 100% 28%, 0 90%);
+            }
+
+            &::after {
+              left: 0;
+              right: 0;
+              bottom: -626px;
+              bottom: -698px;
+            }
           }
         }
       }
@@ -59,9 +76,10 @@ m-homepage {
         minds-form-register {
           display: block;
           background-color: #fcfcfc;
+
           padding: 50px 37px;
 
-          clip-path: polygon(0 0, 100% 10px, 100% 95%, 0% 100%);
+          clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
 
           h3 {
             font-size: 24px;
@@ -69,12 +87,23 @@ m-homepage {
             font-weight: bold;
           }
 
+          .mdl-cell {
+            margin: 0;
+            padding-bottom: 14px;
+          }
+
           form {
             background: transparent !important;
 
             .mdl-card__supporting-text {
               overflow: visible;
             }
+
+            input:not([type='checkbox']) {
+              padding: 10px 15px;
+              height: 37px;
+              font-weight: normal;
+            }
           }
 
           span,
@@ -84,16 +113,19 @@ m-homepage {
           }
 
           label.mdl-checkbox {
-            //display: flex;
-            //align-items: center;
-            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            padding-top: 0;
+            margin-bottom: 33px;
           }
 
           .mdl-card__actions {
             flex-direction: column;
-            padding: 8px;
+            align-items: flex-start;
+            margin-top: 14px;
+            padding: 0;
 
-            & > * {
+            & > *:not(button) {
               color: #4a4a4a !important;
             }
 
@@ -103,30 +135,47 @@ m-homepage {
 
             button {
               align-self: flex-end;
+              @include m-theme() {
+                background-color: themed($m-aqua);
+              }
             }
           }
         }
 
         @media screen and (max-width: $max-mobile) {
-          margin: 30px 10px 50px;
+          margin: 30px 26px 50px;
           &::before {
             content: '';
             display: block;
             position: absolute;
             width: 393px;
             height: 193px;
-            //top: -66px;
-            bottom: 190px;
+            top: -66px;
+            //bottom: 190px;
             left: -144px;
             transform: translate(45px, 32px);
             background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
               no-repeat;
             z-index: -1;
           }
+
+          minds-form-register {
+            padding: 48px 25px;
+          }
+        }
+
+        @media screen and (min-width: $max-mobile) and (max-width: 760px) {
+          minds-form-register {
+            padding: 40px 20px;
+          }
         }
       }
     }
 
+    .m-homepage__spacer {
+      margin-bottom: 60px;
+    }
+
     .m-marketing__image {
       margin: 0 auto;
 
@@ -135,17 +184,43 @@ m-homepage {
           content: initial !important;
         }
 
-        .m-homepage__cellphone {
-          //box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
-          height: auto !important;
-          object-fit: initial !important;
-          width: 333px !important;
-
-          @media screen and (min-width: $min-tablet) {
-            transform: translateY(-25px);
+        &.m-homepage__cellphone {
+          filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
+          clip-path: none;
+
+          @media screen and (max-width: $max-mobile) {
+            &::before {
+              content: '' !important;
+              display: block;
+              position: absolute;
+              width: 393px;
+              height: 193px;
+              top: -70px;
+              //bottom: 190px;
+              left: -144px;
+              transform: translate(45px, 32px);
+              background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
+                no-repeat;
+              z-index: -1;
+            }
           }
-          @media screen and (min-width: $max-mobile) {
-            width: 100% !important;
+
+          & > img {
+            //box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+            height: auto !important;
+            object-fit: initial !important;
+
+            max-width: 333px;
+            min-width: 250px;
+            width: 100%;
+            clip-path: none;
+
+            @media screen and (min-width: $min-tablet) {
+              transform: translateY(-25px);
+            }
+            @media screen and (max-width: $max-mobile) {
+              min-width: 333px;
+            }
           }
         }
       }
@@ -156,11 +231,14 @@ m-homepage {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    width: 50%;
+    //width: 50%;
 
     margin-top: 50px;
 
+    & > a:first-child {
+      margin-right: 5%;
+    }
+
     @media screen and(max-width: $max-mobile) {
       width: 100%;
       & > a:not(:first-child) {
@@ -175,6 +253,7 @@ m-homepage {
 
       img {
         width: 100%;
+        min-width: 100px;
       }
     }
   }

src/app/modules/homepage/homepage.component.ts

@@ -39,6 +39,8 @@ export class HomepageComponent implements OnInit, OnDestroy {
     if (/iP(hone|od)/.test(window.navigator.userAgent)) {
       this.flags.canPlayInlineVideos = false;
     }
+
+    this.topbarService.toggleMarketingPages(true);
   }
 
   ngOnInit() {
@@ -46,7 +48,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.topbarService.toggleBackground(true);
+    this.topbarService.toggleMarketingPages(false);
   }
 
   goToLoginPage() {
@@ -62,8 +64,6 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   @HostListener('window:resize')
   onResize() {
-    this.topbarService.toggleBackground(window.innerWidth <= 640);
-
     const tick: HTMLSpanElement = document.querySelector(
       '.m-marketing__imageUX > .m-marketing__imageTick'
     );
@@ -75,4 +75,8 @@ export class HomepageComponent implements OnInit, OnDestroy {
       tick.classList.remove('m-marketing__imageTick--right');
     }
   }
+
+  isMobile() {
+    return window.innerWidth < 480;
+  }
 }

src/stylesheets/themes.scss

@@ -67,7 +67,7 @@ $blue-light: #71aae7;
 $green-dark: #388e3c;
 $green: #4caf50;
 $green-light: #8bc34a;
-$aqua: #4fc3a9;
+$aqua: #5dbac0;
 $amber-dark: #ffa000;
 $amber: #ffc108;
 $amber-medium: #fed12f;