Replace font awesome with fork awesome (#114)

* added fork-awesome-icon
* removed fontAwesome
* changed FontAwesomeIcon to ForkAwesomeIcon

Signed-off-by: Philip Molares <philip.molares@udo.edu>

src/components/landing/pages/history/common/close-button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './close-button.scss'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface CloseButtonProps {
   isDark: boolean;
@@ -10,7 +10,7 @@ export interface CloseButtonProps {
 const CloseButton: React.FC<CloseButtonProps> = ({ isDark }) => {
   return (
     <Button variant={isDark ? 'secondary' : 'light'}>
-      <FontAwesomeIcon
+      <ForkAwesomeIcon
         className="history-close"
         icon="times"
       />

src/components/landing/pages/history/common/pin-button.tsx

@@ -1,7 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import './pin-button.scss'
 import { Button } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface PinButtonProps {
   isPinned: boolean;
@@ -13,8 +13,8 @@ export const PinButton: React.FC<PinButtonProps> = ({ isPinned, onPinClick, isDa
   return (
     <Button variant={isDark ? 'secondary' : 'light'}
       onClick={onPinClick}>
-      <FontAwesomeIcon
-        icon="thumbtack"
+      <ForkAwesomeIcon
+        icon="thumb-tack"
         className={`history-pin ${isPinned ? 'active' : ''}`}
       />
     </Button>

src/components/landing/pages/history/history-card/history-card.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Badge, Card } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { PinButton } from '../common/pin-button'
 import { CloseButton } from '../common/close-button'
 import moment from 'moment'
@@ -20,7 +20,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick })
         </div>
         <Card.Body>
           <div className="text-black-50">
-            <FontAwesomeIcon icon="clock"/> {moment(entry.lastVisited).fromNow()}<br/>
+            <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
             {formatHistoryDate(entry.lastVisited)}
             <div>
               {

src/components/landing/pages/history/history-toolbar/clear-history-button.tsx

@@ -1,7 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useState, Fragment } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export interface ClearHistoryButtonProps {
   onClearHistory: () => void
@@ -17,7 +17,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
   return (
     <Fragment>
       <Button variant={'light'} title={t('landing.history.toolbar.clear')} onClick={handleShow}>
-        <FontAwesomeIcon icon={'trash'}/>
+        <ForkAwesomeIcon icon={'trash'}/>
       </Button>
       <Modal show={show} onHide={handleClose} animation={true} className="text-dark">
         <Modal.Header closeButton>
@@ -26,7 +26,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="text-dark">
-            <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
+          <h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
           <h6><Trans i18nKey={'landing.history.modal.clearHistory.disclaimer'}/></h6>
         </Modal.Body>
         <Modal.Footer>

src/components/landing/pages/history/history-toolbar/history-toolbar.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { Button, Form, FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { SortButton, SortModeEnum } from '../../../../sort-button/sort-button'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import './typeahead-hacks.scss'
 import { ClearHistoryButton } from './clear-history-button'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 
 export type HistoryToolbarChange = (settings: HistoryToolbarState) => void;
 
@@ -95,12 +95,12 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.export')}>
-          <FontAwesomeIcon icon={'download'}/>
+          <ForkAwesomeIcon icon='download'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.import')}>
-          <FontAwesomeIcon icon={'upload'}/>
+          <ForkAwesomeIcon icon='upload'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
@@ -108,7 +108,7 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>
         <Button variant={'light'} title={t('landing.history.toolbar.refresh')}>
-          <FontAwesomeIcon icon={'sync'}/>
+          <ForkAwesomeIcon icon='refresh'/>
         </Button>
       </InputGroup>
       <InputGroup className={'mr-1 mb-1'}>

src/components/landing/pages/intro/feature-links.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { Col, Row } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 
 export const FeatureLinks: React.FC = () => {
   useTranslation()
@@ -10,7 +10,7 @@ export const FeatureLinks: React.FC = () => {
     <Row className="mb-5">
       <Col md={4}>
         <Link to={'/features#Share-Notes'} className="text-light">
-          <FontAwesomeIcon icon="bolt" size="3x"/>
+          <ForkAwesomeIcon icon="bolt" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.collaboration"/>
           </h5>
@@ -18,7 +18,7 @@ export const FeatureLinks: React.FC = () => {
       </Col>
       <Col md={4}>
         <Link to={'/features#MathJax'} className="text-light">
-          <FontAwesomeIcon icon="chart-bar" size="3x"/>
+          <ForkAwesomeIcon icon="bar-chart" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.mathJax"/>
           </h5>
@@ -26,7 +26,7 @@ export const FeatureLinks: React.FC = () => {
       </Col>
       <Col md={4}>
         <Link to={'/features#Slide-Mode'} className="text-light">
-          <FontAwesomeIcon icon="tv" size="3x"/>
+          <ForkAwesomeIcon icon="television" size="3x"/>
           <h5>
             <Trans i18nKey="landing.intro.features.slides"/>
           </h5>

src/components/landing/pages/intro/intro.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
 import screenshot from './img/screenshot.png'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Trans, useTranslation } from 'react-i18next'
 import { FeatureLinks } from './feature-links'
 import { CoverButtons } from './cover-buttons/cover-buttons'
@@ -11,7 +11,7 @@ const Intro: React.FC = () => {
   return (
     <div>
       <h1>
-        <FontAwesomeIcon icon="file-alt"/> CodiMD
+        <ForkAwesomeIcon icon="file-text"/> CodiMD
       </h1>
       <p className="lead mb-5">
         <Trans i18nKey="app.slogan"/>
@@ -19,7 +19,7 @@ const Intro: React.FC = () => {
 
       <CoverButtons/>
 
-      <img alt={t("landing.intro.screenShotAltText")} src={screenshot} className="img-fluid mb-5"/>
+      <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
       <FeatureLinks/>
     </div>
   )

src/components/landing/pages/login/auth/social-link-button/social-link-button.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './social-link-button.scss'
-import { IconProp } from '../../../../../../utils/iconProp'
+import { ForkAwesomeIcon, IconName } from '../../../../../../fork-awesome/fork-awesome-icon'
 
 export interface SocialButtonProps {
   backgroundClass: string,
   href: string
-  icon: IconProp
+  icon: IconName
   title?: string
 }
 
@@ -15,7 +14,7 @@ export const SocialLinkButton: React.FC<SocialButtonProps> = ({ title, backgroun
     <a href={href} title={title}
       className={'btn social-link-button p-0 d-inline-flex align-items-stretch ' + backgroundClass}>
       <span className="icon-part d-flex align-items-center">
-        <FontAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
+        <ForkAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
       </span>
       <span className="text-part d-flex align-items-center mx-auto">
         {children}

src/components/landing/pages/login/auth/via-one-click.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconProp } from '../../../../../utils/iconProp'
+import { IconName } from '../../../../../fork-awesome/fork-awesome-icon'
 import { SocialLinkButton } from './social-link-button/social-link-button'
 
 export enum OneClickType {
@@ -15,7 +15,7 @@ export enum OneClickType {
 
 type OneClick2Map = (oneClickType: OneClickType) => {
   name: string,
-  icon: IconProp,
+  icon: IconName,
   className: string,
   url: string
 };
@@ -29,35 +29,35 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
     case OneClickType.DROPBOX:
       return {
         name: 'Dropbox',
-        icon: ['fab', 'dropbox'],
+        icon: 'dropbox',
         className: 'btn-social-dropbox',
         url: buildBackendAuthUrl('dropbox')
       }
     case OneClickType.FACEBOOK:
       return {
         name: 'Facebook',
-        icon: ['fab', 'facebook'],
+        icon: 'facebook',
         className: 'btn-social-facebook',
         url: buildBackendAuthUrl('facebook')
       }
     case OneClickType.GITHUB:
       return {
         name: 'GitHub',
-        icon: ['fab', 'github'],
+        icon: 'github',
         className: 'btn-social-github',
         url: buildBackendAuthUrl('github')
       }
     case OneClickType.GITLAB:
       return {
         name: 'GitLab',
-        icon: ['fab', 'gitlab'],
+        icon: 'gitlab',
         className: 'btn-social-gitlab',
         url: buildBackendAuthUrl('gitlab')
       }
     case OneClickType.GOOGLE:
       return {
         name: 'Google',
-        icon: ['fab', 'google'],
+        icon: 'google',
         className: 'btn-social-google',
         url: buildBackendAuthUrl('google')
       }
@@ -78,7 +78,7 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
     case OneClickType.TWITTER:
       return {
         name: 'Twitter',
-        icon: ['fab', 'twitter'],
+        icon: 'twitter',
         className: 'btn-social-twitter',
         url: buildBackendAuthUrl('twitter')
       }

src/components/landing/pages/profile/settings/profile-account-management.tsx

@@ -1,8 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { Button, Card, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { deleteUser } from '../../../../../api/user'
+import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { clearUser } from '../../../../../redux/user/methods'
 import { getBackendUrl } from '../../../../../utils/apiUtils'
 
@@ -58,11 +58,11 @@ export const ProfileAccountManagement: React.FC = () => {
         <Card.Body>
           <Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
           <Button variant="secondary" block href={getBackendUrl() + '/me/export'} className="mb-2">
-            <FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="profile.exportUserData"/>
           </Button>
           <Button variant="danger" block onClick={handleModalOpen}>
-            <FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
+            <ForkAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
             <Trans i18nKey="profile.deleteUser"/>
           </Button>
         </Card.Body>