Eliminate fortawesome (#2129)

* eliminate fortawesome

* Update github.svg

New line at EOF

* missing fortawesome for dao creator

* fix bad layout of an icon on Safari

package.json

@@ -81,9 +81,6 @@
     "@burner-wallet/burner-connect-provider": "^0.1.1",
     "@daostack/arc.js": "2.0.0-experimental.54",
     "@dorgtech/daocreator-ui-experimental": "1.1.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.10",
-    "@fortawesome/free-brands-svg-icons": "^5.6.1",
-    "@fortawesome/react-fontawesome": "^0.1.3",
     "@portis/web3": "^2.0.0-beta.56",
     "@sentry/browser": "^5.0.8",
     "@toruslabs/torus-embed": "^1.8.1",

src/components/Account/Account.scss

@@ -284,8 +284,11 @@ a.accountName {
 }
 
 .socialButtonAuthenticated {
+  display: flex;
   .icon {
-    color: #76c9de;
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
   }
 }
 

src/components/Account/AccountPopup.tsx

@@ -1,6 +1,5 @@
 import { Address, IDAOState, Member, IMemberState } from "@daostack/arc.js";
 import { getArc } from "arc";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { getProfile } from "actions/profilesActions";
 import AccountImage from "components/Account/AccountImage";
 import AccountProfileName from "components/Account/AccountProfileName";
@@ -80,11 +79,11 @@ class AccountPopup extends React.Component<IProps, null> {
               <span>
                 {profile.socialURLs.twitter ?
                   <a href={"https://twitter.com/" + profile.socialURLs.twitter.username} className={css.socialButton} target="_blank" rel="noopener noreferrer">
-                    <FontAwesomeIcon icon={["fab", "twitter"]} className={css.icon} />
+                    <img src='/assets/images/Icon/social/twitter.svg' className={css.icon} />
                   </a> : ""}
                 {profile.socialURLs.github ?
                   <a href={"https://github.com/" + profile.socialURLs.github.username} className={css.socialButton} target="_blank" rel="noopener noreferrer">
-                    <FontAwesomeIcon icon={["fab", "github"]} className={css.icon} />
+                    <img src='/assets/images/Icon/social/github.svg' className={css.icon} />
                   </a> : ""}
               </span>
             }

src/components/Account/AccountProfilePage.tsx

@@ -1,6 +1,4 @@
 import { IDAOState, IMemberState, DAO, Member } from "@daostack/arc.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import BN = require("bn.js");
 import { getProfile, updateProfile } from "actions/profilesActions";
 import { enableWalletProvider, getArc, getAccountIsEnabled } from "arc";
@@ -282,11 +280,11 @@ class AccountProfilePage extends React.Component<IProps, IState> {
                         }
 
                         <a href={accountProfile.socialURLs.twitter ? "https://twitter.com/" + accountProfile.socialURLs.twitter.username : "https://3box.io/" + accountAddress} className={css.socialButtonAuthenticated} target="_blank" rel="noopener noreferrer">
-                          <FontAwesomeIcon icon={["fab", "twitter"]} className={css.icon} /> {accountProfile.socialURLs.twitter ? "Verified as https://twitter.com/" + accountProfile.socialURLs.twitter.username : "Verify Twitter through 3box"}
+                          <img src='/assets/images/Icon/social/twitter.svg' className={css.icon} /> {accountProfile.socialURLs.twitter ? "Verified as https://twitter.com/" + accountProfile.socialURLs.twitter.username : "Verify Twitter through 3box"}
                         </a>
                         <br/>
                         <a href={accountProfile.socialURLs.github ? "https://github.com/" + accountProfile.socialURLs.github.username : "https://3box.io/" + accountAddress} className={css.socialButtonAuthenticated} target="_blank" rel="noopener noreferrer">
-                          <FontAwesomeIcon icon={["fab", "github"]} className={css.icon} /> {accountProfile.socialURLs.github ? "Verified as https://github.com/" + accountProfile.socialURLs.github.username : "Verify Github through 3box"}
+                          <img src='/assets/images/Icon/social/github.svg' className={css.icon} /> {accountProfile.socialURLs.github ? "Verified as https://github.com/" + accountProfile.socialURLs.github.username : "Verify Github through 3box"}
                         </a>
                       </div>
                     }

src/components/Dao/DaoMember.tsx

@@ -1,6 +1,5 @@
 import BN = require("bn.js");
 import { IDAOState, IMemberState, Member } from "@daostack/arc.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import AccountImage from "components/Account/AccountImage";
 import AccountProfileName from "components/Account/AccountProfileName";
 import Reputation from "components/Account/Reputation";
@@ -67,11 +66,11 @@ class DaoMember extends React.Component<IProps, null> {
                     <span>
                       { profile.socialURLs.twitter ?
                         <span onClick={this.openSocial("https://twitter.com/" + profile.socialURLs.twitter.username)} className={css.socialButton}>
-                          <FontAwesomeIcon icon={["fab", "twitter"]} className={css.icon} />
+                          <img src='/assets/images/Icon/social/twitter.svg' className={css.icon} />
                         </span> : ""}
                       { profile.socialURLs.github ?
                         <span onClick={this.openSocial("https://github.com/" + profile.socialURLs.github.username)} className={css.socialButton}>
-                          <FontAwesomeIcon icon={["fab", "github"]} className={css.icon} />
+                          <img src='/assets/images/Icon/social/github.svg' className={css.icon} />
                         </span> : ""}
                     </span>
                     : ""

src/index.tsx

@@ -1,6 +1,3 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
-import { faTwitter } from "@fortawesome/free-brands-svg-icons/faTwitter";
 import { init as sentryInit } from "@sentry/browser";
 import * as Mixpanel from "mixpanel-browser";
 import * as React from "react";
@@ -13,8 +10,6 @@ import { App } from "./App";
 import "./assets/styles/global.scss";
 
 async function renderApp() {
-  // Add icons we want to use from FontAwesome
-  library.add(faGithub, faTwitter);
 
   if (process.env.NODE_ENV === "production") {
     sentryInit({