src/app/common/common.module.ts

@@ -128,6 +128,7 @@ import { FormToastComponent } from './components/form-toast/form-toast.component
 import { SsoService } from './services/sso.service';
 import { V2TopbarService } from './layout/v2-topbar/v2-topbar.service';
 import { DateDropdownsComponent } from './components/date-dropdowns/date-dropdowns.component';
+import { SidebarMarkersService } from './layout/sidebar/markers.service';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -414,6 +415,10 @@ PlotlyModule.plotlyjs = PlotlyJS;
       provide: V2TopbarService,
       useFactory: V2TopbarService._,
     },
+    {
+      provide: SidebarMarkersService,
+      useFactory: SidebarMarkersService._,
+    },
   ],
   entryComponents: [
     NotificationsToasterComponent,

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

 m-date__dropdowns {
   display: flex;
+  justify-content: space-between;
 
   select {
     display: inline-block;
@@ -23,5 +24,20 @@ m-date__dropdowns {
       background-color: themed($m-white);
       border: 1px solid #e2e2e2;
     }
+
+    // month
+    &:nth-child(1) {
+      min-width: 120px;
+    }
+
+    // day
+    &:nth-child(2) {
+      min-width: 59px;
+    }
+
+    // year
+    &:nth-child(3) {
+      min-width: 77px;
+    }
   }
 }

src/app/common/layout/sidebar/markers.component.ts

@@ -3,6 +3,7 @@ import {
   ComponentFactoryResolver,
   ViewChild,
   HostListener,
+  AfterViewInit,
 } from '@angular/core';
 
 import { Storage } from '../../../services/storage';
@@ -10,12 +11,13 @@ import { Sidebar } from '../../../services/ui/sidebar';
 import { Session } from '../../../services/session';
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { GroupsSidebarMarkersComponent } from '../../../modules/groups/sidebar-markers/sidebar-markers.component';
+import { SidebarMarkersService } from './markers.service';
 
 @Component({
   selector: 'm-sidebar--markers',
   templateUrl: 'markers.component.html',
 })
-export class SidebarMarkersComponent {
+export class SidebarMarkersComponent implements AfterViewInit {
   @ViewChild(DynamicHostDirective, { static: true }) host: DynamicHostDirective;
 
   minds = window.Minds;
@@ -24,12 +26,17 @@ export class SidebarMarkersComponent {
   componentRef;
   componentInstance: GroupsSidebarMarkersComponent;
 
+  visible: boolean = true;
+
   constructor(
     public session: Session,
     public storage: Storage,
     public sidebar: Sidebar,
+    private sidebarMarkersService: SidebarMarkersService,
     private _componentFactoryResolver: ComponentFactoryResolver
-  ) {}
+  ) {
+    this.sidebarMarkersService.setContainer(this);
+  }
 
   ngAfterViewInit() {
     const isLoggedIn = this.session.isLoggedIn((is: boolean) => {

src/app/common/layout/sidebar/markers.service.ts

+import { SidebarMarkersComponent } from './markers.component';
+
+export class SidebarMarkersService {
+  private container: SidebarMarkersComponent;
+
+  static _() {
+    return new SidebarMarkersService();
+  }
+
+  setContainer(container: SidebarMarkersComponent) {
+    this.container = container;
+
+    return this;
+  }
+
+  toggleVisibility(visible: boolean) {
+    this.container.checkSidebarVisibility(visible);
+  }
+}

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

@@ -37,6 +37,7 @@
   class="m-v2-topbar__Top"
   [class.m-v2-topbar__marketingPages]="marketingPages"
   [class.m-v2-topbar__noBackground]="!showBackground"
+  [style.visibility]="showTopbar ? 'visible' : 'hidden'"
 >
   <div class="m-v2-topbar">
     <div class="m-v2-topbar__Container--left">

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

@@ -41,12 +41,12 @@
     }
 
     .m-v2-topbar {
-      padding: 15px 0 0;
+      padding: 15px 0 15px;
       max-width: 1084px;
-      margin: 0 auto 5px auto;
+      margin: 0 auto;
 
       @media screen and (max-width: 1168px) {
-        margin: 0 25px 5px;
+        margin: 0 25px;
       }
 
       .m-v2-topbarNavItem__Logo {

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

@@ -7,6 +7,7 @@ import {
   OnDestroy,
   ViewChild,
   HostListener,
+  HostBinding,
 } from '@angular/core';
 import { Session } from '../../../services/session';
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
@@ -29,6 +30,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
   showBackground: boolean = true;
   showSeparateLoginBtns: boolean = false;
   marketingPages: boolean = false;
+  showTopbar: boolean = true;
   showBottombar: boolean = true;
 
   @ViewChild(DynamicHostDirective, { static: true })
@@ -59,6 +61,12 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
     this.topbarService.setContainer(this);
   }
 
+  toggleVisibility(visible: boolean) {
+    this.showTopbar = visible;
+    this.showBottombar = visible;
+    this.detectChanges();
+  }
+
   getCurrentUser() {
     return this.session.getLoggedInUser();
   }

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

@@ -26,4 +26,8 @@ export class V2TopbarService {
       );
     }
   }
+
+  toggleVisibility(visible: boolean) {
+    this.container.toggleVisibility(visible);
+  }
 }

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

@@ -54,7 +54,7 @@ m-login {
     }
 
     @media screen and (max-width: $m-grid-max-mobile) {
-      margin: 30px 26px 50px;
+      margin: -52px 26px 50px;
       &::before {
         position: absolute;
         top: 0;
@@ -66,11 +66,10 @@ m-login {
     }
 
     .m-grid {
-      height: 100%;
-      padding: 20vh 0;
+      padding: 15vh 0 0;
 
       @media screen and (max-width: $m-grid-max-mobile) {
-        padding: 5vh 0;
+        padding: 10vh 0 0;
       }
     }
 
@@ -88,6 +87,7 @@ m-login {
       clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 95%);
 
       @media screen and (max-width: $m-grid-max-mobile) {
+        clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 99%);
         padding: 55px 26px 47px;
 
         h3,
@@ -206,11 +206,5 @@ m-login {
         }
       }
     }
-
-    @media screen and (min-width: $max-mobile) and (max-width: 760px) {
-      minds-form-login {
-        padding: 40px 20px;
-      }
-    }
   }
 }

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

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

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

@@ -29,7 +29,7 @@ m-register {
     }
 
     @media screen and (max-width: $m-grid-max-mobile) {
-      margin: 30px 26px 50px;
+      margin: -52px 26px 50px;
       &::before {
         position: absolute;
         top: 0;
@@ -41,11 +41,10 @@ m-register {
     }
 
     .m-grid {
-      height: 100%;
-      padding: 20vh 0;
+      padding: 15vh 0 0;
 
       @media screen and (max-width: $m-grid-max-mobile) {
-        padding: 5vh 0;
+        padding: 10vh 0 0;
       }
     }
 
@@ -60,6 +59,7 @@ m-register {
       background-color: #fcfcfc;
 
       @media screen and (max-width: $m-grid-max-mobile) {
+        clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 99%);
         padding: 55px 26px 47px;
 
         h3,
@@ -99,13 +99,15 @@ m-register {
 
         a {
           font-weight: 400;
-          color: #0091ff;
+          @include m-theme() {
+            color: themed($m-blue);
+          }
         }
       }
 
       .mdl-cell {
         margin: 0;
-        padding-bottom: 25px;
+        padding-bottom: 6px;
       }
 
       form {
@@ -134,6 +136,12 @@ m-register {
               outline: 1px solid themed($m-blue);
             }
           }
+
+          &.ng-invalid.ng-touched:not(.ng-pristine) {
+            @include m-theme() {
+              outline: 1px solid themed($m-red);
+            }
+          }
         }
       }
 
@@ -170,8 +178,13 @@ m-register {
           color: #4a4a4a !important;
         }
 
-        a {
-          color: #4a90e2;
+        a,
+        a:hover,
+        a:visited {
+          font-weight: 400;
+          @include m-theme() {
+            color: themed($m-blue);
+          }
         }
 
         button {
@@ -189,6 +202,11 @@ m-register {
               background-color: themed($m-blue);
             }
           }
+          .mdl-checkbox__box-outline {
+            @include m-theme() {
+              border: 1px solid themed($m-blue);
+            }
+          }
         }
 
         .mdl-checkbox__box-outline {
@@ -212,6 +230,7 @@ m-register {
       .m-register__formError {
         font-size: 14px;
         line-height: 19px;
+        height: 19px;
 
         @include m-theme() {
           color: themed($m-red) !important;

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, false, false);
+      this.topbarService.toggleVisibility(false);
     }
   }
 
@@ -98,7 +98,7 @@ export class RegisterComponent implements OnInit, OnDestroy {
     if (this.paramsSubscription) {
       this.paramsSubscription.unsubscribe();
     }
-    this.topbarService.toggleMarketingPages(false);
+    this.topbarService.toggleVisibility(true);
   }
 
   private navigateToRedirection() {

src/app/modules/forms/login/login.html

@@ -89,6 +89,7 @@
         i18n-placeholder="@@M__COMMON__USERNAME"
         autocomplete="username"
         (keydown.enter)="login(); $event.preventDefault();"
+        autofocus
       />
       <div class="m-login__error" *ngIf="!!usernameError">
         <ng-container

src/app/modules/forms/login/login.scss

@@ -13,8 +13,9 @@ m-login {
       }
     }
 
-    @media screen and(max-width: $m-grid-max-mobile) {
+    @media screen and(max-width: 680px) {
       flex-direction: column;
+      align-items: flex-start;
       margin-right: 0;
       margin-bottom: 24px;
 

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

@@ -58,7 +58,7 @@ m-popover {
             width: 24px;
             vertical-align: middle;
             line-height: 1;
-            font-size: 24px;
+            font-size: 21px;
             letter-spacing: normal;
             text-transform: none;
             display: inline-block;

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

@@ -36,20 +36,23 @@
         formControlName="username"
         [placeholder]="showLabels ? '' : 'Username'"
         i18n-placeholder="@@M__COMMON__USERNAME"
-        (keyup)="validationTimeoutHandler()"
         readonly
         onfocus="this.removeAttribute('readonly');"
         [class.m-input--hide-placeholder]="showLabels"
+        autofocus
       />
-      <div class="m-register__error" *ngIf="showError('username')">
+      <div
+        class="m-register__error"
+        [style.visibility]="showError('username') ? 'visible' : 'hidden'"
+      >
         <ng-container
-          *ngIf="this.form.get('username').errors.minlength"
+          *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"
+          *ngIf="this.form.get('username').errors?.maxlength"
           i18n="@@MINDS__REGISTER__EXCEPTION__USERNAME_TOO_LONG"
         >
           Cannot be longer than 128 characters
@@ -69,9 +72,12 @@
         i18n-placeholder="email placeholder|@@FORMS__REGISTER__EMAIL_PLACEHOLDER"
         [class.m-input--hide-placeholder]="showLabels"
       />
-      <div class="m-register__error" *ngIf="showError('email')">
+      <div
+        class="m-register__error"
+        [style.visibility]="showError('email') ? 'visible' : 'hidden'"
+      >
         <ng-container
-          *ngIf="this.form.get('email').errors.email"
+          *ngIf="this.form.get('email').errors?.email"
           i18n="@@MINDS__REGISTER__EXCEPTION__INVALID_EMAIL"
         >
           Invalid email
@@ -115,7 +121,7 @@
       />
       <div
         class="m-register__error"
-        *ngIf="this.form.get('password2').dirty || this.form.get('password2').touched"
+        *ngIf="this.form.get('password2').touched && this.form.get('password2').dirty"
       >
         <ng-container
           *ngIf="this.form.errors?.passwordConfirming"

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

@@ -97,7 +97,8 @@ export class RegisterForm implements OnInit {
     return (
       this.showInlineErrors &&
       this.form.get(field).invalid &&
-      (this.form.get(field).dirty || this.form.get(field).touched)
+      this.form.get(field).touched &&
+      this.form.get(field).dirty
     );
   }
 
@@ -142,9 +143,8 @@ export class RegisterForm implements OnInit {
         // TODO: [emi/sprint/bison] Find a way to reset controls. Old implementation throws Exception;
 
         this.inProgress = false;
-        this.session.login(data.user);
-
         this.done.next(data.user);
+        this.session.login(data.user);
       })
       .catch(e => {
         console.log(e);

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

@@ -199,7 +199,6 @@ m-homepage__v2 {
 
         minds-form-register {
           width: 409px;
-          height: 423px;
           display: block;
           background-color: #fcfcfc;
 
@@ -224,7 +223,7 @@ m-homepage__v2 {
 
           .mdl-cell {
             margin: 0;
-            padding-bottom: 25px;
+            padding-bottom: 6px;
           }
 
           form {
@@ -250,6 +249,12 @@ m-homepage__v2 {
                   outline: 1px solid themed($m-blue);
                 }
               }
+
+              &.ng-invalid.ng-touched:not(.ng-pristine) {
+                @include m-theme() {
+                  outline: 1px solid themed($m-red);
+                }
+              }
             }
           }
 
@@ -285,8 +290,13 @@ m-homepage__v2 {
               color: #4a4a4a !important;
             }
 
-            a {
-              color: #4a90e2;
+            a,
+            a:hover,
+            a:visited {
+              font-weight: 400;
+              @include m-theme() {
+                color: themed($m-blue);
+              }
             }
 
             button {
@@ -305,6 +315,7 @@ m-homepage__v2 {
           .m-register__formError {
             font-size: 14px;
             line-height: 19px;
+            height: 19px;
 
             @include m-theme() {
               color: themed($m-red) !important;

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

@@ -5,6 +5,10 @@ m-onboarding {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 
+  @include m-theme() {
+    background-color: themed($m-body-bg);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -27,13 +31,15 @@ m-onboarding {
   }
 
   .m-grid {
-    height: 100%;
-    margin: 20px 0;
+    margin: -52px 0;
+    padding-top: 52px;
   }
 
   .m-onboarding__wrapper {
     display: block;
     filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
+    max-width: 692px;
+    margin: 0 auto;
 
     .m-onboarding__form {
       display: block;
@@ -235,19 +241,22 @@ m-onboarding {
           display: flex;
           flex-direction: column;
 
-          &.m-onboardingControl__dateOfBirth {
-            padding-top: 15px;
+          &:not(:first-child) {
+            padding-top: 20px;
           }
 
           .m-onboardingControl__label {
             position: relative;
+
             & > label {
+              display: inline-block;
               font-size: 14px;
               line-height: 19px;
-              margin-bottom: 8px;
+              padding-bottom: 9.5px;
             }
 
             & > span {
+              font-weight: bold;
               font-style: italic;
               position: absolute;
               right: 0;
@@ -261,7 +270,8 @@ m-onboarding {
             width: 100%;
             height: 36px;
             border: 1px solid #e8e8e8;
-            font-size: 14px;
+            font-size: 16px;
+            line-height: 21px;
             padding-left: 8px;
             margin-bottom: 8px;
 
@@ -297,7 +307,8 @@ m-onboarding {
                   width: 100%;
                   padding-left: 8px;
 
-                  font-size: 14px;
+                  font-size: 16px;
+                  line-height: 21px;
 
                   @include m-theme() {
                     color: themed($m-grey-800);
@@ -316,6 +327,10 @@ m-onboarding {
             }
           }
 
+          m-date__dropdowns {
+            max-width: 294px;
+          }
+
           .mdl-spinner {
             position: absolute;
             top: 5px;
@@ -351,9 +366,15 @@ m-onboarding {
         m-tooltip {
           margin-left: 10px;
 
-          .m-tooltip--anchor {
+          .m-tooltip--anchored {
             font-weight: bold;
-            color: rgba(0, 0, 0, 0.5);
+            font-size: 15px;
+            line-height: 18px;
+            letter-spacing: 0;
+
+            @include m-theme() {
+              color: themed($m-grey-700);
+            }
           }
 
           .m-tooltip--bubble {

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

-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Session } from '../../../services/session';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Storage } from '../../../services/storage';
 import { OnboardingV2Service } from '../service/onboarding.service';
+import { V2TopbarService } from '../../../common/layout/v2-topbar/v2-topbar.service';
+import { SidebarMarkersService } from '../../../common/layout/sidebar/markers.service';
 
 @Component({
   selector: 'm-onboarding',
   templateUrl: 'onboarding.component.html',
 })
-export class OnboardingComponent {
+export class OnboardingComponent implements OnDestroy {
   steps = [
     {
       name: 'Hashtags',
@@ -34,7 +36,9 @@ export class OnboardingComponent {
     private router: Router,
     private storage: Storage,
     private route: ActivatedRoute,
-    private onboardingService: OnboardingV2Service
+    private onboardingService: OnboardingV2Service,
+    private topbarService: V2TopbarService,
+    private sidebarMarkersService: SidebarMarkersService
   ) {
     route.url.subscribe(() => {
       const section: string = route.snapshot.firstChild.routeConfig.path;
@@ -59,11 +63,18 @@ export class OnboardingComponent {
     this.checkIfAlreadyOnboarded();
   }
 
+  ngOnDestroy() {
+    this.topbarService.toggleVisibility(true);
+    this.sidebarMarkersService.toggleVisibility(true);
+  }
+
   async checkIfAlreadyOnboarded() {
     if (!(await this.onboardingService.shouldShow())) {
       this.router.navigate(['/newsfeed/subscriptions']);
     }
 
     this.onboardingService.shown();
+    this.topbarService.toggleVisibility(false);
+    this.sidebarMarkersService.toggleVisibility(false);
   }
 }

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

@@ -9,7 +9,7 @@
       *ngFor="let step of steps; let i = index"
     >
       <span class="m-onboardingProgressbarItem__number">{{ i + 1 }}</span>
-      <span>{{ step.name }}</span>
+      <span class="m-onboardingProgressbar__stepName">{{ step.name }}</span>
       <div class="m-onboardingProgressbarItem__selector"></div>
     </div>
   </ng-container>

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

@@ -60,6 +60,11 @@
       line-height: 18px;
     }
 
+    span.m-onboardingProgressbar__stepName {
+      font-size: 13px;
+      letter-spacing: 1.5px;
+    }
+
     .m-onboardingProgressbarItem__selector {
       width: 18px;
       height: 18px;

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

@@ -17,8 +17,8 @@ m-onboarding__hashtagsStep {
     li.m-hashtagsList__item {
       align-self: center;
       cursor: pointer;
-      margin: 2px;
-      padding: 6px;
+      margin: 2px 4.5px;
+      padding: 0 10px;
 
       border-radius: 5px;
 

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

@@ -9,12 +9,13 @@ m-onboarding__noticeStep {
     }
   }
 
-  @media screen and(max-width: $max-mobile) {
+  @media screen and(max-width: $m-grid-max-mobile) {
     .m-onboarding__actionButtons {
       flex-direction: column-reverse;
+      justify-content: flex-start;
 
       & > *:not(:first-child) {
-        margin: 0 0 50px;
+        margin: 0 0 50px !important;
       }
     }
   }