chore(core): upgrade to font-awesome 5 (#5029)

spinnaker · Mar 21, 2018 · c2bdbf7 · c2bdbf7
1 parent 64e2ac9
commit c2bdbf7
Show file tree

Hide file tree

Showing 89 changed files with 163 additions and 178 deletions.
diff --git a/app/fonts/icons/chatBubbles.svg b/app/fonts/icons/chatBubbles.svg
diff --git a/app/fonts/spinnaker/icons.css b/app/fonts/spinnaker/icons.css
@@ -23,14 +23,6 @@ span[class^="icon-"], span[class*=" icon-"] {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-bubbles:before {
-  content: "\e96d";
-}
-
 .icon-spinner:before {
   content: "\e97e";
 }
-
-.icon-elb:before {
-  content: "\e600";
-}
diff --git a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
@@ -22,9 +22,9 @@ <h3>Could not find instance {{instanceIdNotFound}}.</h3>
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-hdd {{instance.healthState}}"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{instance ? instance.instanceId : instanceIdNotFound }}
       </h3>
     </div>

diff --git a/app/scripts/modules/amazon/src/loadBalancer/AmazonLoadBalancersTag.tsx b/app/scripts/modules/amazon/src/loadBalancer/AmazonLoadBalancersTag.tsx
@@ -52,7 +52,7 @@ class LoadBalancerButton extends React.Component<ILoadBalancerSingleItemProps> {
         <button className="btn btn-link no-padding" onClick={this.onClick}>
           <span className="badge badge-counter">
             <span className="icon">
-              <span className="icon-elb"/>
+              <i className="fa fa-sitemap"/>
             </span>
           </span>
         </button>
@@ -168,7 +168,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
           >
             <button onClick={this.handleClick} className="btn btn-link btn-multiple-load-balancers clearfix no-padding" >
               <span className="badge badge-counter">
-                <span className="icon"><span className="icon-elb"/></span> {totalCount}
+                <span className="icon"><i className="fa fa-sitemap"/></span> {totalCount}
               </span>
             </button>
           </HoverablePopover>

diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/common/SecurityGroups.tsx b/app/scripts/modules/amazon/src/loadBalancer/configure/common/SecurityGroups.tsx
@@ -203,7 +203,7 @@ class SecurityGroupsImpl extends React.Component<IWizardPageProps & FormikProps<
           <div className="form-group small" style={{ marginTop: '20px' }}>
             <div className="col-md-9 col-md-offset-3">
               <p>
-                {refreshing && <span><span className="fa fa-refresh fa-spin"/> </span>}
+                {refreshing && <span><span className="fa fa-sync-alt fa-spin"/> </span>}
                 Security groups
                 {!refreshing && <span> last refreshed {timestamp(refreshTime)}</span>}
                 {refreshing && <span> refreshing...</span>}

diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html
@@ -19,9 +19,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
-      <span class="icon icon-elb"></span>
-      <h3 select-on-dbl-click>
+    <div class="header-text horizontal middle">
+      <i class="fa fa-sitemap"/>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.loadBalancer.name}}
         <render-if-feature feature="entityTags">
 

diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html b/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html
@@ -19,9 +19,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <i class="fa fa-crosshairs icon" aria-hidden="true"></i>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.targetGroup.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/amazon/src/securityGroup/configure/createSecurityGroupIngress.html b/app/scripts/modules/amazon/src/securityGroup/configure/createSecurityGroupIngress.html
@@ -72,7 +72,7 @@
       <div class="form-group small" style="margin-top: 20px">
         <div class="col-md-12">
           <p>
-            <span ng-if="state.refreshingSecurityGroups"><span class="fa fa-refresh fa-spin"></span></span>
+            <span ng-if="state.refreshingSecurityGroups"><span class="fa fa-sync-alt fa-spin"></span></span>
             Security groups
             <span ng-if="!state.refreshingSecurityGroups">last refreshed {{ state.refreshTime | timestamp }}</span>
             <span ng-if="state.refreshingSecurityGroups"> refreshing...</span>

diff --git a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html
@@ -13,9 +13,9 @@ <h3>Could not find security group {{group}}.</h3>
     <div ng-if="state.loading" class="horizontal center middle">
       <loading-spinner size="'small'"></loading-spinner>
     </div>
-    <div class="header-text" ng-if="!state.loading">
+    <div class="header-text horizontal middle" ng-if="!state.loading">
       <span class="glyphicon glyphicon-transfer"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{securityGroup.name || '(not found)'}}
         <render-if-feature feature="entityTags">
 

