Merge pull request #43 from vinzdeveloper/custom-style

Adding dark themes to json rule editor

Author: vinzdeveloper

.DS_Store

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import ApperanceContext from '../../context/apperance-context';
 
 const ButtonGroup = ({ buttons, onConfirm }) => {
+    const { background } = useContext(ApperanceContext);
 
-    return (<div className="btn-group-container">
+    return (<div className={`btn-group-container ${background}`}>
         {buttons.length > 0 && buttons.map(button => 
         <div key={button.label} className={`btn-grp`}>
             <button onClick={() => onConfirm(button.label)} type="button" className={button.active ? 'active': undefined}

assets/.DS_Store

@@ -14,7 +14,7 @@ import { transformTreeToRule } from '../../utils/transform';
 import { sortBy } from 'lodash/collection';
 import { validateAttribute } from '../../validations/decision-validation';
 import { PLACEHOLDER } from '../../constants/data-types';
-
+import ApperanceContext from '../../context/apperance-context';
 
 
 const nodeStyle ={
@@ -285,13 +285,14 @@ class AddDecision extends Component {
         const attributeOptions = attributes.map(attr => attr.name);
         const attribute = addAttribute.name && attributes.find(attr => attr.name === addAttribute.name);
         const operatorOptions = attribute && operator[attribute.type];
+        const { background } = this.context;
 
         const placeholder = addAttribute.operator === 'contains' || addAttribute.operator === 'doesNotContain' ?
          PLACEHOLDER['string'] : PLACEHOLDER[attribute.type]
 
         return (<Panel>
 
-            <div className="attributes-header">
+            <div className={`attributes-header ${background}`}>
                     <div className="attr-link" onClick={this.addPath}>
                         <span className="plus-icon" /><span className="text">Add Path</span> 
                     </div>
@@ -325,9 +326,10 @@ class AddDecision extends Component {
     outputPanel() {
         const { outcome } = this.state;
         const { editDecision } = this.props;
+        const { background } = this.context;
 
         return (<Panel>
-            <div className="attributes-header">
+            <div className={`attributes-header ${background}`}>
                     <div className="attr-link" onClick={this.addParams}>
                         <span className="plus-icon" /><span className="text">Add Params</span> 
                     </div>
@@ -388,6 +390,8 @@ class AddDecision extends Component {
     }
 }
 
+AddDecision.contextType = ApperanceContext;
+
 AddDecision.defaultProps = ({
     addCondition: () => false,
     cancel: () => false,

assets/icons/.DS_Store

@@ -4,9 +4,11 @@ import PropTypes from 'prop-types';
 import { createHashHistory } from 'history';
 import FooterLinks from '../footer/footer';
 import footerLinks from '../../data-objects/footer-links.json';
+import AppearanceContext from '../../context/apperance-context';
 
 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: 'Upload Rules', navigate: './home', iconClass: "icon fa fa-cloud-upload", linkClass: 'navmenu' },
+                { name: 'Appearance', navigate: './appearance', iconClass: "icon fa fa-sliders", linkClass: 'navmenu'} ];
 class NavigationPanel extends Component {
 
     constructor(props) {
@@ -37,8 +39,10 @@ class NavigationPanel extends Component {
 
         let sideNav = loggedIn && closedState ? 'open' : 'closed';
 
+        let appctx = this.context;
+
         return (
-            <div className={`nav-container ${closedState ? 'closed': 'open'}`}>
+            <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>
                 </div>
@@ -56,6 +60,8 @@ class NavigationPanel extends Component {
     }
 }
 
+NavigationPanel.contextType = AppearanceContext;
+
 NavigationPanel.defaultProps = {
     closedState: false,
     rulenames: [],