profile taskbar fixes

frontend/angular/src/app/components/my-career-web/base/base-modal.component.ts

+import { BaseComponent } from './base.component';
+import { EventEmitter, Output } from '@angular/core';
+
+export class BaseModalComponent extends BaseComponent {
+
+    @Output() closeModal = new EventEmitter();
+
+    close(): void {
+        this.closeModal.emit();
+    }
+
+}

frontend/angular/src/app/components/my-career-web/dashboard/dashboard.module.ts

@@ -8,6 +8,7 @@ import { HomeComponent } from './home/home.component';
 import { LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
 import { ProfileTasksComponent } from './profile-tasks/profile-tasks.component';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
+import { GoPremiumComponent } from './go-premium/go-premium.component';
 
 @NgModule({
     imports: [
@@ -20,7 +21,8 @@ import { PersonalDetailsComponent } from './personal-details/personal-details.co
         HomeComponent,
         LeftSidebarComponent,
         ProfileTasksComponent,
-        PersonalDetailsComponent
+        PersonalDetailsComponent,
+        GoPremiumComponent
     ]
 })
 

frontend/angular/src/app/components/my-career-web/dashboard/go-premium/go-premium.component.html

+<div class="content-wrapper">
+
+    <div class="premium-header">
+        <h4>Go Premium</h4>
+        <i class="fa fa-times closeable" (click)="close()"></i>
+
+        <p style="margin-bottom: 30px;">Our goal is to give you a highly functional app to support your career grow for FREE.</p>
+        <p>But, we offer a Premium service to help you get a bit more out of <strong>Matchd Career</strong>.</p>
+    </div>
+
+    <div class="premium-body">
+
+        <div class="header-row premium-factor">
+            <div class="label-col">Features</div>
+            <div class="free-col">Free</div>
+            <div class="premium-col">Premium</div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Work Strengths Profile</div>
+            <div class="free-col"><i class="fa fa-check"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Work Preferences Profile</div>
+            <div class="free-col"><i class="fa fa-check"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Career Profile</div>
+            <div class="free-col"><i class="fa fa-check"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Individual Summary Report</div>
+            <div class="free-col"><i class="fa fa-check"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Included Career Templates</div>
+            <div class="free-col">3</div>
+            <div class="premium-col">7</div>
+        </div>
+
+
+        <div class="premium-factor">
+            <div class="label-col">Find Job Fit</div>
+            <div class="free-col"><i class="fa fa-times"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Manage Jobs</div>
+            <div class="free-col"><i class="fa fa-times"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+
+        <div class="premium-factor">
+            <div class="label-col">Career Development Report</div>
+            <div class="free-col"><i class="fa fa-times"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+        <div class="premium-factor">
+            <div class="label-col">Career Strengths Narrative</div>
+            <div class="free-col"><i class="fa fa-times"></i></div>
+            <div class="premium-col"><i class="fa fa-check"></i></div>
+        </div>
+
+    </div>
+
+    <div class="premium-footer">We give you 12-month access to all of these features for AUD$59.</div>
+
+    <div class="premium-action">
+        <button pButton label="Update to premium" class="ui-button-info"></button>
+    </div>
+
+</div>
+

frontend/angular/src/app/components/my-career-web/dashboard/go-premium/go-premium.component.scss

+@import "~styles/my-career-styles/variables";
+
+.content-wrapper {
+    padding: 20px 118px;
+    position: relative;
+    color: $darkColor;
+
+    .premium-header {
+        text-align: center;
+        margin-bottom: 24px;
+
+        h4 {
+            font-size: 24px;
+            font-family: $headingFont;
+            font-weight: bold;
+            margin-top: 0;
+        }
+
+        .closeable {
+            position: absolute;
+            right: 10px;
+            font-size: 24px;
+            top: 10px;
+            cursor: pointer;
+        }
+
+        p {
+            font-size: 15px;
+            font-family: $bodyFont;
+
+            strong {
+                font-weight: 500;
+            }
+        }
+    }
+
+    .premium-body {
+        margin-bottom: 24px;
+
+        .header-row {
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 16px;
+        }
+
+
+        .premium-factor {
+            display: flex;
+            margin-bottom: 10px;
+
+            .label-col {
+                min-width: 190px;
+            }
+
+            .free-col {
+                min-width: 30px;
+            }
+
+            .premium-col {
+                min-width: 60px;
+            }
+
+            .free-col, .premium-col {
+                margin-left: 90px;
+                text-align: center;
+
+                .fa-check {
+                    color: #1DBA3C;
+                    font-size: 16px;
+                }
+
+                .fa-times {
+                    color: #de1516;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .premium-footer {
+        font-size: 14px;
+        text-align: center;
+        margin-bottom: 32px;
+    }
+
+    .premium-action {
+        display: flex;
+        justify-content: center;
+
+        .ui-button-info {
+            height: 50px;
+            width: 260px;
+            border-radius: 73px;
+            background-color: #12A8DE;
+        }
+    }
+
+}

frontend/angular/src/app/components/my-career-web/dashboard/go-premium/go-premium.component.ts

+import { Component, OnInit } from '@angular/core';
+import { BaseModalComponent } from '../../base/base-modal.component';
+
+@Component({
+    selector: 'app-go-premium',
+    templateUrl: './go-premium.component.html',
+    styleUrls: ['./go-premium.component.scss']
+})
+export class GoPremiumComponent  extends BaseModalComponent implements OnInit {
+
+    constructor() {
+        super();
+    }
+
+    ngOnInit() {
+    }
+
+}

frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.html

@@ -49,7 +49,7 @@
 
 
         <div class="go-premium-wrapper">
-            <div class="go-premium">
+            <div class="go-premium" (click)="showPremium = true;">
                 <img src="assets/my-career-web/images/go-premium-temp.png" alt="">
             </div>
         </div>
@@ -70,3 +70,8 @@
             <span>© {{year}} Matchd | <span (click)="openPrivacyPolicy()">Privacy Policy</span></span>
     </div>
 </div>
+
+
+<p-dialog [(visible)]="showPremium" [modal]="true" [width]="720" [showHeader]="false" [focusOnShow]="false">
+    <app-go-premium (closeModal)="showPremium = false;"></app-go-premium>
+</p-dialog>

frontend/angular/src/app/components/my-career-web/dashboard/left-sidebar/left-sidebar.component.ts

@@ -13,6 +13,7 @@ import { EXTERNAL_LINKS } from '../../config/constants';
 export class LeftSidebarComponent extends BaseComponent {
 
     year = new Date().getFullYear();
+    showPremium = false;
 
     constructor(
         private as: AuthService,

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

@@ -18,6 +18,7 @@ import { InputMaskModule } from 'primeng/inputmask';
 import { ProgressBarModule } from 'primeng/progressbar';
 import { AssessmentService } from '../services/assessment.service';
 import { TruncatePipe } from './truncate.pipe';
+import { DialogModule } from 'primeng/dialog';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -30,7 +31,8 @@ const MODULES = [
     InputSwitchModule,
     ButtonModule,
     InputMaskModule,
-    ProgressBarModule
+    ProgressBarModule,
+    DialogModule
 ];
 
 const COMPONENTS = [