diff --git a/...azon/src/serverGroup/configure/wizard/securityGroups/securityGroupSelector.directive.html b/...azon/src/serverGroup/configure/wizard/securityGroups/securityGroupSelector.directive.html
@@ -22,7 +22,7 @@
 <div class="form-group small" style="margin-top: 20px">
   <div class="col-md-{{vm.hideLabel ? 12 : 9}} col-md-offset-{{vm.hideLabel ? 0 : 3}}">
     <p>
-      <span ng-if="vm.refreshing"><span class="fa fa-refresh fa-spin"></span></span>
+      <span ng-if="vm.refreshing"><span class="fa fa-sync-alt fa-spin"></span></span>
       Security groups
       <span ng-if="!vm.refreshing">last refreshed {{ vm.refreshTime | timestamp }}</span>
       <span ng-if="vm.refreshing"> refreshing...</span>

diff --git a/app/scripts/modules/appengine/instance/details/details.html b/app/scripts/modules/appengine/instance/details/details.html
@@ -18,9 +18,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-hdd {{ctrl.instance.healthState}}"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.instance ? ctrl.instance.name : ctrl.instanceIdNotFound}}
       </h3>
     </div>

diff --git a/app/scripts/modules/appengine/loadBalancer/details/details.html b/app/scripts/modules/appengine/loadBalancer/details/details.html
@@ -18,9 +18,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
-      <span class="icon icon-elb"></span>
-      <h3 select-on-dbl-click>
+    <div class="header-text horizontal middle">
+      <i class="fa fa-sitemap"/>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.loadBalancer.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/appengine/serverGroup/details/details.html b/app/scripts/modules/appengine/serverGroup/details/details.html
@@ -20,9 +20,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <cloud-provider-logo provider="ctrl.serverGroup.type" height="'36px'" width="'36px'"></cloud-provider-logo>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.serverGroup.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/azure/instance/details/instanceDetails.html b/app/scripts/modules/azure/instance/details/instanceDetails.html
@@ -18,9 +18,9 @@ <h4 class="text-center">
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-hdd {{instance.healthState}}"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{instance ? instance.instanceId : instanceIdNotFound}}
       </h3>
     </div>

diff --git a/app/scripts/modules/azure/loadBalancer/details/loadBalancerDetail.html b/app/scripts/modules/azure/loadBalancer/details/loadBalancerDetail.html
@@ -19,9 +19,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
-      <span class="icon icon-elb"></span>
-      <h3 select-on-dbl-click>
+    <div class="header-text horizontal middle">
+      <i class="fa fa-sitemap"/>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{loadBalancer.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/azure/securityGroup/details/securityGroupDetail.html b/app/scripts/modules/azure/securityGroup/details/securityGroupDetail.html
@@ -9,9 +9,9 @@
     <div ng-if="state.loading" class="horizontal center middle">
       <loading-spinner size="'small'"></loading-spinner>
     </div>
-    <div class="header-text" ng-if="!state.loading">
+    <div class="header-text horizontal middle" ng-if="!state.loading">
       <span class="glyphicon glyphicon-transfer"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{securityGroup.name || '(not found)'}}
       </h3>
     </div>

diff --git a/...erverGroup/configure/wizard/loadBalancers/serverGroupLoadBalancersSelector.directive.html b/...erverGroup/configure/wizard/loadBalancers/serverGroupLoadBalancersSelector.directive.html
@@ -14,7 +14,7 @@ <h5 class="text-center" ng-if="!command.viewState.loadBalancersConfigured">Pleas
   <div class="form-group small" style="margin-top: 20px">
     <div class="col-md-9 col-md-offset-3">
       <p>
-        <span ng-if="refreshing"><span class="fa fa-refresh fa-spin"></span></span>
+        <span ng-if="refreshing"><span class="fa fa-sync-alt fa-spin"></span></span>
         Load balancers
         <span ng-if="!refreshing">last refreshed {{ getLoadBalancerRefreshTime() | timestamp }}</span>
         <span ng-if="refreshing"> refreshing...</span>

