added first tutorial content

src/app/app.module.ts

@@ -84,6 +84,7 @@ import { environment } from '../environments/environment';
 import { BookmarksComponent } from './components/floating-column/manage-account/bookmarks/bookmarks.component';
 import { AttachementImageComponent } from './components/stream/status/attachements/attachement-image/attachement-image.component';
 import { TutorialEnhancedComponent } from './components/tutorial-enhanced/tutorial-enhanced.component';
+import { NotificationsTutorialComponent } from './components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component';
 
 
 const routes: Routes = [
@@ -148,7 +149,8 @@ const routes: Routes = [
         NotificationComponent,
         BookmarksComponent,
         AttachementImageComponent,
-        TutorialEnhancedComponent
+        TutorialEnhancedComponent,
+        NotificationsTutorialComponent
     ],
     entryComponents: [
         EmojiPickerComponent

src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.html

@@ -0,0 +1,40 @@
+<div class="tutorial-content">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue nisi sed luctus aliquet. Quisque ut mi
+        nec neque elementum malesuada. Mauris sed dignissim magna. Ut et sodales risus. Duis porta mi leo, sed sodales
+        turpis posuere auctor. Praesent sollicitudin leo et tortor facilisis porta. Fusce eget tortor suscipit, auctor
+        ipsum eget, pharetra augue. Mauris mollis, risus scelerisque dapibus maximus, diam neque ultricies nibh, non
+        faucibus diam turpis non sapien. Etiam dignissim pellentesque neque, a sagittis velit pretium at. Morbi vitae
+        nisi tristique, tristique arcu sit amet, dictum odio. Sed commodo odio urna, sit amet vehicula turpis congue sit
+        amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pretium
+        malesuada nibh, sed vehicula ligula convallis sed.<br />
+        <br />
+        Nulla pulvinar convallis lorem ac dignissim. Suspendisse commodo odio eget leo egestas, eget congue lorem
+        gravida. In erat lorem, ultricies pharetra purus eget, egestas mollis leo. Duis sollicitudin aliquet interdum.
+        Vestibulum in efficitur nisl, ac fermentum felis. Maecenas fermentum commodo molestie. Curabitur imperdiet in
+        libero finibus lacinia. Aenean in nunc vel quam ullamcorper maximus. Suspendisse vehicula eget justo ac
+        eleifend. Aliquam bibendum quis sapien at dignissim. Pellentesque porttitor, elit nec accumsan ullamcorper, ante
+        dolor vestibulum est, id iaculis mauris sem id urna. Vestibulum eu augue egestas, sollicitudin enim quis,
+        hendrerit est. Pellentesque imperdiet tincidunt ante, non sollicitudin felis molestie viverra. Maecenas ac
+        commodo purus. Suspendisse a ipsum vitae ipsum blandit fringilla sed sed est.<br />
+        <br />
+        Duis ut sodales lorem, eget aliquam tellus. Curabitur vel pellentesque enim. Pellentesque sit amet pretium
+        ipsum. Nunc at est quis ligula ornare luctus ac sed magna. Vestibulum ante ipsum primis in faucibus orci luctus
+        et ultrices posuere cubilia curae; Sed eleifend nunc purus, sed euismod nisi varius ac. Etiam tempor feugiat
+        ligula sit amet feugiat. Nam congue, ipsum sed vestibulum porttitor, sapien turpis consectetur felis, fermentum
+        rhoncus odio urna id dui. Nullam iaculis urna lacus, sit amet lacinia augue porta sed. Curabitur iaculis ipsum
+        magna. In sed vestibulum augue. Vivamus quis elit id sem aliquam convallis.<br />
+        <br />
+        Curabitur sed vulputate urna. Sed at sapien vel lectus dictum suscipit ac quis nibh. Suspendisse potenti. Mauris
+        venenatis purus vitae purus ullamcorper, sit amet tristique ligula hendrerit. Quisque dignissim elit at ornare
+        gravida. Nunc et erat in magna posuere iaculis et non nulla. Cras sapien nulla, semper non urna ut, imperdiet
+        auctor neque. Aliquam ac maximus quam. Fusce pretium efficitur molestie. In bibendum in lacus vitae fringilla.
+        Vestibulum nec magna nec tortor lacinia feugiat. Duis in porta ligula. Vestibulum hendrerit commodo mauris, eget
+        porta erat pellentesque sit amet. Maecenas ac tincidunt mi.<br />
+        <br />
+        Cras sed sagittis lorem. Morbi convallis imperdiet auctor. Proin ac maximus quam. Suspendisse eu hendrerit quam.
+        Nullam porttitor, dui non eleifend consequat, purus urna auctor felis, sit amet vulputate magna justo vitae
+        ligula. Donec eu leo aliquet, molestie neque in, dictum mauris. Quisque ultricies, elit in varius ultricies,
+        lectus eros semper leo, id suscipit lorem lectus sit amet nibh.
+    </p>
+</div>

src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsTutorialComponent } from './notifications-tutorial.component';
+
+xdescribe('NotificationsTutorialComponent', () => {
+  let component: NotificationsTutorialComponent;
+  let fixture: ComponentFixture<NotificationsTutorialComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationsTutorialComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationsTutorialComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-notifications-tutorial',
+  templateUrl: './notifications-tutorial.component.html',
+  styleUrls: ['../tutorial-enhanced.component.scss']
+})
+export class NotificationsTutorialComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/tutorial-enhanced/tutorial-enhanced.component.html

@@ -1,6 +1,6 @@
 <div class="tutorial">
-    <div class="tutorial__content">
-
+    <div class="tutorial__content flexcroll">
+        <app-notifications-tutorial *ngIf="index === 0"></app-notifications-tutorial>
     </div>
     <div class="tutorial__footer">        
         <a href (click)="close()" 

src/app/components/tutorial-enhanced/tutorial-enhanced.component.scss

@@ -1,4 +1,6 @@
 @import"variables";
+@import "commons";
+@import "panel";
 
 $border-color: #1d2335;
 $footer-height: 30px;
@@ -12,7 +14,7 @@ $footer-height: 30px;
     &__content {
         // outline: 1px dotted greenyellow;
         overflow-y: auto;
-
+        padding: 5px 10px;
         height: calc(100% - #{$footer-height});
     }
 
@@ -22,7 +24,7 @@ $footer-height: 30px;
 
         &--button {
             text-transform: uppercase;
-            font-size: 1em;
+            font-size: 15px;
             text-align: center;
             display: inline-block;
             height: $footer-height;
@@ -59,4 +61,8 @@ $footer-height: 30px;
             }
         }
     }
+}
+
+.tutorial-content {
+    font-size: 14px;
 }