Onboarding

Closes #2270 (closed) Closes #2262 (closed) Closes #2342 (closed)

Testing

Homepage

• logged off, go to http://localhost, there're two variants that can appear in the homepage. One's with a registration form and another has a mobile phone and "Join Minds Now" buttons
• to trigger the other variant, you can either try by entering through another browser/device, or change the localStorage key experiments:Homepage121119 between base and form.
• if you have the variant with the mobile phone, clicking on any "Join Minds Now" should redirect to /onboarding/registration, where the register form will appear. After successfully registering, you will be redirected to the next onboarding step.
• if you have the variant with the register form, after registering, you should go to the first onboarding step: /notice

Onboarding

• skip buttons should go to the next step, except for the last, which should redirect to the newsfeed
• In hashtags step, it should only allow to continue if you've selected at least 3
• In the channel info step, it should allow you to set and verify your mobile phone (this may require some tweaking in the review sites)
• In the recommended groups and channels steps (which is basically the top feed filtered by your hashtags), you should see channels and groups which you can subscribe to (may require tweaking in review sites)

Feature Flags

'homepage-december-2019' => true,
'onboarding-december-2019' => true,
'register_pages-december-2019' => true,

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

 m-onboarding {
   display: block;
   padding-top: 30px;
-  overflow-x: hidden;
-  overflow-y: visible;
+  height: calc(100% + 104px); // 52 for the topbar and 52 for the bottom bar
 
   &::before {
     content: '';
     position: absolute;
     top: 0;
-    right: -290px;
+    right: 0;
     bottom: -80px;
     left: 0;
 
-    transform: translate(172px, -80px);
     clip-path: polygon(55% 0, 100% 0, 100% -1%, 18% 87%);
 
     @include m-theme() {
@@ -22,8 +20,7 @@ m-onboarding {
     @media screen and (max-width: $max-mobile) {
       right: 0;
       bottom: -3vw;
-      transform: translate(221px, -80px);
-      clip-path: polygon(55% 0, 100% 0, 100% 12%, -77% 105%);
+      clip-path: polygon(83% 0%, 100% 0, 116% 22%, 30% 43%);
     }
   }