diff --git a/...rverGroup/configure/wizard/securityGroup/serverGroupSecurityGroupsSelector.directive.html b/...rverGroup/configure/wizard/securityGroup/serverGroupSecurityGroupsSelector.directive.html
@@ -15,7 +15,7 @@ <h5 class="text-center" ng-if="!command.viewState.securityGroupsConfigured">Plea
   <div class="form-group small" style="margin-top: 20px">
     <div class="col-md-9 col-md-offset-3">
       <p>
-        <span ng-if="refreshing"><span class="fa fa-refresh fa-spin"></span></span>
+        <span ng-if="refreshing"><span class="fa fa-sync-alt fa-spin"></span></span>
         Security groups
         <span ng-if="!refreshing">last refreshed {{ getSecurityGroupRefreshTime() | timestamp }}</span>
         <span ng-if="refreshing"> refreshing...</span>

diff --git a/app/scripts/modules/azure/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/azure/serverGroup/details/serverGroupDetails.html
@@ -21,9 +21,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-th"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{serverGroup.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/cloudfoundry/instance/details/instanceDetails.html b/app/scripts/modules/cloudfoundry/instance/details/instanceDetails.html
@@ -18,9 +18,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-hdd {{instance.healthState}}"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{instance ? instance.instanceId : instanceIdNotFound}}
       </h3>
     </div>

diff --git a/app/scripts/modules/cloudfoundry/loadBalancer/details/loadBalancerDetails.html b/app/scripts/modules/cloudfoundry/loadBalancer/details/loadBalancerDetails.html
@@ -19,9 +19,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
-      <span class="icon icon-elb"></span>
-      <h3 select-on-dbl-click>
+    <div class="header-text horizontal middle">
+      <i class="fa fa-sitemap"/>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{loadBalancer.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/cloudfoundry/securityGroup/details/securityGroupDetails.html b/app/scripts/modules/cloudfoundry/securityGroup/details/securityGroupDetails.html
@@ -9,9 +9,9 @@
     <div ng-if="state.loading" class="horizontal center middle">
       <loading-spinner size="'small'"></loading-spinner>
     </div>
-    <div class="header-text" ng-if="!state.loading">
+    <div class="header-text horizontal middle" ng-if="!state.loading">
       <span class="glyphicon glyphicon-transfer"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{securityGroup.name || '(not found)'}}
       </h3>
     </div>

diff --git a/app/scripts/modules/cloudfoundry/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/cloudfoundry/serverGroup/details/serverGroupDetails.html
@@ -21,9 +21,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <div class="header-text">
+    <div class="header-text horizontal middle">
       <span class="glyphicon glyphicon-th"></span>
-      <h3 select-on-dbl-click>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{serverGroup.name}}
       </h3>
     </div>

