Merge pull request #350 from prabalsingh24/react-fontawesome-BB373

BB-373, BB-386:  React fontawesome : entity image and final cleanup

package.json

@@ -76,7 +76,6 @@
     "react-chartjs-2": "^2.9.0",
     "react-datepicker": "^2.7.0",
     "react-dom": "^16.2.0",
-    "react-fontawesome": "^1.5.0",
     "react-redux": "^5.0.2",
     "react-select": "^1.1.0",
     "react-sticky": "^6.0.1",

scripts/copy-client-scripts.sh

@@ -1,7 +1,6 @@
 #!/usr/bin/env bash
 
 cp -R node_modules/bootstrap/less/ src/client/stylesheets/bootstrap
-cp -R node_modules/@fortawesome/fontawesome-free/less/ src/client/stylesheets/font-awesome
 cp -R node_modules/react-select/less/ src/client/stylesheets/react-select
 cp -R node_modules/react-virtualized-select/styles.css static/stylesheets/react-virtualized-select.css
 cp -R node_modules/react-virtualized/styles.css static/stylesheets/react-virtualized.css

src/client/components/pages/entities/image.js

@@ -18,7 +18,7 @@
 
 import * as bootstrap from 'react-bootstrap';
 
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -35,38 +35,34 @@ function EntityImage({backupIcon, deleted, imageUrl}) {
 		);
 	}
 
-	let icons;
 	if (deleted) {
-		icons = [
-			<Icon
-				key="entityIcon"
-				name={backupIcon}
-				size="5x"
-				stack="1x"
-			/>,
-			<Icon
-				key="deletedIcon"
-				name="slash"
-				size="5x"
-				stack="1x"
-			/>
-		];
-	}
-	else {
-		icons = (
-			<Icon
-				name={backupIcon}
-				size="5x"
-			/>
-		);
+		return (
+			<div className="entity-display-icon fa-layers fa-fw">
+				<FontAwesomeIcon
+					icon={backupIcon}
+					key="entityIcon"
+					size="5x"
+					stack="1x"
+				/>,
+				<FontAwesomeIcon
+					icon="slash"
+					key="deletedIcon"
+					size="5x"
+					stack="1x"
+				/>
+			</div>);
 	}
 
 	return (
 		<div className="entity-display-icon">
-			{icons}
+			<FontAwesomeIcon
+				icon={backupIcon}
+				size="5x"
+			/>
 		</div>
 	);
 }
+
 EntityImage.displayName = 'EntityImage';
 EntityImage.propTypes = {
 	backupIcon: PropTypes.string.isRequired,

src/client/helpers/setupIconLibrary.js

@@ -27,9 +27,12 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {fab} from '@fortawesome/free-brands-svg-icons';
 
-
 // Disable FontAwesome's CSS (to prevent FOUC)
-config.autoAddCss = false;
+// For this, th build system needs to be able to import the css file below. Currently the build errors.
+// import '@fortawesome/fontawesome-svg-core/styles.css';
+// config.autoAddCss = false;
+
+config.autoAddCss = true;
 
 // Add Icons to FontAwesome library
 library.add(

src/client/stylesheets/style.less

@@ -19,8 +19,6 @@
  */
 
 @import "lobes/less/theme.less";
-@import "font-awesome/fontawesome.less";
-@import "font-awesome/solid.less";
 @import "react-select/select.less";
 
 
@@ -29,8 +27,7 @@ With Webpack and less-loader,
 we should be able to import directly from node_modules directory with '~'.
 The production configuration for webpack needs to be finalized before using this.
 */
-/* @import "~@fortawesome/fontawesome-free/less/fontawesome.less";
-/* @import "~@fortawesome/fontawesome-free/less/solid.less";
+/*
 @import "~react-select/less/select.less";
 @import "~react-virtualized/styles.css";
 @import "~react-virtualized-select/styles.css";
@@ -208,6 +205,22 @@ body {
 	height: 1em;
 	vertical-align: -.125em;
 }
+.fa-layers {
+	display: inline-block;
+	height: 1em;
+	position: relative;
+	text-align: center;
+	vertical-align: -0.125em;
+	min-width: 1em;
+	svg.svg-inline--fa {
+		bottom: 0;
+		left: 0;
+		margin: auto;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
 
 /* Sticky footer styling */
 html {
@@ -321,6 +334,7 @@ html {
 	line-height: initial;
 	margin-top: 5em;
 	margin-bottom: 5em;
+	width: 100%;
 	>:last-child:not(:only-child) {
 		color: @brand-danger;
 	}