fix: remove font awesome library

JordanKnott · Sep 12, 2020 · 03dafe9 · 03dafe9
1 parent 12a7679
commit 03dafe9
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 24 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,14 +6,6 @@
     "@apollo/client": "^3.0.0-rc.8",
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
-    "@fortawesome/free-regular-svg-icons": "^5.12.1",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "@types/axios": "^0.14.0",
     "@types/color": "^3.0.1",
     "@types/date-fns": "^2.6.0",

diff --git a/frontend/src/shared/components/Card/Styles.ts b/frontend/src/shared/components/Card/Styles.ts
@@ -1,9 +1,7 @@
 import styled, { css, keyframes } from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline } from 'shared/icons';
-import { RefObject } from 'react';
+import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
@@ -20,7 +18,9 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
       stroke: rgba(${props.theme.colors.success});
     `}
 `;
-export const ClockIcon = styled(FontAwesomeIcon)``;
+export const ClockIcon = styled(Clock)<{ color: string }>`
+  fill: ${props => props.color};
+`;
 
 export const EditorTextarea = styled(TextareaAutosize)`
   overflow: hidden;

diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
@@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
+import { Pencil, Eye, List } from 'shared/icons';
 import {
   EditorTextarea,
   CardMember,
@@ -155,7 +153,7 @@ const Card = React.forwardRef(
                 }
               }}
             >
-              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
+              <Pencil width={8} height={8} />
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
@@ -218,18 +216,18 @@ const Card = React.forwardRef(
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
+                  <Eye width={8} height={8} />
                 </ListCardBadge>
               )}
               {dueDate && (
                 <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
                   <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                 </DueDateCardBadge>
               )}
               {description && (
                 <DescriptionBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
+                  <List width={8} height={8} />
                 </DescriptionBadge>
               )}
               {checklists && (

diff --git a/frontend/src/shared/components/CardComposer/Styles.ts b/frontend/src/shared/components/CardComposer/Styles.ts
@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 
-export const CancelIcon = styled(FontAwesomeIcon)`
+export const CancelIconWrapper = styled.div`
   opacity: 0.8;
   cursor: pointer;
   font-size: 1.25em;
   padding-left: 5px;
 `;
+
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
   padding-bottom: 8px;
   display: ${props => (props.isOpen ? 'flex' : 'none')};

diff --git a/frontend/src/shared/components/CardComposer/index.tsx b/frontend/src/shared/components/CardComposer/index.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { Cross } from 'shared/icons';
 
 import {
   CardComposerWrapper,
-  CancelIcon,
+  CancelIconWrapper,
   AddCardButton,
   ComposerControls,
   ComposerControlsSaveSection,
@@ -52,7 +52,9 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
           >
             Add Card
           </AddCardButton>
-          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
+          <CancelIconWrapper onClick={() => onClose()}>
+            <Cross width={12} height={12} />
+          </CancelIconWrapper>
         </ComposerControlsSaveSection>
         <ComposerControlsActionsSection />
       </ComposerControls>

diff --git a/frontend/src/shared/icons/Eye.tsx b/frontend/src/shared/icons/Eye.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Eye: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 576 512">
+      <path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" />
+    </Icon>
+  );
+};
+
+export default Eye;
diff --git a/frontend/src/shared/icons/List.tsx b/frontend/src/shared/icons/List.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const List: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
+    </Icon>
+  );
+};
+
+export default List;
diff --git a/frontend/src/shared/icons/index.ts b/frontend/src/shared/icons/index.ts
@@ -1,5 +1,7 @@
 import Cross from './Cross';
 import Cog from './Cog';
+import Eye from './Eye';
+import List from './List';
 import At from './At';
 import Task from './Task';
 import Smile from './Smile';
@@ -85,4 +87,6 @@ export {
   Clone,
   Paperclip,
   Share,
+  Eye,
+  List,
 };