Upgraded font awesome icon version and bug fixes

package.json

@@ -30,6 +30,9 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/runtime": "7.20.1",
+    "@fortawesome/fontawesome-svg-core": "6.2.1",
+    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "babel": "6.23.0",
     "babel-loader": "9.1.0",
     "babel-plugin-transform-class-properties": "6.24.1",

src/app.js

@@ -5,7 +5,6 @@ import { render } from 'react-dom';
 import configureStore from './store';
 import { Provider } from 'react-redux';
 import ApplicationContainer from './containers/app/app-container';
-require('../node_modules/font-awesome/css/font-awesome.css');
 
 
 const store = configureStore();

src/components/decisions/decision-details.js

@@ -6,6 +6,8 @@ import 'font-awesome/css/font-awesome.min.css';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import { transformRuleToTree } from '../../utils/transform';
 import ViewAttribute from '../attributes/view-attributes';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPenToSquare, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 class DecisionDetails extends Component {
 
@@ -127,13 +129,14 @@ class DecisionDetails extends Component {
     }
 
     renderConditions = (conditions, decisionIndex) => {
+
         const transformedData = transformRuleToTree(conditions);
 
         return (<div className="rule-flex-container">
                 { transformedData && transformedData.map((data, caseIndex) => (<div className="decision-box" key={`case - ${caseIndex} - ${decisionIndex}`}>
                     <div className="tool-flex">
-                        <div><a href="" onClick={(e) => this.editCondition(e, data.index)}><span className="fa fa-edit" /></a></div>
-                        <div><a href="" onClick={((e) => this.handleRemoveCondition(e, data.index))}><span className="fa fa-trash-o" /></a></div>
+                        <div><a href="" onClick={(e) => this.editCondition(e, data.index)}><FontAwesomeIcon icon={faPenToSquare} /></a></div>
+                        <div><a href="" onClick={((e) => this.handleRemoveCondition(e, data.index))}><FontAwesomeIcon icon={faTrash} /></a></div>
                     </div>
                     <Tree treeData={data.node} count={data.depthCount}/>
                     { data.event.params && <div className="view-params-container">

src/components/navigation/navigation-link.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { createHashHistory } from 'history';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const NavLinks = (props) => {
     const { links } = props;
@@ -31,6 +32,7 @@ const NavParentLink = ({ link, onConfirm, index, visible }) => {
     <li className={link.linkClass} onClick={(e) => onConfirm(e, index, link.navigate)}>
       <a href="" className={`link ${visible ? 'active': ''}`} >
         <span className={link.iconClass} />
+        {link.fontIcons && <FontAwesomeIcon icon={link.fontIcons} />}
         <span className="text">{link.name}</span>
       </a>
     </li>);

src/components/navigation/navigation-panel.js

@@ -5,10 +5,12 @@ import { createHashHistory } from 'history';
 import FooterLinks from '../footer/footer';
 import footerLinks from '../../data-objects/footer-links.json';
 import AppearanceContext from '../../context/apperance-context';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faSquarePlus, faCloudArrowUp, faSliders } from '@fortawesome/free-solid-svg-icons';
 
-const navmenu = [{ name: 'Create Rules', navigate: './create-ruleset', iconClass: "icon fa fa-plus-square-o", linkClass: 'navmenu'},
-                 { name: 'Upload Rules', navigate: './home', iconClass: "icon fa fa-cloud-upload", linkClass: 'navmenu' },
-                { name: 'Appearance', navigate: './appearance', iconClass: "icon fa fa-sliders", linkClass: 'navmenu'} ];
+const navmenu = [{ name: 'Create Rules', navigate: './create-ruleset', iconClass: "icon", fontIcons: faSquarePlus, linkClass: 'navmenu'},
+                 { name: 'Upload Rules', navigate: './home', iconClass: "icon", fontIcons: faCloudArrowUp, linkClass: 'navmenu' },
+                { name: 'Appearance', navigate: './appearance', iconClass: "icon", fontIcons: faSliders, linkClass: 'navmenu'} ];
 class NavigationPanel extends Component {
 
     constructor(props) {
@@ -44,7 +46,9 @@ class NavigationPanel extends Component {
         return (
             <div className={`nav-container ${closedState ? 'closed': 'open'} ${appctx.background}`}>
                 <div className="menu-bar">
-                       <a href="" onClick={(e) => { e.preventDefault();  this.props.updateState(sideNav)}}> <span className="close-icon fa fa-reorder" ></span></a>
+                       <a href="" onClick={(e) => { e.preventDefault();  this.props.updateState(sideNav)}}> 
+                        <FontAwesomeIcon className="close-icon" icon={faBars}></FontAwesomeIcon>
+                        </a>
                 </div>
                 {!closedState && <div className="links-section">
                     <div>

src/components/title/page-title.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const PageTitle = ({name, titleFlag}) => {
 
@@ -25,7 +26,7 @@ PageTitle.propTypes = {
 export const TitleIcon = ({iconClass}) => {
 
     return (<div className="icon-card">
-        <span className={iconClass} />
+        <FontAwesomeIcon icon={iconClass} />
     </div>);
 };
 

src/containers/app/app-container.js

@@ -22,7 +22,7 @@ class ApplicationContainer extends Component {
             document.body.className = value;
             this.setState({ theme });
         }
-        this.state = {theme: { background: 'md-blue', toggleBackground: this.toggleBackground }};
+        this.state = {theme: { background: 'light', toggleBackground: this.toggleBackground }};
     }
 
     componentDidMount() {

src/containers/home/home-container.js

@@ -12,6 +12,7 @@ import { includes } from 'lodash/collection';
 import Notification from '../../components/notification/notification';
 import { RULE_AVAILABLE_UPLOAD, RULE_UPLOAD_ERROR } from '../../constants/messages';
 import ApperanceContext from '../../context/apperance-context';
+import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons'
 
 
 function readFile(file, cb) {
@@ -137,7 +138,7 @@ class HomeContainer extends Component {
       return <div className="home-container">
         <div className="single-panel-container">
         { (fileExist || uploadError) && <Notification body={message.body} heading={message.heading} type={message.type} /> }
-          <TitlePanel title={title} titleClass="fa fa-cloud-upload">
+          <TitlePanel title={title} titleClass={faCloudArrowUp}>
             <div className="upload-panel">
               <div className={`drop-section ${appctx.background}`} onDrop={this.drop} onDragOver={this.allowDrop}>
                   <div><label htmlFor="uploadFile">Choose Ruleset directory<input id="uploadFile" type="file" onChange={this.chooseDirectory} webkitdirectory="true" multiple/></label> or Drop Files</div>

src/containers/ruleset/create-ruleset-container.js

@@ -9,6 +9,7 @@ import { createHashHistory } from 'history';
 import { addRuleset } from '../../actions/ruleset';
 import Notification from '../../components/notification/notification';
 import { RULE_AVAILABLE_CREATE } from '../../constants/messages';
+import { faSquarePlus } from '@fortawesome/free-solid-svg-icons'
 
 class CreateRulesetContainer extends Component {
 
@@ -43,7 +44,7 @@ class CreateRulesetContainer extends Component {
         return (
             <div className="single-panel-container">
                 { fileExist && <Notification body={message.body} heading={message.heading} type={message.type} /> }
-                <TitlePanel title="Create Rules" titleClass="fa fa-plus-square-o">
+                <TitlePanel title="Create Rules" titleClass={faSquarePlus}>
                     <form>
                         <div className="upload-panel">
                             <InputField label="Name" onChange={this.onChangeName} value={this.state.name} error={this.state.error.name} />

src/sass/components/attributes.scss

@@ -132,6 +132,16 @@ td.attributes-header {
     padding: 10px;
 }
 
+.md-blue {
+    .view-attribute {
+        color: $form-label-color-drk;
+    }
+}
+
+.dark {
+    color: $form-label-color-drk;
+}
+
 .view-params-container {
     width: 40%;
     color: $dark-color;

src/sass/theme/dark.scss

@@ -17,6 +17,10 @@ body.dark
         color: $page-title-color-dark;
     }
 
+    h4 {
+        color: $title-color-drk;
+    }
+
     a {
         color: $form-label-color-drk;
     }

src/sass/theme/light.scss

@@ -16,6 +16,10 @@ body.light {
         color: $page-title-color;
     }
 
+    h4 {
+        color: $form-label-color;
+    }
+
     .tab {
         color: $form-label-color;
 

src/sass/theme/md-blue.scss

@@ -17,6 +17,10 @@ body.md-blue
         color: $page-title-color-dark;
     }
 
+    h4 {
+        color: $form-label-color-drk;
+    }
+
     a {
         color: $form-label-color-drk;
     }

webpack.config.js

@@ -18,28 +18,6 @@ module.exports = (env, arg) => ({
       use: ['babel-loader'],
       exclude: /node_modules/,
     },
-    /* {
-      test: /\.(jpe|jpg)(\?.*$|$)/,
-      loader: 'file-loader',
-      options: {
-        name: '[path][name].[ext]',
-      }
-    },
-    /*{
-      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      use: [{
-        loader: "url-loader",
-        options: {
-          limit: 10000,
-          mimetype: 'application/font-woff',
-          name: '[path][name].[ext]'
-        }
-      }]
-      //  loader: "url-loader?limit=10000&mimetype=application/font-woff",
-      // options: {
-      //   name: '[path][name].[ext]',
-      // }
-    }, */
     {
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: "url-loader",