diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/projects')
3 files changed, 10 insertions, 6 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js index 96970fd9..0725e42b 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js @@ -2,12 +2,14 @@ import PropTypes from 'prop-types' import React from 'react' import Link from 'next/link' import { Button } from 'reactstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons' const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => ( <td className="text-right"> <Link href={`/projects/${projectId}`}> <Button color="primary" outline size="sm" className="mr-2" title="Open this project"> - <span className="fa fa-play" /> + <FontAwesomeIcon icon={faPlay} /> </Button> </Link> <Button @@ -19,10 +21,10 @@ const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => ( title="View and edit collaborators (not supported currently)" onClick={() => onViewUsers(projectId)} > - <span className="fa fa-users" /> + <FontAwesomeIcon icon={faUsers} /> </Button> <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}> - <span className="fa fa-trash" /> + <FontAwesomeIcon icon={faTrash} /> </Button> </td> ) diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js index cb17b835..dc3f85ec 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js @@ -2,13 +2,15 @@ import PropTypes from 'prop-types' import React from 'react' import { Project } from '../../shapes' import ProjectRow from './ProjectRow' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons' const ProjectList = ({ projects }) => { return ( <div className="vertically-expanding-container"> {projects.length === 0 ? ( <div className="alert alert-info"> - <span className="info-icon fa fa-question-circle mr-2" /> + <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" /> <strong>No projects here yet...</strong> Add some with the 'New Project' button! </div> ) : ( diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js index 9a95b777..91368de8 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js +++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js @@ -1,10 +1,10 @@ -import classNames from 'classnames' import React from 'react' import ProjectActions from '../../containers/projects/ProjectActions' import { Project } from '../../shapes' import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations' import { parseAndFormatDateTime } from '../../util/date-time' import { useAuth } from '../../auth' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const ProjectRow = ({ project }) => { const { user } = useAuth() @@ -14,7 +14,7 @@ const ProjectRow = ({ project }) => { <td className="pt-3">{project.name}</td> <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td> <td className="pt-3"> - <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[level], 'mr-2')} /> + <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" /> {AUTH_DESCRIPTION_MAP[level]} </td> <ProjectActions projectId={project._id} /> |