feat: use react-fontawesome instead of loading all icons from the web

GooBox · Aug 2, 2018 · 23de61b · 23de61b
1 parent 56ac3c4
commit 23de61b
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 25 deletions.
diff --git a/__mocks__/@fortawesome/react-fontawesome.jsx b/__mocks__/@fortawesome/react-fontawesome.jsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2017-2018 Junpei Kawamoto
+ *
+ * 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 3 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, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+
+export const FontAwesomeIcon = () => (
+  <i className="fa"/>
+);
+
+export default FontAwesomeIcon;
diff --git a/__tests__/render/installer/components/sia-wallet.jsx b/__tests__/render/installer/components/sia-wallet.jsx
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {mount} from "enzyme";
 import React from "react";
 import {CopyToClipboard} from "react-copy-to-clipboard";
@@ -58,12 +59,12 @@ describe("SiaWallet component", () => {
 
   it("shows fa-clone icon in copy address button if addressCopied is false", () => {
     wrapper.setState({addressCopied: false});
-    expect(wrapper.find("#copy-address-btn").find(".fa-clone").exists()).toBeTruthy();
+    expect(wrapper.find("#copy-address-btn").find(FontAwesomeIcon).prop("icon")).toEqual(["far", "clone"]);
   });
 
   it("shows fa-check-circle icon in copy address button if addressCopied is true", () => {
     wrapper.setState({addressCopied: true});
-    expect(wrapper.find("#copy-address-btn").find(".fa-check-circle").exists()).toBeTruthy();
+    expect(wrapper.find("#copy-address-btn").find(FontAwesomeIcon).prop("icon")).toEqual(["far", "check-circle"]);
   });
 
   it("copies the given address and set true to addressCopied if the button is clicked", () => {
@@ -76,12 +77,12 @@ describe("SiaWallet component", () => {
 
   it("shows fa-clone icon in copy address button if seedCopied is false", () => {
     wrapper.setState({seedCopied: false});
-    expect(wrapper.find("#copy-seed-btn").find(".fa-clone").exists()).toBeTruthy();
+    expect(wrapper.find("#copy-seed-btn").find(FontAwesomeIcon).prop("icon")).toEqual(["far", "clone"]);
   });
 
   it("shows fa-check-circle icon in copy address button if seedCopied is true", () => {
     wrapper.setState({seedCopied: true});
-    expect(wrapper.find("#copy-seed-btn").find(".fa-check-circle").exists()).toBeTruthy();
+    expect(wrapper.find("#copy-seed-btn").find(FontAwesomeIcon).prop("icon")).toEqual(["far", "check-circle"]);
   });
 
   it("copies the given seed and set true to seedCopied if the button is clicked", () => {

diff --git a/__tests__/render/popup/components/footer.jsx b/__tests__/render/popup/components/footer.jsx
@@ -34,13 +34,13 @@ describe("Footer component", () => {
   });
 
   it("has a synchronized icon and text when the state is synchronizing", () => {
-    expect(wrapper.find(".state-icon").hasClass("fa-pause-circle")).toBeTruthy();
+    expect(wrapper.find(".state-icon").prop("icon")).toEqual(["far", "pause-circle"]);
     expect(wrapper.find(".state-text").text()).toEqual("Goobox is up to date.");
   });
 
   it("has a paused icon and text when the state is paused", () => {
     wrapper.setProps({state: Paused});
-    expect(wrapper.find(".state-icon").hasClass("fa-play-circle")).toBeTruthy();
+    expect(wrapper.find(".state-icon").prop("icon")).toEqual(["far", "play-circle"]);
     expect(wrapper.find(".state-text").text()).toEqual("File transfers paused.");
   });
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Goobox",
+  "name": "goobox",
   "version": "0.2.1",
   "description": "Goobox community edition sync app for sia and storj 🎉🚀",
   "main": "index.js",
@@ -53,6 +53,10 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.53",
     "@babel/preset-env": "^7.0.0-beta.53",
     "@babel/preset-react": "^7.0.0-beta.53",
+    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
+    "@fortawesome/free-regular-svg-icons": "^5.1.0-11",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
+    "@fortawesome/react-fontawesome": "0.1.0-11",
     "babel-core": "^7.0.0-0",
     "babel-jest": "^23.4.0",
     "babel-loader": "^8.0.0-beta.0",
@@ -141,4 +145,4 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
     }
   }
-}
+}
diff --git a/src/render/installer/components/sia-wallet.jsx b/src/render/installer/components/sia-wallet.jsx
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
@@ -87,29 +88,29 @@ export class SiaWallet extends React.Component {
     if (this.state.addressCopied) {
       return (
         <div className="text-success">
-          <i className="far fa-check-circle"/>
+          <FontAwesomeIcon icon={["far", "check-circle"]}/>
           <br/>
           copied
         </div>
       );
     }
     return (
-      <i className="far fa-clone text-black-50"/>
+      <FontAwesomeIcon className="text-black-50" icon={["far", "clone"]}/>
     );
   }
 
   _copySeedBtn() {
     if (this.state.seedCopied) {
       return (
         <div className="text-success">
-          <i className="far fa-check-circle"/>
+          <FontAwesomeIcon icon={["far", "check-circle"]}/>
           <br/>
           copied
         </div>
       );
     }
     return (
-      <i className="far fa-clone text-black-50"/>
+      <FontAwesomeIcon className="text-black-50" icon={["far", "clone"]}/>
     );
   }
 
@@ -126,7 +127,7 @@ export class SiaWallet extends React.Component {
               Please save your &nbsp;
               <span className="font-weight-bold">Sia wallet address</span>&nbsp;
               <Popover>
-                <i className="fas fa-info-circle info-button"/>
+                <FontAwesomeIcon icon="info-circle" className="info-button"/>
                 <span>Send Sia tokens to this address in order to top-up your account.</span>
               </Popover>
             </label>
@@ -145,7 +146,7 @@ export class SiaWallet extends React.Component {
               And your &nbsp;
               <span className="font-weight-bold">Sia seed</span>&nbsp;
               <Popover>
-                <i className="fas fa-info-circle info-button"/>
+                <FontAwesomeIcon icon="info-circle" className="info-button"/>
                 <span>Save your Sia seed somewhere safe.  It is the key to your account.</span>
               </Popover>
             </label>

diff --git a/src/render/installer/components/storj-login.jsx b/src/render/installer/components/storj-login.jsx
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
@@ -117,7 +118,7 @@ export class StorjLogin extends React.Component {
               <label htmlFor="key">
                 Encryption Key&nbsp;
                 <Popover>
-                  <i className="fas fa-info-circle info-button"/>
+                  <FontAwesomeIcon icon="info-circle" className="info-button"/>
                   <span>If you already have a encryption key for Goobox please enter it, otherwise click on "Generate".</span>
                 </Popover>
               </label>

diff --git a/src/render/installer/index.js b/src/render/installer/index.js
@@ -15,10 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {library} from "@fortawesome/fontawesome-svg-core";
+import {faCheckCircle, faClone,} from "@fortawesome/free-regular-svg-icons";
+import {faInfoCircle} from "@fortawesome/free-solid-svg-icons";
 import {webFrame} from "electron";
 import ReactDOM from "react-dom";
 import initInstaller from "./main";
 
+library.add(faCheckCircle, faClone, faInfoCircle);
 webFrame.setVisualZoomLevelLimits(1, 1);
 ReactDOM.render(
   initInstaller(),

diff --git a/src/render/popup/components/footer.jsx b/src/render/popup/components/footer.jsx
@@ -15,13 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import React from "react";
 import {Paused, Synchronizing} from "../../../constants";
 
 const PauseBtn = ({onChangeState}) => (
   <a className="pause-sync-btn" onClick={() => onChangeState(Paused)}>
-    <i className="state-icon far fa-pause-circle"/>
+    <FontAwesomeIcon className="state-icon" icon={["far", "pause-circle"]}/>
     &nbsp;
     <span className="state-text">Goobox is up to date.</span>
   </a>
@@ -33,7 +34,7 @@ PauseBtn.propTypes = {
 
 const RestartBtn = ({onChangeState}) => (
   <a className="sync-again-btn" onClick={() => onChangeState(Synchronizing)}>
-    <i className="state-icon far fa-play-circle"/>
+    <FontAwesomeIcon className="state-icon" icon={["far", "play-circle"]}/>
     &nbsp;
     <span className="state-text">File transfers paused.</span>
   </a>

diff --git a/src/render/popup/components/header.jsx b/src/render/popup/components/header.jsx
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import React from "react";
 import GooboxImage from "../assets/goobox.svg";
@@ -24,10 +25,10 @@ export const Header = ({onClickSettings, onClickInfo}) => (
   <nav className="d-flex align-items-center px-3 py-2">
     <img className="mr-auto" src={GooboxImage} width={81} height={22}/>
     <a id="info-btn" onClick={() => onClickInfo()}>
-      <i className="fas fa-info-circle"/>
+      <FontAwesomeIcon icon="info-circle"/>
     </a>
     <a id="settings-btn" className="ml-4" onClick={() => onClickSettings()}>
-      <i className="fas fa-cog"/>
+      <FontAwesomeIcon icon="cog"/>
     </a>
   </nav>
 

diff --git a/src/render/popup/components/status.jsx b/src/render/popup/components/status.jsx
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import React from "react";
 import Footer from "./footer";
@@ -29,12 +30,12 @@ export const Status = (props) => (
     <section className="d-flex flex-column p-3">
       <a className="btn btn-light sync-folder d-flex align-items-center mb-3"
          onClick={() => props.onClickSyncFolder()}>
-        <i className="fas fa-folder-open mr-2"/>
+        <FontAwesomeIcon icon="folder-open" className="mr-2"/>
         <span className="bold">Open my folder</span>
       </a>
       <a id="import-drive" className="btn btn-light d-flex align-items-center invisible"
          onClick={() => props.onClickImportDrive()}>
-        <i className="fas fa-cloud-upload-alt mr-2"/>
+        <FontAwesomeIcon icon="cloud-upload-alt" className="mr-2"/>
         <span className="bold">Import drive</span>
       </a>
     </section>

diff --git a/src/render/popup/index.js b/src/render/popup/index.js
@@ -15,10 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {library} from "@fortawesome/fontawesome-svg-core";
+import {faPauseCircle, faPlayCircle} from "@fortawesome/free-regular-svg-icons";
+import {faCloudUploadAlt, faCog, faFolderOpen, faInfoCircle} from "@fortawesome/free-solid-svg-icons";
 import {webFrame} from "electron";
 import ReactDOM from "react-dom";
 import initPopup from "./main";
 
+library.add(faPauseCircle, faPlayCircle, faInfoCircle, faCog, faFolderOpen, faCloudUploadAlt);
 webFrame.setVisualZoomLevelLimits(1, 1);
 ReactDOM.render(
   initPopup(),

diff --git a/static/installer.html b/static/installer.html
@@ -21,8 +21,6 @@
     <title>Goobox installer</title>
     <link href="../lib/installer.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
-          integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
     <script src="../lib/render/installer.js" defer></script>
   </head>
 

diff --git a/static/popup.html b/static/popup.html
@@ -21,8 +21,6 @@
     <title>Goobox</title>
     <link href="../lib/popup.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet"/>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
-          integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
     <script src="../lib/render/popup.js" defer></script>
   </head>
   <body>