Merge 9777d01 into f7e54d0

package.json

@@ -39,6 +39,10 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.4.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-brands-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.7",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "babel-runtime": "^6.23.0",
     "bluebird": "^3.5.1",

src/client/components/pages/index.js

@@ -24,11 +24,12 @@ import * as utilsHelper from '../../helpers/utils';
 
 import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';
 
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {isNil as _isNil} from 'lodash';
 
+
 const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row} = bootstrap;
 const {formatDate} = utilsHelper;
 
@@ -79,7 +80,7 @@ class IndexPage extends React.Component {
 													bsStyle="success"
 													type="submit"
 												>
-													<FontAwesome name="search"/>
+													<FontAwesomeIcon icon="search"/>
 												</Button>
 											</span>
 										</div>
@@ -117,42 +118,42 @@ class IndexPage extends React.Component {
 										<h4 className="contact-text">
 											Contact Us
 										</h4>
-										<FontAwesome
+										<FontAwesomeIcon
 											className="margin-sides-1 contact-text"
-											name="circle"
+											icon="circle"
 										/>
 										<a href="//webchat.freenode.net/?channels=#metabrainz">
-											<FontAwesome
+											<FontAwesomeIcon
 												className="contact-text"
-												name="comment"
+												icon="comment"
 												size="2x"
 											/>
 										</a>
-										<FontAwesome
+										<FontAwesomeIcon
 											className="margin-sides-1 contact-text"
-											name="circle"
+											icon="circle"
 										/>
 										<a href="//twitter.com/intent/tweet?screen_name=BookBrainz">
-											<FontAwesome
+											<FontAwesomeIcon
 												className="contact-text"
-												name="twitter"
+												icon={['fab', 'twitter']}
 												size="2x"
 											/>
 										</a>
-										<FontAwesome
+										<FontAwesomeIcon
 											className="margin-sides-1 contact-text"
-											name="circle"
+											icon="circle"
 										/>
 										<a href="mailto:bookbrainz-users@groups.io">
-											<FontAwesome
+											<FontAwesomeIcon
 												className="contact-text"
-												name="envelope"
+												icon="envelope"
 												size="2x"
 											/>
 										</a>
-										<FontAwesome
+										<FontAwesomeIcon
 											className="margin-sides-1 contact-text"
-											name="circle"
+											icon="circle"
 										/>
 									</div>
 								</Col>
@@ -188,7 +189,7 @@ class IndexPage extends React.Component {
 				<hr/>
 				<Row>
 					<Col className="text-center margin-top-4" md={2}>
-						<FontAwesome name="user" size="5x"/>
+						<FontAwesomeIcon icon="user" size="5x"/>
 					</Col>
 					<Col md={10}>
 						<h2>Join Us!</h2>

src/client/containers/layout.js

@@ -25,9 +25,10 @@
 /* eslint import/no-commonjs: "warn" */
 /* eslint global-require: "warn" */
 
+import '../helpers/setupIconLibrary';
 import * as bootstrap from 'react-bootstrap';
 
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import Footer from './../components/footer';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -105,14 +106,14 @@ class Layout extends React.Component {
 		 */
 		const createDropdownTitle = (
 			<span>
-				<FontAwesome name="plus"/>
+				<FontAwesomeIcon icon="plus"/>
 				{'  Add'}
 			</span>
 		);
 
 		const userDropdownTitle = user && (
 			<span>
-				<FontAwesome name="user-circle"/>
+				<FontAwesomeIcon icon="user-circle"/>
 				{`  ${user.name}`}
 			</span>
 		);
@@ -163,32 +164,32 @@ class Layout extends React.Component {
 							onMouseDown={this.handleMouseDown}
 						>
 							<MenuItem href={`/editor/${user.id}`}>
-								<FontAwesome fixedWidth name="info"/>
+								<FontAwesomeIcon fixedWidth icon="info"/>
 								{' Profile'}
 							</MenuItem>
 							<MenuItem {...disableSignUp} href="/logout">
-								<FontAwesome fixedWidth name="sign-out-alt"/>
+								<FontAwesomeIcon fixedWidth icon="sign-out-alt"/>
 								{' Sign Out'}
 							</MenuItem>
 						</NavDropdown>
 					</Nav>
 				) : (
 					<Nav pullRight>
 						<NavItem {...disableSignUp} href="/auth">
-							<FontAwesome name="sign-in-alt"/>
+							<FontAwesomeIcon icon="sign-in-alt"/>
 							{' Sign In / Register'}
 						</NavItem>
 					</Nav>
 				)}
 				<Nav pullRight>
 					<NavItem href="/help">
-						<FontAwesome name="question-circle"/>
+						<FontAwesomeIcon icon="question-circle"/>
 						{' Help '}
 					</NavItem>
 				</Nav>
 				<Nav pullRight>
 					<NavItem href="/statistics">
-						<FontAwesome name="chart-line"/>
+						<FontAwesomeIcon icon="chart-line"/>
 						{' Statistics '}
 					</NavItem>
 				</Nav>
@@ -211,7 +212,7 @@ class Layout extends React.Component {
 										className="btn btn-success"
 										type="submit"
 									>
-										<FontAwesome name="search"/>
+										<FontAwesomeIcon icon="search"/>
 									</button>
 								</span>
 							</div>

src/client/helpers/entity.js

@@ -22,7 +22,7 @@ import * as bootstrap from 'react-bootstrap';
 
 import {get as _get, kebabCase as _kebabCase} from 'lodash';
 import {format, isValid, parseISO} from 'date-fns';
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import React from 'react';
 
 
@@ -108,7 +108,7 @@ export function showEntityEditions(entity) {
 					className="pull-right"
 					href={`/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`}
 				>
-					<FontAwesome name="plus"/>
+					<FontAwesomeIcon icon="plus"/>
 					{'  Add Edition'}
 				</Button>
 			</h2>
@@ -236,14 +236,14 @@ export const ENTITY_TYPE_ICONS = {
 	Work: 'pen-nib'
 };
 
-export function genEntityIconHTMLElement(entityType, size = '', margin = true) {
+export function genEntityIconHTMLElement(entityType, size = '1x', margin = true) {
 	if (!ENTITY_TYPE_ICONS[entityType]) { return null; }
 	return (
-		<FontAwesome
-			ariaLabel={entityType}
+		<FontAwesomeIcon
 			className={margin ? 'margin-right-0-5' : ''}
-			name={ENTITY_TYPE_ICONS[entityType]}
+			icon={ENTITY_TYPE_ICONS[entityType]}
 			size={size}
+			title={entityType}
 		/>);
 }
 

src/client/helpers/setupIconLibrary.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2019  SBVKrishna
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import {config, library} from '@fortawesome/fontawesome-svg-core';
+import {
+	faBook, faCalendarAlt, faChartLine, faCircle, faCircleNotch,
+	faComment, faEnvelope, faExclamationTriangle, faExternalLinkAlt,
+	faGlobe, faHistory, faInfo, faPenNib, faPencilAlt, faPencilRuler,
+	faPlus, faQuestionCircle, faRemoveFormat, faSearch, faSignInAlt,
+	faSignOutAlt, faSlash, faTimes, faTimesCircle, faTrashAlt,
+	faUniversity, faUser, faUserCircle, faWindowRestore
+} from '@fortawesome/free-solid-svg-icons';
+import {fab} from '@fortawesome/free-brands-svg-icons';
+
+
+// Disable FontAwesome's CSS (to prevent FOUC)
+config.autoAddCss = false;
+
+// Add Icons to FontAwesome library
+library.add(
+	fab, faBook, faCalendarAlt, faChartLine, faCircle, faCircleNotch,
+	faComment, faEnvelope, faExclamationTriangle, faExternalLinkAlt,
+	faGlobe, faHistory, faInfo, faPenNib, faPencilAlt, faPencilRuler,
+	faPlus, faQuestionCircle, faRemoveFormat, faSearch, faSignInAlt,
+	faSignOutAlt, faSlash, faTimes, faTimesCircle, faTrashAlt,
+	faUniversity, faUser, faUserCircle, faWindowRestore
+);

src/client/stylesheets/style.less

@@ -191,6 +191,14 @@ body {
 	.picture-fallback-icon(800%);
 }
 
+/**
+ * Styling for FontAwesome icons, to fix random-sized
+ * icons appear while the page is loading (FOUC).
+ */
+.svg-inline--fa{
+	height: 1em;
+}
+
 /* Sticky footer styling */
 html {
 	position: relative;