ReCodEx · krulis-martin · Apr 15, 2018 · Apr 12, 2018 · Apr 15, 2018 · Apr 15, 2018
diff --git a/package.json b/package.json
@@ -27,6 +27,11 @@
     "format": "./node_modules/prettier/bin/prettier.js --single-quote --write 'src/**/*.js'"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.5",
+    "@fortawesome/fontawesome-free-brands": "^5.0.10",
+    "@fortawesome/fontawesome-free-regular": "^5.0.10",
+    "@fortawesome/fontawesome-free-solid": "^5.0.10",
+    "@fortawesome/react-fontawesome": "^0.0.18",
     "admin-lte": "2.3.11",
     "ajv": "5.5.1",
     "ajv-keywords": "2.1.1",
@@ -65,7 +70,6 @@
     "react-datetime": "^2.8.10",
     "react-dom": "^16.2.0",
     "react-dropzone": "^3.5.3",
-    "react-fontawesome": "1.6.1",
     "react-height": "^3.0.0",
     "react-helmet": "^5.0.3",
     "react-immutable-proptypes": "^2.1.0",

diff --git a/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js b/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { Table } from 'react-bootstrap';
 import {
   FormattedDate,
@@ -45,8 +45,9 @@ const AssignmentDetails = ({
         >
           <td className="text-center">
             <strong>
-              {!isAfterFirstDeadline && <Icon name="hourglass-start" />}
-              {isAfterFirstDeadline && <Icon name="hourglass-end" />}
+              {!isAfterFirstDeadline &&
+                <FontAwesomeIcon icon="hourglass-start" />}
+              {isAfterFirstDeadline && <FontAwesomeIcon icon="hourglass-end" />}
             </strong>
           </td>
           <td>
@@ -71,8 +72,10 @@ const AssignmentDetails = ({
           >
             <td className="text-center">
               <strong>
-                {!isAfterSecondDeadline && <Icon name="hourglass-half" />}
-                {isAfterSecondDeadline && <Icon name="hourglass-end" />}
+                {!isAfterSecondDeadline &&
+                  <FontAwesomeIcon icon="hourglass-half" />}
+                {isAfterSecondDeadline &&
+                  <FontAwesomeIcon icon="hourglass-end" />}
               </strong>
             </td>
             <td>
@@ -93,7 +96,7 @@ const AssignmentDetails = ({
           </tr>}
         <tr>
           <td className="text-center">
-            <Icon name="cloud-upload" />
+            <FontAwesomeIcon icon="cloud-upload-alt" />
           </td>
           <td>
             <FormattedMessage
@@ -111,7 +114,7 @@ const AssignmentDetails = ({
         </tr>
         <tr>
           <td className="text-center">
-            <Icon name="ban" />
+            <FontAwesomeIcon icon="ban" />
           </td>
           <td>
             <FormattedMessage
@@ -125,7 +128,7 @@ const AssignmentDetails = ({
         </tr>
         <tr>
           <td className="text-center">
-            <Icon name="coffee" />
+            <FontAwesomeIcon icon="coffee" />
           </td>
           <td>
             <FormattedMessage
@@ -139,7 +142,7 @@ const AssignmentDetails = ({
         </tr>
         <tr>
           <td className="text-center">
-            <Icon name="unlock-alt" />
+            <FontAwesomeIcon icon="unlock-alt" />
           </td>
           <td>
             <FormattedMessage
@@ -154,7 +157,7 @@ const AssignmentDetails = ({
         {isBonus &&
           <tr>
             <td className="text-center">
-              <Icon name="plus-circle" />
+              <FontAwesomeIcon icon="plus-circle" />
             </td>
             <td>
               <FormattedMessage
@@ -168,7 +171,7 @@ const AssignmentDetails = ({
           </tr>}
         <tr>
           <td className="text-center">
-            <Icon name="percent" />
+            <FontAwesomeIcon icon="percent" />
           </td>
           <td>
             <FormattedMessage
@@ -182,7 +185,7 @@ const AssignmentDetails = ({
         </tr>
         <tr>
           <td className="text-center">
-            <Icon name="code" />
+            <FontAwesomeIcon icon="code" />
           </td>
           <td>
             <FormattedMessage

diff --git a/src/components/Assignments/Assignment/AssignmentStatusIcon/AssignmentStatusIcon.js b/src/components/Assignments/Assignment/AssignmentStatusIcon/AssignmentStatusIcon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import Status from './Status';
 
 const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
@@ -11,7 +11,12 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
         <Status
           id={id}
           accepted={accepted}
-          icon={<Icon name="thumbs-o-up" className="text-green" />}
+          icon={
+            <FontAwesomeIcon
+              icon={['far', 'thumbs-up']}
+              className="text-green"
+            />
+          }
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.ok"
@@ -25,7 +30,7 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
       return (
         <Status
           id={id}
-          icon={<Icon name="cogs" className="text-yellow" />}
+          icon={<FontAwesomeIcon icon="cogs" className="text-yellow" />}
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.inProgress"
@@ -40,7 +45,12 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
         <Status
           id={id}
           accepted={accepted}
-          icon={<Icon name="thumbs-o-down" className="text-red" />}
+          icon={
+            <FontAwesomeIcon
+              icon={['far', 'thumbs-down']}
+              className="text-red"
+            />
+          }
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.failed"
@@ -54,7 +64,12 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
       return (
         <Status
           id={id}
-          icon={<Icon name="exclamation-triangle" className="text-yellow" />}
+          icon={
+            <FontAwesomeIcon
+              icon="exclamation-triangle"
+              className="text-yellow"
+            />
+          }
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.evaluationFailed"
@@ -68,7 +83,9 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
       return (
         <Status
           id={id}
-          icon={<Icon name="exclamation-triangle" className="text-red" />}
+          icon={
+            <FontAwesomeIcon icon="exclamation-triangle" className="text-red" />
+          }
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.solutionMissingSubmission"
@@ -82,7 +99,7 @@ const AssignmentStatusIcon = ({ id, status, accepted = false }) => {
       return (
         <Status
           id={id}
-          icon={<Icon name="code" className="text-gray" />}
+          icon={<FontAwesomeIcon icon="code" className="text-gray" />}
           message={
             <FormattedMessage
               id="app.assignemntStatusIcon.none"

diff --git a/src/components/Assignments/Assignment/AssignmentStatusIcon/Status.js b/src/components/Assignments/Assignment/AssignmentStatusIcon/Status.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { FormattedMessage } from 'react-intl';
 
-const Status = ({ id, message, icon, accepted = false }) => (
+const Status = ({ id, message, icon, accepted = false }) =>
   <span>
     {!accepted &&
       <OverlayTrigger
@@ -32,10 +32,9 @@ const Status = ({ id, message, icon, accepted = false }) => (
           </Tooltip>
         }
       >
-        <Icon name="check-circle" className="text-green" />
+        <FontAwesomeIcon icon="check-circle" className="text-green" />
       </OverlayTrigger>}
-  </span>
-);
+  </span>;
 
 Status.propTypes = {
   id: PropTypes.string.isRequired,

diff --git a/src/components/Assignments/EvaluationProgress/EvaluationProgress.js b/src/components/Assignments/EvaluationProgress/EvaluationProgress.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { Modal, ProgressBar, Table } from 'react-bootstrap';
 import Button from '../../widgets/FlatButton';
@@ -78,8 +78,8 @@ class EvaluationProgress extends Component {
                         })}
                       >
                         <strong>
-                          <Icon
-                            name={
+                          <FontAwesomeIcon
+                            icon={
                               wasSuccessful ? 'check-circle' : 'times-circle'
                             }
                           />

diff --git a/src/components/Assignments/SubmissionsTable/CommentsIcon.js b/src/components/Assignments/SubmissionsTable/CommentsIcon.js
@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 
 const createIcon = commentsStats => {
   if (commentsStats.authoredCount === 0) {
-    return <Icon name="comment-o" />;
+    return <FontAwesomeIcon icon={['far', 'comment']} />;
   }
   if (commentsStats.authoredCount === commentsStats.count) {
-    return <Icon name="comment" flip="horizontal" />;
+    return <FontAwesomeIcon icon={['far', 'comment']} flip="horizontal" />;
   }
-  return <Icon name="comments-o" />;
+  return <FontAwesomeIcon icon={['far', 'comments']} />;
 };
 
 const CommentsIcon = ({ id, commentsStats = null }) =>

diff --git a/src/components/Assignments/SubmitSolutionButton/SubmitSolutionButton.js b/src/components/Assignments/SubmitSolutionButton/SubmitSolutionButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import Button from '../../widgets/FlatButton';
 import { FormattedMessage } from 'react-intl';
 
@@ -11,7 +11,7 @@ const SubmitSolutionButton = ({ disabled = false, onClick }) =>
     disabled={disabled}
     onClick={onClick}
   >
-    <Icon name="bug" />{' '}
+    <FontAwesomeIcon icon="bug" />{' '}
     <FormattedMessage
       id="app.submissionsTable.submitNewSolution"
       defaultMessage="Submit New Solution"

diff --git a/src/components/Exercises/DifficultyIcon/DifficultyIcon.js b/src/components/Exercises/DifficultyIcon/DifficultyIcon.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 
 const DifficultyIcon = ({ difficulty }) => {
   switch (difficulty) {
     case 'easy':
       return (
         <span className="text-success">
-          <Icon name="smile-o" />
-          {' '}
+          <FontAwesomeIcon icon={['far', 'smile']} />{' '}
           <FormattedMessage
             id="app.exercises.difficultyIcon.easy"
             defaultMessage="Easy"
@@ -21,8 +20,7 @@ const DifficultyIcon = ({ difficulty }) => {
     case 'moderate':
       return (
         <span className="text-warning">
-          <Icon name="meh-o" />
-          {' '}
+          <FontAwesomeIcon icon={['far', 'meh']} />{' '}
           <FormattedMessage
             id="app.exercises.difficultyIcon.medium"
             defaultMessage="Medium"
@@ -33,8 +31,7 @@ const DifficultyIcon = ({ difficulty }) => {
     case 'hard':
       return (
         <span className="text-danger">
-          <Icon name="frown-o" />
-          {' '}
+          <FontAwesomeIcon icon={['far', 'frown']} />{' '}
           <FormattedMessage
             id="app.exercises.difficultyIcon.hard"
             defaultMessage="Hard"

diff --git a/src/components/Exercises/ExercisesListItem/ExercisesListItem.js b/src/components/Exercises/ExercisesListItem/ExercisesListItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import DifficultyIcon from '../DifficultyIcon';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
@@ -29,7 +29,7 @@ const ExercisesListItem = ({
 }) =>
   <tr>
     <td className="text-center">
-      <Icon name="code" />
+      <FontAwesomeIcon icon="code" />
     </td>
     <td>
       <ExercisePrefixIcons id={id} isLocked={isLocked} isBroken={isBroken} />

diff --git a/src/components/Exercises/FilesTable/FilesTable.js b/src/components/Exercises/FilesTable/FilesTable.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, FormattedMessage } from 'react-intl';
 
-import Icon from 'react-fontawesome';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { Table } from 'react-bootstrap';
 import Button from '../../widgets/FlatButton';
 import Box from '../../widgets/Box';
@@ -82,7 +82,7 @@ const FilesTable = ({
               </Table>}
             {attachments.length === 0 &&
               <p className="text-center">
-                <Icon name="folder-open-o" />{' '}
+                <FontAwesomeIcon icon={['far', 'folder-open']} />{' '}
                 <FormattedMessage
                   id="app.filesTable.empty"
                   defaultMessage="There are no uploaded files yet."