diff --git a/frontend/package.json b/frontend/package.json
index 8d8338c..c5ae181 100644
--- 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
index cb0b937..3905091 100644
--- 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
index 928f198..8fac619 100644
--- 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(
}
}}
>
-
+
)}
@@ -218,18 +216,18 @@ const Card = React.forwardRef(
{watched && (
-
+
)}
{dueDate && (
-
+
{dueDate.formattedDate}
)}
{description && (
-
+
)}
{checklists && (
diff --git a/frontend/src/shared/components/CardComposer/Styles.ts b/frontend/src/shared/components/CardComposer/Styles.ts
index 1dd7cbb..297b877 100644
--- 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
index 5303e2f..074dbbc 100644
--- 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
-
+ onClose()}>
+
+
diff --git a/frontend/src/shared/icons/Eye.tsx b/frontend/src/shared/icons/Eye.tsx
new file mode 100644
index 0000000..1503f4d
--- /dev/null
+++ b/frontend/src/shared/icons/Eye.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Eye: React.FC = ({ width = '16px', height = '16px', className }) => {
+ return (
+
+
+
+ );
+};
+
+export default Eye;
diff --git a/frontend/src/shared/icons/List.tsx b/frontend/src/shared/icons/List.tsx
new file mode 100644
index 0000000..c3ac9eb
--- /dev/null
+++ b/frontend/src/shared/icons/List.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const List: React.FC = ({ width = '16px', height = '16px', className }) => {
+ return (
+
+
+
+ );
+};
+
+export default List;
diff --git a/frontend/src/shared/icons/index.ts b/frontend/src/shared/icons/index.ts
index f89e631..e1b2275 100644
--- 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,
};