better tutorial navigation

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

@@ -15,6 +15,6 @@
         <a href (click)="next()" 
             title="next"
             class="tutorial__footer--button tutorial__footer--button--next"
-            [class.tutorial__footer--button--disabled]="!nextAvailable">next</a>
+            [class.tutorial__footer--button--disabled]="!nextAvailable"><span *ngIf="!tutorialEnded">next</span><span *ngIf="tutorialEnded">close</span></a>
     </div>    
 </div>

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

@@ -47,7 +47,7 @@ $footer-height: 30px;
             &--navigate {
                 &:hover {
                     text-decoration: none;
-                    background-color: rgb(0, 74, 109);
+                    background-color: rgb(0, 117, 172);
                 }
             }
 

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

@@ -11,7 +11,8 @@ export class TutorialEnhancedComponent implements OnInit {
     previousAvailable = false;
     nextAvailable = true;
     index = 0;
-    private maxIndex = 5;
+    tutorialEnded = false;
+    private maxIndex = 3;
 
     constructor() { }
 
@@ -38,6 +39,12 @@ export class TutorialEnhancedComponent implements OnInit {
     }
 
     private checkState() {
+        if(this.index >= this.maxIndex - 1){
+            this.tutorialEnded = true;
+        } else {
+            this.tutorialEnded = false;
+        }
+
         if (this.index === 0) {
             this.previousAvailable = false;
         } else {