added thankyou tutorial

src/app/app.module.ts

@@ -89,6 +89,7 @@ import { AccountComponent } from './components/common/account/account.component'
 import { TutorialEnhancedComponent } from './components/tutorial-enhanced/tutorial-enhanced.component';
 import { NotificationsTutorialComponent } from './components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component';
 import { LabelsTutorialComponent } from './components/tutorial-enhanced/labels-tutorial/labels-tutorial.component';
+import { ThankyouTutorialComponent } from './components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component';
 
 const routes: Routes = [
     { path: "", component: StreamsMainDisplayComponent },
@@ -157,7 +158,8 @@ const routes: Routes = [
         AccountComponent,
         TutorialEnhancedComponent,
         NotificationsTutorialComponent,
-        LabelsTutorialComponent
+        LabelsTutorialComponent,
+        ThankyouTutorialComponent
     ],
     entryComponents: [
         EmojiPickerComponent

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

@@ -0,0 +1,36 @@
+<div class="tutorial-content">
+    <h2 class="tutorial-content__title-important">Thank you!</h2>
+    <p>
+        Thank you for downloading Sengi, I hope you will enjoy using this app as much as I did when making it.<br />
+        <br />
+        Please find below some useful informations and... that's it! <br />
+        <br />
+    </p>
+    <h3 class="tutorial-content__subtitle">The app's account</h3>
+    <p>
+        <a href="https://mastodon.social/@sengi_app" target="_blank">
+            <img class="content__expand content__expand--smaller" src="assets/img/account.png" /><br />
+        </a>
+
+        <a class="follow" href (click)="follow()" title="follow @Sengi_app with all your account(s)">
+            Follow @Sengi_app
+        </a>
+    </p>
+    <h3 class="tutorial-content__subtitle">Alternative builds</h3>
+    <p>
+        <a class="link link__tab" href="https://hub.docker.com/r/nicolasconstant/sengi" target="_blank">Official Docker
+            build</a><br />
+        <a class="link link__tab" href="https://snapcraft.io/sengi" target="_blank">Official Snap build</a><br />
+        <br />
+    </p>
+    <h3 class="tutorial-content__subtitle">Other ressources</h3>
+    <p>
+        <a class="link link__tab" href="https://nicolasconstant.github.io/sengi/" target="_blank">Official
+            page</a><br />
+        <a class="link link__tab" href="https://github.com/NicolasConstant/sengi" target="_blank">Github
+            Repository</a><br />
+        <a class="link link__tab" href="https://write.as/nicolas-constant/" target="_blank">Maintainer's dev
+            blog</a><br />
+        <br />
+    </p>
+</div>

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

@@ -0,0 +1,17 @@
+.follow {
+    color: white;
+    display: block;
+    border: 1px solid rgb(0, 84, 122);
+    border-radius: 5px;
+    width: 200px;
+    text-align: center;
+    padding: 10px 0;
+    margin: 0 auto 30px auto;
+    transition: all .2s;
+    box-shadow: inset 0 0 5px rgb(0, 84, 122);
+
+    &:hover, &:focus {
+        text-decoration: none;
+        background-color: rgb(0, 84, 122);
+    }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-thankyou-tutorial',
+    templateUrl: './thankyou-tutorial.component.html',
+    styleUrls: ['../tutorial-enhanced.component.scss', './thankyou-tutorial.component.scss']
+})
+export class ThankyouTutorialComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    follow(): boolean {
+        return false;
+    }
+}

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

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

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

@@ -32,8 +32,8 @@ $footer-height: 30px;
             color: white;
             padding-top: 4px;
             transition: all .2s;
-        
-            &:not(:last-child){
+
+            &:not(:last-child) {
                 border-right: 1px solid $border-color;
             }
 
@@ -50,12 +50,13 @@ $footer-height: 30px;
                     background-color: rgb(0, 74, 109);
                 }
             }
-            
+
             &--next {
                 background-color: rgb(230, 230, 230);
                 background-color: rgb(0, 74, 109);
                 background-color: rgb(0, 84, 122);
                 color: white;
+
                 // font-weight: bold;
                 &:hover {
                     text-decoration: none;
@@ -66,10 +67,11 @@ $footer-height: 30px;
 
             &--disabled {
                 color: #4e5672;
+
                 &:hover {
                     cursor: default;
-                    text-decoration: none;     
-                    background-color: rgba(0, 0, 0, 0); 
+                    text-decoration: none;
+                    background-color: rgba(0, 0, 0, 0);
                 }
             }
         }
@@ -101,11 +103,30 @@ $footer-height: 30px;
         width: 48px;
         display: block;
     }
-    
-    &__expand {
+
+    &__expand {        
         margin: auto;
         width: calc(100%);
         max-width: 380px;
         display: block;
+
+        &--smaller {
+            max-width: 270px;
+        }
+    }
+}
+
+.link {
+    color: white;
+    text-decoration: underline;
+
+    &:hover,
+    &:active,
+    &:focus {
+        color: rgb(218, 218, 218);
+    }
+
+    &__tab {
+        padding-left: 10px;
     }
 }