profile tasks bar ui fixes

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

 <div class="right-sidebar">
     <div class="user-profile">
         <i class="fa fa-bell" *ngIf="!isMobileView"></i>
-        <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder}">
+        <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder, backgroundColor: backgroundColor}">
             <div class="user-profile-avatar">
                 <img src="assets/my-career-web/svgs/avatar.svg" alt="">
             </div>
         </div>
-        <div class="user-profile-label">Profile {{careerProfile.CompletedPercentage || 0}}% complete</div>
+        <div class="user-profile-label">Profile {{careerProfile.CompletedPercentage || 0}}% complete <i class="fa fa-trophy" *ngIf="careerProfile.CompletedPercentage"></i></div>
 
         <hr style="border-bottom: 1px solid #E0E0E0; margin: 24px 0;">
 

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

@@ -42,6 +42,11 @@
         &-label {
             margin-top: 18px;
             text-align: center;
+
+            .fa-trophy {
+                margin-left: 10px;
+                color: #F3B924;
+            }
         }
 
         &-name, &-role, &-label {

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

@@ -14,6 +14,7 @@ export class ProfileTasksComponent extends BaseComponent {
 
     careerProfile = new CareerProfileModel();
     avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
+    backgroundColor = '#1469A2';
 
     constructor(
         private ps: PersonalDetailsService,
@@ -28,13 +29,21 @@ export class ProfileTasksComponent extends BaseComponent {
             .subscribe(profile => {
                 this.careerProfile = this.us.cloneObject(profile);
                 this.setProfileCompletion();
-            })
+            });
     }
 
     setProfileCompletion(): void {
-        const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
-        const degree =  percentage <= 180 ? 90 + percentage : percentage - 90;
-        this.avatarBorder = `linear-gradient(${degree}deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
+        const percentage =  (this.careerProfile.CompletedPercentage || 0) * 3.6;
+        for (let i = 0; i <= percentage; i++) {
+            if (percentage === 360) {
+                this.backgroundColor = '#1DBA3C';
+                this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #1DBA3C 50%),linear-gradient(90deg, #1DBA3C 50%, transparent 50%)`;
+            } else if (percentage<=180){
+                this.avatarBorder = `linear-gradient(${90 + percentage}deg, transparent 50%, #EAECEE 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
+            } else {
+                this.avatarBorder = `linear-gradient(${percentage - 90}deg, transparent 50%, #1469A2 50%),linear-gradient(90deg, #EAECEE 50%, transparent 50%)`;
+            }
+        }
     }
 
 }