src/app/common/components/date-dropdowns/date-dropdowns.component.scss

@@ -3,7 +3,6 @@ m-date__dropdowns {
 
   select {
     display: inline-block;
-    color: #4a4a4a;
     background-color: #fff;
     box-sizing: border-box;
     margin: 0 10px 0 0;
@@ -17,7 +16,12 @@ m-date__dropdowns {
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
     font-size: 16px;
     line-height: 21px;
-    border: 1px solid #e8e8e8;
-    border-radius: 0;
+    border-radius: 2px;
+
+    @include m-theme() {
+      color: themed($m-grey-800);
+      background-color: themed($m-white);
+      border: 1px solid #e2e2e2;
+    }
   }
 }

src/app/common/components/marketing/marketing.component.ts

@@ -2,23 +2,40 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import { MindsTitle } from '../../../services/ux/title';
+import { V2TopbarService } from '../../layout/v2-topbar/v2-topbar.service';
 
 @Component({
   selector: 'm-marketing',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'marketing.component.html',
 })
-export class MarketingComponent implements OnInit {
+export class MarketingComponent implements OnInit, OnDestroy {
   @Input() pageTitle: string = '';
+  @Input() showBottombar: boolean = true;
+  @Input() forceBackground: boolean = true;
 
-  constructor(protected title: MindsTitle) {}
+  constructor(
+    protected title: MindsTitle,
+    private topbarService: V2TopbarService
+  ) {}
 
   ngOnInit() {
     if (this.pageTitle) {
       this.title.setTitle(this.pageTitle);
     }
+
+    this.topbarService.toggleMarketingPages(
+      true,
+      this.showBottombar,
+      this.forceBackground
+    );
+  }
+
+  ngOnDestroy() {
+    this.topbarService.toggleMarketingPages(false);
   }
 }

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

@@ -82,33 +82,37 @@
         <ng-container
           *mIfFeature="'register_pages-december-2019'; else singleButton"
         >
-          <div class="m-v2-topbar__Container__LoginWrapper">
-            <a
-              class="m-v2-topbarLoginWrapper__login"
-              routerLink="/login"
-              title="Login"
-              i18n-title
-            >
-              Login
-            </a>
+          <ng-container *ngIf="!onAuthPages">
+            <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="/register"
-              title="Join Minds Now"
-              i18n-title
-            >
-              Join Minds Now
-            </a>
-          </div>
+              <a
+                class="m-v2-topbarLoginWrapper__joinMindsNow"
+                routerLink="/register"
+                title="Join Minds Now"
+                i18n-title
+              >
+                Join Minds Now
+              </a>
+            </div>
+          </ng-container>
         </ng-container>
 
         <ng-template #singleButton>
-          <div class="m-v2-topbar__Container__LoginWrapper">
-            <a routerLink="/login" title="Login" i18n-title>
-              Login / Signup
-            </a>
-          </div>
+          <ng-container *ngIf="!onAuthPages">
+            <div class="m-v2-topbar__Container__LoginWrapper">
+              <a routerLink="/login" title="Login" i18n-title>
+                Login / Signup
+              </a>
+            </div>
+          </ng-container>
         </ng-template>
       </ng-template>
 

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

@@ -43,10 +43,10 @@
     .m-v2-topbar {
       padding: 15px 0 0;
       max-width: 1084px;
-      margin: 0 auto 8px auto;
+      margin: 0 auto 5px auto;
 
       @media screen and (max-width: 1168px) {
-        margin: 0 25px 8px 25px;
+        margin: 0 25px 5px;
       }
 
       .m-v2-topbarNavItem__Logo {
@@ -55,17 +55,12 @@
       }
     }
 
-    .m-v2-topbar__Container__LoginWrapper {
-      & > a {
-        background: transparent !important;
-      }
-      & > a.m-v2-topbarLoginWrapper__login,
-      & > a.m-v2-topbarLoginWrapper__joinMindsNow {
-        margin-right: 40px;
-        @include m-theme() {
-          border: 1px solid themed($m-black-always);
-          color: themed($m-black-always);
-        }
+    .m-v2-topbar__Container__LoginWrapper > a {
+      margin-right: 40px;
+      @include m-theme() {
+        background: transparent;
+        border: 1px solid themed($m-black-always);
+        color: themed($m-black-always);
       }
     }
   }

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

@@ -13,6 +13,8 @@ import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component';
 import { ThemeService } from '../../../common/services/theme.service';
 import { V2TopbarService } from './v2-topbar.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'm-v2-topbar',
@@ -23,7 +25,9 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
   minds = window.Minds;
   timeout;
   isTouchScreen = false;
+  forceBackground: boolean = true;
   showBackground: boolean = true;
+  showSeparateLoginBtns: boolean = false;
   marketingPages: boolean = false;
   showBottombar: boolean = true;
 
@@ -33,17 +37,25 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
   componentRef;
   componentInstance: NotificationsToasterComponent;
 
+  onAuthPages: boolean = false; // sets to false if we're on login or register pages
+
+  router$;
+
   constructor(
     protected session: Session,
     protected cd: ChangeDetectorRef,
     private themeService: ThemeService,
     protected componentFactoryResolver: ComponentFactoryResolver,
-    protected topbarService: V2TopbarService
+    protected topbarService: V2TopbarService,
+    protected router: Router
   ) {}
 
   ngOnInit() {
     this.loadComponent();
     this.session.isLoggedIn(() => this.detectChanges());
+
+    this.listen();
+
     this.topbarService.setContainer(this);
   }
 
@@ -68,16 +80,24 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
    * @param value
    * @param showBottombar
    */
-  toggleMarketingPages(value: boolean, showBottombar = true) {
+  toggleMarketingPages(
+    value: boolean,
+    showBottombar = true,
+    forceBackground: boolean = true
+  ) {
     this.marketingPages = value;
+    this.showSeparateLoginBtns = value;
     this.showBottombar = value && showBottombar;
+    this.forceBackground = forceBackground;
     this.onScroll();
     this.detectChanges();
   }
 
   @HostListener('window:scroll')
   onScroll() {
-    this.showBackground = this.marketingPages
+    this.showBackground = this.forceBackground
+      ? true
+      : this.marketingPages
       ? window.document.body.scrollTop > 52
       : true;
   }
@@ -110,4 +130,27 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
       clearTimeout(this.timeout);
     }
   }
+
+  private listen() {
+    this.setOnAuthPages(this.router.url);
+
+    this.router$ = this.router.events.subscribe(
+      (navigationEvent: NavigationEnd) => {
+        if (navigationEvent instanceof NavigationEnd) {
+          if (!navigationEvent.urlAfterRedirects) {
+            return;
+          }
+
+          this.setOnAuthPages(
+            navigationEvent.urlAfterRedirects || navigationEvent.url
+          );
+        }
+      }
+    );
+  }
+
+  private setOnAuthPages(url) {
+    this.onAuthPages = url === '/login' || url === '/register';
+    this.detectChanges();
+  }
 }

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

@@ -13,9 +13,17 @@ export class V2TopbarService {
     return this;
   }
 
-  toggleMarketingPages(value: boolean, showBottombar: boolean = true) {
+  toggleMarketingPages(
+    value: boolean,
+    showBottombar: boolean = true,
+    forceBackground: boolean = true
+  ) {
     if (this.container) {
-      this.container.toggleMarketingPages(value, showBottombar);
+      this.container.toggleMarketingPages(
+        value,
+        showBottombar,
+        forceBackground
+      );
     }
   }
 }

src/app/modules/auth/login.component.scss

@@ -90,11 +90,15 @@ m-login {
         font-size: 36px;
         line-height: 48px;
         font-weight: bold;
+
+        @include m-theme() {
+          color: themed($m-grey-800);
+        }
       }
 
       .mdl-cell {
         margin: 0;
-        padding-bottom: 14px;
+        padding-bottom: 25px;
       }
 
       form {
@@ -112,6 +116,17 @@ m-login {
           padding: 10px 15px;
           height: 37px;
           font-weight: normal;
+
+          @include m-theme() {
+            color: themed($m-grey-800);
+          }
+
+          &:active,
+          &:focus {
+            @include m-theme() {
+              outline: 1px solid themed($m-blue);
+            }
+          }
         }
 
         &.m-loginBox__bigButton {
@@ -138,6 +153,10 @@ m-login {
       label:not(.mdl-checkbox) {
         display: inline-block;
         margin-bottom: 10px;
+
+        @include m-theme() {
+          color: themed($m-grey-300);
+        }
       }
 
       label.mdl-checkbox {

src/app/modules/auth/login.component.ts

@@ -68,7 +68,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.newDesign = this.featuresService.has('register_pages-december-2019');
 
     if (this.newDesign) {
-      this.topbarService.toggleMarketingPages(true);
+      this.topbarService.toggleMarketingPages(true, false, false);
     }
   }
 

src/app/modules/auth/register.component.html

@@ -3,7 +3,7 @@
   *mIfFeature="'register_pages-december-2019'; else registerBlock"
 >
   <div
-    class="m-grid__column-6 m-grid__column__skip-4 m-grid__column-8--tablet m-grid__column__skip-3--tablet m-grid__column-10--mobile m-grid__column__skip-2--mobile"
+    class="m-grid__column-6 m-grid__column__skip-4 m-grid__column-8--tablet m-grid__column__skip-3--tablet m-grid__column-12--mobile m-grid__column__skip-1--mobile"
   >
     <div class="m-register__wrapper">
       <minds-form-register
@@ -11,6 +11,7 @@
         [showBigButton]="true"
         [showPromotions]="false"
         [showLabels]="true"
+        [showInlineErrors]="true"
         (done)="registered()"
       >
       </minds-form-register>

src/app/modules/auth/register.component.ts

@@ -56,7 +56,7 @@ export class RegisterComponent implements OnInit, OnDestroy {
     this.newDesign = this.featuresService.has('register_pages-december-2019');
 
     if (this.newDesign) {
-      this.topbarService.toggleMarketingPages(true);
+      this.topbarService.toggleMarketingPages(true, false, false);
     }
   }
 

src/app/modules/forms/popover-validation/popover.component.scss

@@ -25,6 +25,8 @@ m-popover {
         border-width: 0 10px 10px 10px;
         transition-duration: 0.3s;
         transition-property: transform;
+        height: 24px;
+
         @include m-theme() {
           border-color: transparent transparent themed($m-white) transparent;
         }

src/app/modules/forms/popover-validation/popover.component.ts

@@ -3,6 +3,8 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
+  Output,
   ViewChild,
 } from '@angular/core';
 
@@ -22,6 +24,8 @@ export class PopoverComponent {
 
   hidden: boolean = false;
 
+  @Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   constructor(protected cd: ChangeDetectorRef) {}
 
   show(): void {
@@ -53,7 +57,10 @@ export class PopoverComponent {
       this.numbersCheck &&
       this.spacesCheck
     ) {
+      this.change.emit(true);
       setTimeout(() => this.hide(true), 500);
+    } else {
+      this.change.emit(false);
     }
     this.detectChanges();
   }

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

 <div
   class="mdl-card mdl-color--red-500 mdl-color-text--blue-grey-50  mdl-shadow--2dp minds-login-box m-error-box"
   style="min-height:0;"
-  [hidden]="!errorMessage"
+  [hidden]="showInlineErrors || !errorMessage"
 >
   <div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
-    {{errorMessage}}
+    <ng-container *ngTemplateOutlet="errorTemplate"></ng-container>
   </div>
 </div>
-<h3 *ngIf="showTitle">Join the Minds revolution</h3>
-<span class="m-register__alreadyAUser" *ngIf="showTitle"
-  >Already have an account? <a [routerLink]="'/login'">login</a></span
->
+
+<ng-template #errorTemplate>
+  {{ errorMessage }}
+</ng-template>
+
+<h3 *ngIf="showTitle">Join the Minds Revolution</h3>
+<span class="m-register__alreadyAUser" *ngIf="showTitle">
+  Already have an account? <a [routerLink]="'/login'">Login</a>
+</span>
 
 <!-- START: Register -->
 <form
@@ -36,6 +41,20 @@
         onfocus="this.removeAttribute('readonly');"
         [class.m-input--hide-placeholder]="showLabels"
       />
+      <div class="m-register__error" *ngIf="showError('username')">
+        <ng-container
+          *ngIf="this.form.get('username').errors.minlength"
+          i18n="@@MINDS__REGISTER__EXCEPTION__USERNAME_TOO_SHORT"
+        >
+          Must be at least 4 characters long
+        </ng-container>
+        <ng-container
+          *ngIf="this.form.get('username').errors.maxlength"
+          i18n="@@MINDS__REGISTER__EXCEPTION__USERNAME_TOO_LONG"
+        >
+          Cannot be longer than 128 characters
+        </ng-container>
+      </div>
     </div>
 
     <div class="mdl-cell mdl-cell--12-col">
@@ -50,12 +69,20 @@
         i18n-placeholder="email placeholder|@@FORMS__REGISTER__EMAIL_PLACEHOLDER"
         [class.m-input--hide-placeholder]="showLabels"
       />
+      <div class="m-register__error" *ngIf="showError('email')">
+        <ng-container
+          *ngIf="this.form.get('email').errors.email"
+          i18n="@@MINDS__REGISTER__EXCEPTION__INVALID_EMAIL"
+        >
+          Invalid email
+        </ng-container>
+      </div>
     </div>
     <div class="mdl-cell mdl-cell--12-col" style="position: relative">
       <label for="password" *ngIf="showLabels" i18n>
         Password
       </label>
-      <m-popover #popover>
+      <m-popover (change)="onPopoverChange($event)" #popover>
         <input
           type="password"
           id="password"
@@ -86,6 +113,17 @@
         onfocus="this.removeAttribute('readonly');"
         [class.m-input--hide-placeholder]="showLabels"
       />
+      <div
+        class="m-register__error"
+        *ngIf="this.form.get('password2').dirty || this.form.get('password2').touched"
+      >
+        <ng-container
+          *ngIf="this.form.errors?.passwordConfirming"
+          i18n="@@MINDS__REGISTER__EXCEPTION__INVALID_EMAIL"
+        >
+          Passwords must match
+        </ng-container>
+      </div>
     </div>
 
     <div
@@ -102,6 +140,13 @@
     </div>
   </div>
 
+  <div
+    class="m-register__formError"
+    *ngIf="showInlineErrors && showBigButton && errorMessage"
+  >
+    <ng-container *ngTemplateOutlet="errorTemplate"></ng-container>
+  </div>
+
   <div class="mdl-card__actions">
     <div>
       <label
@@ -160,7 +205,7 @@
     <button
       class="mf-button mf-button--alt"
       (click)="register($event)"
-      [disabled]="!this.form.valid || inProgress"
+      [disabled]="!this.form.valid|| this.passwordFieldValid || inProgress"
       *ngIf="showBigButton"
     >
       <ng-container i18n="@@FORMS__REGISTER__JOIN_MINDS_NOW_ACTION">

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

@@ -5,8 +5,15 @@ import {
   Input,
   Output,
   NgZone,
+  OnInit,
 } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import {
+  FormGroup,
+  FormBuilder,
+  Validators,
+  AbstractControl,
+  ValidationErrors,
+} from '@angular/forms';
 
 import { Client } from '../../../services/api';
 import { Session } from '../../../services/session';
@@ -21,13 +28,14 @@ import { FeaturesService } from '../../../services/features.service';
   selector: 'minds-form-register',
   templateUrl: 'register.html',
 })
-export class RegisterForm {
+export class RegisterForm implements OnInit {
   @Input() referrer: string;
   @Input() parentId: string = '';
   @Input() showTitle: boolean = false;
   @Input() showBigButton: boolean = false;
   @Input() showPromotions: boolean = true;
   @Input() showLabels: boolean = false;
+  @Input() showInlineErrors: boolean = false;
 
   @Output() done: EventEmitter<any> = new EventEmitter();
 
@@ -38,6 +46,7 @@ export class RegisterForm {
   captcha: string;
   takenUsername: boolean = false;
   usernameValidationTimeout: any;
+  passwordFieldValid: boolean = false;
 
   showFbForm: boolean = false;
 
@@ -56,16 +65,26 @@ export class RegisterForm {
     private experiments: ExperimentsService,
     private routerHistoryService: RouterHistoryService
   ) {
-    this.form = fb.group({
-      username: ['', Validators.required],
-      email: ['', Validators.required],
-      password: ['', Validators.required],
-      password2: ['', Validators.required],
-      tos: [false],
-      exclusive_promotions: [false],
-      captcha: [''],
-      previousUrl: this.routerHistoryService.getPreviousUrl(),
-    });
+    this.form = fb.group(
+      {
+        username: [
+          '',
+          [
+            Validators.required,
+            Validators.minLength(4),
+            Validators.maxLength(128),
+          ],
+        ],
+        email: ['', [Validators.required, Validators.email]],
+        password: ['', Validators.required],
+        password2: ['', [Validators.required]],
+        tos: [false, Validators.requiredTrue],
+        exclusive_promotions: [false],
+        captcha: [''],
+        previousUrl: this.routerHistoryService.getPreviousUrl(),
+      },
+      { validators: [this.passwordConfirmingValidator] }
+    );
   }
 
   ngOnInit() {
@@ -74,6 +93,20 @@ export class RegisterForm {
     }
   }
 
+  showError(field: string) {
+    return (
+      this.showInlineErrors &&
+      this.form.get(field).invalid &&
+      (this.form.get(field).dirty || this.form.get(field).touched)
+    );
+  }
+
+  passwordConfirmingValidator(c: AbstractControl): ValidationErrors | null {
+    if (c.get('password').value !== c.get('password2').value) {
+      return { passwordConfirming: true };
+    }
+  }
+
   register(e) {
     e.preventDefault();
     this.errorMessage = '';
@@ -83,7 +116,7 @@ export class RegisterForm {
       return;
     }
 
-    //re-enable cookies
+    // re-enable cookies
     document.cookie =
       'disabled_cookies=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
 
@@ -121,11 +154,11 @@ export class RegisterForm {
         }
 
         if (e.status === 'failed') {
-          //incorrect login details
+          // incorrect login details
           this.errorMessage = 'RegisterException::AuthenticationFailed';
           this.session.logout();
         } else if (e.status === 'error') {
-          //two factor?
+          // two factor?
           this.errorMessage = e.message;
           this.session.logout();
         } else {
@@ -177,4 +210,8 @@ export class RegisterForm {
   onPasswordBlur() {
     this.popover.hide();
   }
+
+  onPopoverChange(valid: boolean) {
+    this.passwordFieldValid = !valid;
+  }
 }

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

@@ -2,6 +2,8 @@
 
 <m-marketing
   class="m-homepage"
+  [showBottombar]="false"
+  [forceBackground]="false"
   [class.m-homepage__formExperiment]="!!registerForm"
   pageTitle="Minds Social Network"
   i18n-pageTitle
@@ -82,6 +84,7 @@
           [showBigButton]="true"
           [showPromotions]="false"
           [showLabels]="true"
+          [showInlineErrors]="true"
           (done)="navigate()"
           #registerForm
         >

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

@@ -212,11 +212,19 @@ m-homepage__v2 {
             line-height: 32px;
             font-weight: bold;
             margin: 0;
+
+            @include m-theme() {
+              color: themed($m-grey-800);
+            }
+          }
+
+          .m-register__alreadyAUser {
+            display: none;
           }
 
           .mdl-cell {
             margin: 0;
-            padding-bottom: 14px;
+            padding-bottom: 25px;
           }
 
           form {
@@ -231,6 +239,17 @@ m-homepage__v2 {
               padding: 10px 15px;
               height: 37px;
               font-weight: normal;
+
+              @include m-theme() {
+                color: themed($m-grey-800);
+              }
+
+              &:active,
+              &:focus {
+                @include m-theme() {
+                  outline: 1px solid themed($m-blue);
+                }
+              }
             }
           }
 
@@ -242,7 +261,11 @@ m-homepage__v2 {
 
           label:not(.mdl-checkbox) {
             display: inline-block;
-            margin-bottom: 14px;
+            margin-bottom: 10px;
+
+            @include m-theme() {
+              color: themed($m-grey-300);
+            }
           }
 
           label.mdl-checkbox {
@@ -277,6 +300,51 @@ m-homepage__v2 {
               }
             }
           }
+
+          .m-register__error,
+          .m-register__formError {
+            font-size: 14px;
+            line-height: 19px;
+
+            @include m-theme() {
+              color: themed($m-red) !important;
+            }
+          }
+
+          .m-register__formError {
+            margin-top: 20px;
+          }
+
+          .m-register__error {
+            margin-top: 3px;
+            text-align: right;
+          }
+
+          .mdl-checkbox {
+            &.is-checked {
+              .mdl-checkbox__tick-outline {
+                @include m-theme() {
+                  background-color: themed($m-blue);
+                }
+              }
+            }
+
+            .mdl-checkbox__box-outline {
+              @include m-theme() {
+                border: 1px solid themed($m-grey-100);
+              }
+            }
+          }
+
+          @media screen and(max-width: 1250px) {
+            label.mdl-checkbox {
+              margin-bottom: 20px;
+            }
+            .mdl-card__actions {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+          }
         }
 
         @media screen and (max-width: $m-grid-max-mobile) {

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

@@ -13,7 +13,7 @@ import { FeaturesService } from '../../services/features.service';
   selector: 'm-homepage__v2',
   templateUrl: 'homepage-v2.component.html',
 })
-export class HomepageV2Component implements OnDestroy {
+export class HomepageV2Component {
   @ViewChild('registerForm', { static: false }) registerForm: RegisterForm;
 
   readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
@@ -27,7 +27,6 @@ export class HomepageV2Component implements OnDestroy {
     public navigation: NavigationService,
     public session: Session,
     private loginReferrer: LoginReferrerService,
-    private topbarService: V2TopbarService,
     private featuresService: FeaturesService
   ) {
     this.title.setTitle('Minds Social Network', false);
@@ -36,12 +35,6 @@ export class HomepageV2Component implements OnDestroy {
       this.router.navigate(['/newsfeed']);
       return;
     }
-
-    this.topbarService.toggleMarketingPages(true, false);
-  }
-
-  ngOnDestroy() {
-    this.topbarService.toggleMarketingPages(false);
   }
 
   navigate() {

src/app/modules/onboarding-v2/page/onboarding.component.scss

@@ -83,11 +83,16 @@ m-onboarding {
 
       h2.m-onboarding__noticeTitle {
         font-size: 32px;
+        font-weight: bold;
         line-height: 32px;
         margin-top: 0;
+
+        @include m-theme() {
+          color: themed($m-grey-800);
+        }
       }
 
-      & > h1 {
+      h1 {
         font-size: 20px;
         line-height: 44px;
         font-weight: bold;
@@ -105,11 +110,12 @@ m-onboarding {
         }
       }
 
-      & > h2 {
+      h2 {
         font-size: 32px;
         line-height: 43px;
         color: #4a4a4a;
         padding-bottom: 13px;
+        font-weight: bold;
 
         &.m-onboarding__mobileTitle {
           font-size: 28px;
@@ -235,27 +241,38 @@ m-onboarding {
           flex-direction: column;
 
           &.m-onboardingControl__dateOfBirth {
+            position: relative;
             padding-top: 15px;
           }
 
           .m-onboardingControl__label {
+            & > label {
+              font-size: 14px;
+              line-height: 19px;
+              margin-bottom: 8px;
+            }
+
             & > span {
+              font-style: italic;
               position: absolute;
               right: 0;
               top: 0;
             }
           }
 
-          & > * {
-            margin-bottom: 8px;
-          }
-
           input[type='text'],
           input[type='number'] {
             display: block;
             width: 100%;
             height: 36px;
             border: 1px solid #e8e8e8;
+            font-size: 14px;
+            padding-left: 8px;
+            margin-bottom: 8px;
+
+            @include m-theme() {
+              color: themed($m-grey-800);
+            }
 
             &:active,
             &:focus {
@@ -272,6 +289,7 @@ m-onboarding {
 
             m-phone-input {
               display: flex;
+              margin-bottom: 8px;
 
               .m-phone-input--wrapper {
                 justify-content: flex-start;
@@ -284,6 +302,12 @@ m-onboarding {
                   width: 100%;
                   padding-left: 8px;
 
+                  font-size: 14px;
+
+                  @include m-theme() {
+                    color: themed($m-grey-800);
+                  }
+
                   &:active,
                   &:focus {
                     outline: 1px solid #4a90e2;
@@ -333,6 +357,7 @@ m-onboarding {
           margin-left: 10px;
 
           .m-tooltip--anchor {
+            font-weight: bold;
             color: rgba(0, 0, 0, 0.5);
           }
 
@@ -354,6 +379,10 @@ m-onboarding {
         & > *:not(:first-child) {
           margin-left: 30px;
         }
+
+        a {
+          cursor: pointer;
+        }
       }
     }
   }
@@ -361,11 +390,16 @@ m-onboarding {
   .mf-button--hollow {
     border-color: #e7e7e7 !important;
     color: #9b9b9b !important;
+    font-size: 16px !important;
+    line-height: 21px !important;
+    font-weight: 300 !important;
   }
 
   .mf-button--alt {
     background-color: #5dbac0 !important;
     border-color: #5dbac0 !important;
     color: white !important;
+    font-size: 20px !important;
+    line-height: 26px !important;
   }
 }

src/app/modules/onboarding-v2/progressbar/progressbar.component.scss

@@ -47,10 +47,12 @@
       margin-left: 0;
     }
 
+    flex-grow: 1;
     display: flex;
     flex-direction: column;
-    width: 72px;
-    margin: 0 25px;
+    min-width: 72px;
+    max-width: 122px;
+    margin: 0 20px;
     text-transform: uppercase;
 
     .m-onboardingProgressbarItem__number {
@@ -61,6 +63,7 @@
     .m-onboardingProgressbarItem__selector {
       width: 18px;
       height: 18px;
+      margin-top: 10px;
 
       border-radius: 100%;
       background-color: #d5d5d5;

src/app/modules/onboarding-v2/steps/channels/list/list.component.scss

@@ -16,7 +16,8 @@ m-onboarding__channelList {
 
   .m-channelList__empty {
     padding: 8px;
-    font-size: 10px;
+    font-size: 14px;
+    line-height: 19px;
     @include m-theme() {
       color: themed($m-grey-400);
     }

src/app/modules/onboarding-v2/steps/groups/list/list.component.scss

@@ -16,7 +16,8 @@ m-onboarding__groupList {
 
   .m-groupList__empty {
     padding: 8px;
-    font-size: 10px;
+    font-size: 14px;
+    line-height: 19px;
     @include m-theme() {
       color: themed($m-grey-400);
     }

src/app/modules/onboarding-v2/steps/hashtags/hashtags.component.html

@@ -13,10 +13,11 @@
     <li
       class="m-hashtagsList__item"
       [class.m-hashtagsList__item--selected]="hashtag.selected"
+      (click)="toggleSelection(hashtag)"
       *ngFor="let hashtag of hashtags"
     >
-      <span (click)="toggleSelection(hashtag)">
-        #{{ hashtag.value | titlecase }}
+      <span>
+        {{ hashtag.value | titlecase }}
       </span>
     </li>
   </ul>

src/app/modules/onboarding-v2/steps/hashtags/hashtags.component.scss

 m-onboarding__hashtagsStep {
   .m-onboarding__description {
+    margin: 0 0 35px !important;
     line-height: 21px !important;
     color: #4a4a4a !important;
   }
@@ -24,6 +25,7 @@ m-onboarding__hashtagsStep {
       font-size: 18px;
       line-height: 44px;
       font-weight: bold;
+      border: 1px solid transparent;
 
       @media screen and(max-width: $max-mobile) {
         font-size: 16px;

src/app/modules/onboarding-v2/steps/info/phone-input/input.component.html

@@ -13,31 +13,28 @@
 
     <span i18n>Optional</span>
   </div>
-
-  <div class="m-onboarding__control">
-    <div class="m-onboarding__phoneInput">
-      <div class="m-onboarding__input">
-        <m-phone-input [(ngModel)]="number" ngDefaultControl></m-phone-input>
-        <div class="m-onboarding__error" *ngIf="numberError">
-          {{ numberError }}
-        </div>
+  <div class="m-onboarding__phoneInput">
+    <div class="m-onboarding__input">
+      <m-phone-input [(ngModel)]="number" ngDefaultControl></m-phone-input>
+      <div class="m-onboarding__error" *ngIf="numberError">
+        {{ numberError }}
       </div>
+    </div>
 
-      <div
-        *ngIf="inProgress"
-        class="mdl-spinner mdl-js-spinner is-active"
-        [mdl]
-      ></div>
+    <div
+      *ngIf="inProgress"
+      class="mdl-spinner mdl-js-spinner is-active"
+      [mdl]
+    ></div>
 
-      <div
-        class="m-onboardingInput__saveButton"
-        [class.disabled]="!number || number.length < 13"
-        (click)="savePhoneNumber()"
-        *ngIf="!inProgress"
-        i18n
-      >
-        <i class="material-icons">check</i>
-      </div>
+    <div
+      class="m-onboardingInput__saveButton"
+      [class.disabled]="!number || number.length < 13"
+      (click)="savePhoneNumber()"
+      *ngIf="!inProgress"
+      i18n
+    >
+      <i class="material-icons">check</i>
     </div>
   </div>
 </ng-container>

src/app/modules/onboarding-v2/steps/notice/notice.component.html

-<div class="m-onboarding__form">
-  <img
-    [src]="cdnAssetsUrl + 'assets/waving-hand.png'"
-    class="m-notice__wavingEmoji"
-    [class.m-notice__wavingEmoji--mobile]="isMobile()"
-  />
+<img
+  [src]="cdnAssetsUrl + 'assets/waving-hand.png'"
+  class="m-notice__wavingEmoji"
+  [class.m-notice__wavingEmoji--mobile]="isMobile()"
+/>
 
-  <h1 class="m-onboarding__mobileTitle" *ngIf="isMobile()" i18n>
-    Welcome
-  </h1>
+<h1
+  class="m-onboarding__noticeTitle m-onboarding__mobileTitle"
+  *ngIf="isMobile()"
+  i18n
+>
+  Welcome
+</h1>
 
-  <h1 class="m-onboarding__noticeTitle" *ngIf="!isMobile()" i18n>
-    Welcome to the Minds Community
-  </h1>
-  <h2
-    class="m-onboarding__noticeTitle"
-    [class.m-onboarding__mobileTitle]="isMobile()"
-  >
-    @{{ user.username }}
-  </h2>
+<h1 class="m-onboarding__noticeTitle" *ngIf="!isMobile()" i18n>
+  Welcome to the Minds Community
+</h1>
+<h2
+  class="m-onboarding__noticeTitle"
+  [class.m-onboarding__mobileTitle]="isMobile()"
+>
+  @{{ user.username }}
+</h2>
 
-  <p class="m-onboarding__description" i18n>
-    Your privacy is our priority. You are free to provide as much or as little
-    information as you wish for better recommendations and to connect with
-    people in your local area.
-  </p>
+<p class="m-onboarding__description" i18n>
+  Your privacy is our priority. You are free to provide as much or as little
+  information as you wish for better recommendations and to connect with people
+  in your local area.
+</p>
 
-  <div class="m-onboarding__actionButtons">
-    <button class="mf-button mf-button--alt" (click)="continue()">
-      <span i18n>Let's Get Setup</span>
-    </button>
-    <a (click)="skip()" i18n>
-      No thanks, I'll do it later
-    </a>
-  </div>
+<div class="m-onboarding__actionButtons">
+  <button class="mf-button mf-button--alt" (click)="continue()">
+    <span i18n>Let's Get Setup</span>
+  </button>
+  <a (click)="skip()" i18n>
+    No thanks, I'll do it later
+  </a>
 </div>