better tutorial canvas

src/app/app.component.scss

@@ -179,7 +179,7 @@ app-streams-selection-footer {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0,0,0,0.9);
     z-index: 9999999;
     opacity: 0;
     transition: all .4s;

src/app/app.component.ts

@@ -63,7 +63,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         // disable tutorial for future update
-        localStorage.setItem('tutorial', JSON.stringify(true));
+        //localStorage.setItem('tutorial', JSON.stringify(true));
 
         this.paramsSub = this.activatedRoute.queryParams.subscribe(params => {
             const code = params['code'];

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

@@ -1,5 +1,5 @@
 <div class="tutorial-content">
-    <h2 class="tutorial-content__title">And... you're all set! 🎉</h2>
+    <h2 class="tutorial-content__title-important">And... you're all set! 🎉</h2>
     <p>
         Please find below more informations about Sengi.<br />
         <br />

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

@@ -12,7 +12,7 @@
             [class.tutorial__footer--button--disabled]="!previousAvailable">prev.</a>
         <a href (click)="next()" 
             title="next"
-            class="tutorial__footer--button tutorial__footer--button--navigate"
+            class="tutorial__footer--button tutorial__footer--button--next"
             [class.tutorial__footer--button--disabled]="!nextAvailable">next</a>
     </div>    
 </div>

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

@@ -30,7 +30,7 @@ $footer-height: 30px;
             height: $footer-height;
             width: calc(33.33333% - 1px);
             color: white;
-            padding-top: 3px;
+            padding-top: 4px;
             transition: all .2s;
         
             &:not(:last-child){
@@ -50,6 +50,19 @@ $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;
+                    background-color: rgb(0, 74, 109);
+                    background-color: rgb(0, 117, 172);
+                }
+            }
 
             &--disabled {
                 color: #4e5672;
@@ -71,6 +84,11 @@ $footer-height: 30px;
 
     }
 
+    &__title-important {
+        font-size: 20px;
+        margin: 5px 0 15px 10px;
+    }
+
     &__subtitle {
         font-size: 16px;