refactored to use updated skill class variable names. added a "installed" icon for installed skills

market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.html

@@ -1,14 +1,15 @@
-<mat-card-header>
+<div fxLayout="row" fxLayoutAlign="space-between center">
     <div class="mycroft-icon">
         <img src="../../../../assets/mycroft-logo.svg"  *ngIf="isMycroftMade"  matTooltip="Mycroft Made">
     </div>
     <div class="skill-icon">
         <fa
-            *ngIf="!skill.icon_image"
+            *ngIf="!skill.iconImage"
             [ngStyle]="{'color': skill.icon.color}"
             name={{skill.icon.icon}} size="2x"
         >
         </fa>
-        <img *ngIf="skill.icon_image" src={{skill.icon_image}} height="30" width="30">
+        <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="30" width="30">
     </div>
-</mat-card-header>
+    <fa-icon *ngIf="isInstalled" class="installed-icon" [icon]="installedIcon"></fa-icon>
+</div>

market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.scss

@@ -5,19 +5,14 @@ mat-card-header {
     margin-bottom: 15px;
     .mycroft-icon {
         left: 18px;
-        position: absolute;
         top: 18px;
         img {
             height: 20px;
             width: 20px;
         }
     }
-    .skill-icon {
-        //offset the skill icon by the width of the
-        // mycroft icon to center it on card
-        margin-left: -15px;
-        fa-icon {
-            font-size: 28px;
-        }
+    fa-icon {
+        color: $mycroft-tertiary-green;
+        font-size: 20px;
     }
 }

market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts

@@ -4,7 +4,7 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { Skill } from "../../skills.service";
-import { faMicrophoneAlt } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
     selector: 'market-skill-card-header',
@@ -14,6 +14,8 @@ import { faMicrophoneAlt } from "@fortawesome/free-solid-svg-icons";
 export class SkillCardHeaderComponent implements OnInit {
     @Input() public skill: Skill;
     public isMycroftMade: boolean;
+    public isInstalled: boolean;
+    public installedIcon = faCheckCircle;
 
     constructor() { }
 
@@ -24,5 +26,8 @@ export class SkillCardHeaderComponent implements OnInit {
         if (this.skill.credits) {
             this.isMycroftMade = this.skill.credits[0]['name'] == 'Mycroft AI';
         }
+        if (this.skill.installStatus === 'installed') {
+            this.isInstalled = true;
+        }
     }
 }