FEATURE: Upgrade to Font Awesome 5

client-app/app/components/message-info.js

@@ -9,13 +9,15 @@ export default Component.extend({
   buttons: computed("currentMessage.protected", "showSolveButton", function() {
     const protect = this.get("currentMessage.protected");
     const buttons = [];
+    const prefix = "fas";
 
     if (!protect && this.showSolveButton) {
       buttons.push({
         klass: "solve",
         action: "solve",
-        icon: "check-square-o",
+        icon: "check-square",
         label: "Solve",
+        prefix: "far",
         danger: true
       });
     }
@@ -24,8 +26,9 @@ export default Component.extend({
       buttons.push({
         klass: "solve-all",
         action: "solveAll",
-        icon: "check-square-o",
+        icon: "check-square",
         label: "Solve All",
+        prefix: "far",
         danger: true
       });
     }
@@ -35,14 +38,16 @@ export default Component.extend({
         {
           klass: "remove",
           action: "remove",
-          icon: "trash-o",
+          icon: "trash-alt",
           label: "Remove",
+          prefix: "far",
           danger: true
         },
         {
           klass: "protect",
           action: "protect",
           icon: "lock",
+          prefix,
           label: "Protect"
         }
       );
@@ -51,14 +56,16 @@ export default Component.extend({
         klass: "unprotect",
         action: "unprotect",
         icon: "unlock",
+        prefix,
         label: "Unprotect"
       });
     }
 
     buttons.push({
       klass: "copy",
       action: "copyAction",
-      icon: "clipboard",
+      icon: "copy",
+      prefix: "far",
       label: "Copy"
     });
     return buttons;

client-app/app/models/group.js

@@ -16,7 +16,11 @@ export default EmberObject.extend({
   },
 
   glyph: computed(function() {
-    return "<i class='fa fa-clone group'></i>";
+    return "clone";
+  }),
+
+  prefix: computed(function() {
+    return "far";
   }),
 
   solveAll() {

client-app/app/models/message.js

@@ -87,19 +87,40 @@ export default Em.Object.extend({
   }),
 
   glyph: computed("severity", function() {
-    switch (this.get("severity")) {
+    switch (this.severity) {
       case 0:
         return "";
       case 1:
         return "";
       case 2:
-        return "<i class='fa fa-exclamation-circle warning'></i>";
+        return "exclamation-circle";
       case 3:
-        return "<i class='fa fa-times-circle error'></i>";
+        return "times-circle";
       case 4:
-        return "<i class='fa fa-times-circle fatal'></i>";
+        return "times-circle";
       default:
-        return "<i class='fa fa-question-circle unknown'></i>";
+        return "question-circle";
+    }
+  }),
+
+  prefix: computed(function() {
+    return "fas";
+  }),
+
+  klass: computed("severity", function() {
+    switch (this.severity) {
+      case 0:
+        return "";
+      case 1:
+        return "";
+      case 2:
+        return "warning";
+      case 3:
+        return "error";
+      case 4:
+        return "fatal";
+      default:
+        return "unknown";
     }
   })
 });