toaster ui changes

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

@@ -5,6 +5,7 @@ import { PersonalDetailsService } from '../../services/personal-details.service'
 import { CareerProfileModel } from '../../models/career-profile.model';
 import { UtilsService } from '../../../../oneit/services/utils.service';
 import { HelperService } from '../../services/helper.service';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
     selector: 'app-home',
@@ -21,6 +22,7 @@ export class HomeComponent extends BaseComponent implements OnInit {
         private ps: PersonalDetailsService,
         private hs: HelperService,
         private us: UtilsService,
+        private ts: ToasterService
     ) {
         super();
     }
@@ -31,7 +33,8 @@ export class HomeComponent extends BaseComponent implements OnInit {
             .pipe(takeUntil(this.componentInView))
             .subscribe(profile => {
                 this.careerProfile = this.us.cloneObject(profile);
-            })
+            });
+        this.ts.warning('You have completed your Career History, one step closer to done.')
     }
 
     getCareerProfile(): void {

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html

@@ -6,7 +6,7 @@
                 <img src="assets/my-career-web/svgs/avatar.svg" alt="">
             </div>
         </div>
-        <div class="user-profile-label">Profile {{careerProfile.CompletedPercentage || 0}}% complete <i class="fa fa-trophy" *ngIf="careerProfile.CompletedPercentage"></i></div>
+        <div class="user-profile-label">Profile 0% complete</div>
 
         <hr style="border-bottom: 1px solid #E0E0E0; margin: 24px 0;">
 
@@ -18,7 +18,7 @@
             <div class="user-profile-sections">
                 <div class="user-profile-section active">
                     <span>Personal Details</span>
-                    <span class="section-percentage">0%</span>
+                    <span class="section-percentage">{{careerProfile.CompletedPercentage || 0}}%</span>
                     <button pButton label="Get Started" routerLink="/my-career-web/dashboard/personal-details" class="ui-button-info section-start">
                     </button>
                 </div>

frontend/angular/src/app/components/my-career-web/layouts/wrapper/wrapper.component.html

 <div class="my-career-app container-fluid" [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
-    <p-toast></p-toast>
+
+    <p-toast>
+        <ng-template let-message pTemplate="message">
+            <div class="mc-toast-msg">
+                <div class="mc-toast-icon">
+                    <i class="fa fa-check" *ngIf="message.severity === 'success'"></i>
+                    <i class="fa fa-exclamation" *ngIf="message.severity === 'error' || message.severity === 'warn'"></i>
+                    <i class="fa fa-info" *ngIf="message.severity === 'info'"></i>
+                </div>
+                <div class="mc-toast-content">
+                    <span *ngIf="message.severity === 'success'"> Success!</span>
+                    <span *ngIf="message.severity === 'error'"> Error!</span>
+                    <span *ngIf="message.severity === 'warning'"> Attention!</span>
+                    <span *ngIf="message.severity === 'info'"> Update!</span>
+
+                    {{message.detail}}
+                </div>
+            </div>
+        </ng-template>
+    </p-toast>
+
     <router-outlet #o="outlet"></router-outlet>
 </div>

frontend/angular/src/app/components/my-career-web/services/toaster.service.ts

@@ -17,6 +17,10 @@ export class ToasterService {
     this.ms.add({severity: 'success', summary: title, detail: txt, life: 3000});
   }
 
+  warning(txt, title = 'Warning'): void {
+    this.ms.add({severity: 'warn', summary: title, detail: txt, life: 3000});
+  }
+
   info(txt, title = 'Notification'): void {
     this.ms.add({severity: 'info', summary: title, detail: txt, life: 3000});
   }

frontend/angular/src/styles/my-career-styles/primeng/_toast.scss

 .ui-toast {
-    width: 17em;
+    width: 60%;
+    top: 20px;
+    left: 20%;
+    display: flex;
+    align-items: center;
 
-    &-message {
+    p-toastItem {
+        width: 100%;
+        font-family: $bodyFont;
+    }
+
+    .ui-toast-message {
+        width: 100%;
+        margin-bottom: 0;
+        box-shadow: none;
+        padding: 12px 16px;
+        border-radius: 3px;
+
+        &-success {
+            border: 2px solid #1DBA3C;
+            background-color: #BBE6C4;
 
-        &-text-content {
-            margin-left: 0;
+            .mc-toast-icon, .ui-toast-close-icon {
+                color: #1DBA3C;
+            }
         }
 
-        &-error {
-            background: #bd2712;
-            color: #fff;
+        &-info {
+            border: 2px solid #8cd2f4;
+            background-color: #d2edfb;
+
+            .mc-toast-icon, .ui-toast-close-icon {
+                color: #86d0f3;
+            }
         }
 
-        &-success {
-            background: #1DBA3C;
-            color: #fff;
+        &-warn {
+            border: 2px solid #fbab4c;
+            background-color: #ffdeb5;
+
+            .mc-toast-icon, .ui-toast-close-icon {
+                color: #fbab4c;
             }
         }
 
-    &-close-icon {
-        color: #fff;
-        right: 8px;
-        top: 8px;
-        font-size: 20px;
+        &-error {
+            border: 2px solid #de1516;
+            background-color: #ffdad9;
+
+            .mc-toast-icon, .ui-toast-close-icon {
+                color: #de1516;
+            }
+        }
+
+
+        &-content {
+            padding: 0 !important;
         }
 
-    &-summary {
-        padding: 0 0 0.2em 0;
+        .mc-toast-icon {
+            height: 32px;
+            width: 32px;
+            background-color: #FFFFFF;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
         }
 
-    &-icon {
-        display: none;
+        .mc-toast-msg {
+            display: flex;
+            align-items: center;
+
+            .mc-toast-content {
+                margin-left: 16px;
+                color: $darkColor;
+                font-size: 15px;
+            }
+        }
+
+        .ui-toast-close-icon {
+            font-size: 24px;
+            top: 14px;
+            right: 17px;
+            font-weight: bold;
+        }
     }
 }