diff --git a/app/scripts/modules/core/src/application/ApplicationIcon.tsx b/app/scripts/modules/core/src/application/ApplicationIcon.tsx
@@ -11,6 +11,6 @@ export interface IApplicationIconProps extends IOverridableProps {
 @Overridable('applicationIcon')
 export class ApplicationIcon extends React.Component<IApplicationIconProps> {
   public render() {
-    return <i className="fa fa-window-maximize"/>;
+    return <i className="far fa-window-maximize"/>;
   }
 }
diff --git a/app/scripts/modules/core/src/application/config/applicationCacheManagement.directive.html b/app/scripts/modules/core/src/application/config/applicationCacheManagement.directive.html
@@ -14,7 +14,7 @@
   <div class="col-md-1 text-center">
     <a href ng-click="vm.refreshCache('instanceTypes')">
           <span ng-class="{'fa-spin':vm.clearingCache['instanceTypes']}"
-                class="fa fa-refresh"></span>
+                class="fa fa-sync-alt"></span>
     </a>
   </div>
 </div>
@@ -24,7 +24,7 @@
   <div class="col-md-1 text-center">
     <a href ng-click="vm.refreshCache('loadBalancers')">
           <span ng-class="{'fa-spin':vm.clearingCache['loadBalancers']}"
-                class="fa fa-refresh"></span>
+                class="fa fa-sync-alt"></span>
     </a>
   </div>
 </div>
@@ -34,7 +34,7 @@
   <div class="col-md-1 text-center">
     <a href ng-click="vm.refreshCache('securityGroups')">
           <span ng-class="{'fa-spin':vm.clearingCache['securityGroups']}"
-                class="fa fa-refresh"></span>
+                class="fa fa-sync-alt"></span>
     </a>
   </div>
 </div>
@@ -44,7 +44,7 @@
   <div class="col-md-1 text-center">
     <a href ng-click="vm.refreshCache('subnets')">
           <span ng-class="{'fa-spin':vm.clearingCache['subnets']}"
-                class="fa fa-refresh"></span>
+                class="fa fa-sync-alt"></span>
     </a>
   </div>
 </div>
@@ -54,17 +54,17 @@
   <div class="col-md-1 text-center">
     <a href ng-click="vm.refreshCache('networks')">
           <span ng-class="{'fa-spin':vm.clearingCache['networks']}"
-                class="fa fa-refresh"></span>
+                class="fa fa-sync-alt"></span>
     </a>
   </div>
 </div>
 <div class="row" style="margin-top:20px">
   <div class="col-md-10">
     <button class="btn btn-link" ng-if="!vm.clearingCaches" ng-click="vm.refreshCaches()"><span
-        class="fa fa-refresh"></span>
+        class="fa fa-sync-alt"></span>
       Refresh all caches
     </button>
-    <button disabled class="btn btn-link" ng-if="vm.clearingCaches"><span class="fa fa-refresh fa-spin"></span>
+    <button disabled class="btn btn-link" ng-if="vm.clearingCaches"><span class="fa fa-sync-alt fa-spin"></span>
       Refreshing caches...</button>
   </div>
 </div>
diff --git a/app/scripts/modules/core/src/cluster/rollups.less b/app/scripts/modules/core/src/cluster/rollups.less
@@ -309,9 +309,9 @@ running-tasks-tag {
   .icon {
     width: 30px;
   }
-  .icon-elb {
-    height: 0;
-    width: 0;
+  .fa-sitemap {
+    height: 14px;
+    width: 18px;
   }
   .badge-counter {
     color: var(--color-text-link);

diff --git a/app/scripts/modules/core/src/core.module.ts b/app/scripts/modules/core/src/core.module.ts
@@ -5,7 +5,9 @@ import 'jquery-ui';
 // Must come after jquery-ui - we want the bootstrap tooltip, JavaScript is fun
 import 'bootstrap/dist/js/bootstrap.js';
 
-import 'font-awesome/css/font-awesome.css';
+import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css';
+import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css';
+import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css';
 import 'react-select/dist/react-select.css';
 import 'react-virtualized/styles.css'
 import 'react-virtualized-select/styles.css'

diff --git a/app/scripts/modules/core/src/insight/InsightMenu.tsx b/app/scripts/modules/core/src/insight/InsightMenu.tsx
@@ -87,7 +87,7 @@ export class InsightMenu extends React.Component<IInsightMenuProps, IInsightMenu
   public render() {
     const { createApp, createProject, refreshCaches } = this.props;
     const refreshMarkup = this.state.refreshingCache ?
-      <span><span className="fa fa-refresh fa-spin"/> Refreshing...</span> :
+      <span><span className="fa fa-sync-alt fa-spin"/> Refreshing...</span> :
       <span>Refresh all caches</span>;
 
     return (

diff --git a/app/scripts/modules/core/src/instance/instanceSearchResultType.tsx b/app/scripts/modules/core/src/instance/instanceSearchResultType.tsx
@@ -22,7 +22,7 @@ class InstancesSearchResultType extends SearchResultType<IInstanceSearchResult>
   public id = 'instances';
   public order = 4;
   public displayName = 'Instances';
-  public iconClass = 'fa fa-hdd-o';
+  public iconClass = 'fa fa-hdd';
 
   private cols: { [key: string]: ISearchColumn } = {
     INSTANCE: { key: 'instanceId', label: 'Instance ID' },

diff --git a/app/scripts/modules/core/src/loadBalancer/LoadBalancer.tsx b/app/scripts/modules/core/src/loadBalancer/LoadBalancer.tsx
@@ -44,7 +44,7 @@ export class LoadBalancer extends React.Component<ILoadBalancerProps> {
           <UISrefActive class="active">
             <UISref to=".loadBalancerDetails" params={params}>
               <h6 className="clickable clickable-row horizontal middle">
-                <span className="icon icon-elb"/>&nbsp; {(loadBalancer.region || '').toUpperCase()}
+                <i className="fa fa-sitemap"/>&nbsp; {(loadBalancer.region || '').toUpperCase()}
                 <div className="flex-1">
                   <EntityNotifications
                     entity={loadBalancer}