Upgrade to font awesome 5 (free)

package-lock.json

@@ -100,6 +100,30 @@
         "loader-utils": "1.1.0"
       }
     },
+    "@fortawesome/fontawesome": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.0.tgz",
+      "integrity": "sha512-HitzVVotHB70QGYaoKvkvaGqKL2P/xdpeg1KK1ESEyI5qBcZdRTWpH9W5XVB72Ev02V4Qo/Ldxjf4UL+kakWdw==",
+      "dev": true
+    },
+    "@fortawesome/fontawesome-free-brands": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.2.tgz",
+      "integrity": "sha512-J7SyvuBFxx3/4VcuSkVlsWxDLCj34Pc1zkOkxQkBDIvmbv6uXC3IUqkhZjyV7AHSM9iDoDeI9CczLk0sJwW25g==",
+      "dev": true
+    },
+    "@fortawesome/fontawesome-free-regular": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.2.tgz",
+      "integrity": "sha512-E4mG2ab0SH9+uEuPvPoDWnIshBGMD3LKih73pR2Kn+qPHujJw/UQXy1D2ousaSD7oLPBO1g0c3dx3laX2i/Neg==",
+      "dev": true
+    },
+    "@fortawesome/fontawesome-free-solid": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.2.tgz",
+      "integrity": "sha512-By7V/yO2XyMonzTmo6KxPcw0OLqycozNDJaASAcky+YZkIL7p1hJ8Ki5OlF4X2z1fMQfpXbbBVfeU6atr1rlUQ==",
+      "dev": true
+    },
     "@ng-bootstrap/ng-bootstrap": {
       "version": "1.0.0-beta.7",
       "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.7.tgz",

package.json

@@ -55,6 +55,10 @@
     "@angular/router": "^5.0.0",
     "@angularclass/hmr": "^2.1.0",
     "@angularclass/hmr-loader": "^3.0.2",
+    "@fortawesome/fontawesome": "^1.1.0",
+    "@fortawesome/fontawesome-free-brands": "^5.0.2",
+    "@fortawesome/fontawesome-free-regular": "^5.0.2",
+    "@fortawesome/fontawesome-free-solid": "^5.0.2",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
     "@types/jquery": "^3.2.16",
     "angular2-template-loader": "^0.6.2",

web/app/configs/widget/custom/custom.widget.component.html

@@ -20,7 +20,10 @@
     <my-spinner></my-spinner>
 </div>
 <div *ngIf="!isLoading">
-    <my-ibox title="Add {{ defaultName }}" [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
+    <my-ibox [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
+        <h5 class="my-ibox-title">
+            <i class="far fa-plus-square"></i> Add {{ defaultName }}
+        </h5>
         <div class="my-ibox-content">
             <form (submit)="addWidget()" novalidate name="addForm">
                 <ng-container *ngTemplateOutlet="widgetParams;context:{widget:newWidget}"></ng-container>
@@ -34,19 +37,20 @@
         </div>
     </my-ibox>
 
-    <my-ibox *ngFor="let widget of widgets trackById"
-             [isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId"
-             title="{{ widget.name || widget.url || defaultName }}">
+    <my-ibox *ngFor="let widget of widgets trackById" [isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId">
+        <h5 class="my-ibox-title">
+            <i class="far fa-edit"></i> {{ widget.name || widget.url || defaultName }}
+        </h5>
         <div class="my-ibox-content">
             <form (submit)="saveWidget(widget)" novalidate name="editForm">
                 <ng-container *ngTemplateOutlet="widgetParams;context:{widget:widget}"></ng-container>
 
                 <div style="margin-top: 25px">
                     <button type="submit" class="btn btn-sm btn-primary" [disabled]="isUpdating">
-                        <i class="fa fa-save"></i> Save Widget
+                        <i class="far fa-save"></i> Save Widget
                     </button>
                     <button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating" (click)="removeWidget(widget)">
-                        <i class="fa fa-times"></i> Remove Widget
+                        <i class="far fa-trash-alt"></i> Remove Widget
                     </button>
                 </div>
             </form>

web/app/elements/ibox/ibox.component.html

@@ -1,6 +1,10 @@
 <div class="ibox">
-    <div class="ibox-title" (click)="collapsed = !collapsed" [ngClass]="[isCollapsible ? 'ibox-title-collapsible' : '']">
-        <h5>{{ title }}</h5>
+    <div class="ibox-title" (click)="collapsed = !collapsed"
+         [ngClass]="[isCollapsible ? 'ibox-title-collapsible' : '']">
+        <h5 *ngIf="title">
+            {{ title }}
+        </h5>
+        <ng-content select=".my-ibox-title" *ngIf="!title"></ng-content>
         <ng-content select=".my-ibox-addl-title"></ng-content>
         <i class="ibox-icon fa" *ngIf="isCollapsible"
            [ngClass]="[collapsed ? 'fa-chevron-right' : 'fa-chevron-down']"></i>

web/app/elements/ibox/ibox.component.scss

@@ -1,32 +1 @@
-.ibox {
-  background-color: #fff;
-  padding: 0;
-  margin-bottom: 30px;
-}
-
-.ibox .ibox-title {
-  padding: 5px;
-  border-bottom: 1px solid #e7eaec;
-  border-top: 2px solid #e7eaec;
-}
-
-.ibox .ibox-title h5 {
-  display: inline;
-  font-size: 1.1em;
-  padding: 5px;
-  margin: 0;
-}
-
-.ibox .ibox-content {
-  padding: 15px;
-}
-
-.ibox .ibox-title .ibox-icon {
-  float: right;
-  margin-top: 4px;
-  cursor: pointer;
-}
-
-.ibox .ibox-title.ibox-title-collapsible {
-  cursor: pointer;
-}
+// The styles for iboxes are applied at an app level

web/app/riot/scalar-close/scalar-close.component.html

@@ -1 +1 @@
-<i class="fa fa-times-circle-o scalarClose" (click)="closeScalar()"></i>
+<i class="far fa-times-circle scalarClose" (click)="closeScalar()"></i>

web/public/index.html

@@ -9,7 +9,6 @@
     <link rel="icon" type="image/png" href="/img/favicon.png">
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
 
     <base href="/">
 </head>

web/style/app.scss

@@ -1,6 +1,7 @@
 // styles in src/style directory are applied to the whole page
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
 @import '../../node_modules/angular2-toaster/toaster';
+@import "components/ibox";
 @import "riot";
 
 body {
@@ -8,7 +9,7 @@ body {
   margin: 0;
   padding: 0;
   color: #333;
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Open Sans', sans-serif !important;
 }
 
 // HACK: Work around dialog not showing up

web/style/components/ibox.scss

@@ -0,0 +1,32 @@
+.ibox {
+  background-color: #fff;
+  padding: 0;
+  margin-bottom: 30px;
+}
+
+.ibox .ibox-title {
+  padding: 5px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 2px solid #e7eaec;
+}
+
+.ibox .ibox-title h5 {
+  display: inline;
+  font-size: 1.1em;
+  padding: 5px;
+  margin: 0;
+}
+
+.ibox .ibox-content {
+  padding: 15px;
+}
+
+.ibox .ibox-title .ibox-icon {
+  float: right;
+  margin-top: 4px;
+  cursor: pointer;
+}
+
+.ibox .ibox-title.ibox-title-collapsible {
+  cursor: pointer;
+}

web/vendor.ts

@@ -5,4 +5,10 @@ import "@angular/common";
 import "@angular/http";
 import "@angular/router";
 import "rxjs";
-import "@angularclass/hmr";
+import "@angularclass/hmr";
+import fontawesome from '@fortawesome/fontawesome';
+import solid from '@fortawesome/fontawesome-free-solid';
+import regular from '@fortawesome/fontawesome-free-regular';
+import brands from '@fortawesome/fontawesome-free-brands';
+
+fontawesome.library.add(regular, solid, brands);