complete frontend restyling

frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js

@@ -1,5 +1,8 @@
 import React from "react";
 import { optionchangewrapper } from "utils/optionchangewrapper";
+import Checkbox from "@material-ui/core/Checkbox";
+import Radio from "@material-ui/core/Radio";
+import "assets/checkboxAndRadioStyle.css";
 
 class CheckboxAndRadioWrapper extends React.Component {
   optionChange = (option, optionName, type) => {
@@ -22,26 +25,33 @@ class CheckboxAndRadioWrapper extends React.Component {
   renderElements = (elements, componentName) => {
     return elements.map(({ type, value, name, optionName } = {}) => (
       <label key={name + type}>
-        <input
-          name={type === "radio" ? `${componentName}-radio` : ""}
-          type={type}
-          value={value}
-          checked={this.isChecked(type, value, optionName)}
-          onChange={option => this.optionChange(option, optionName, type)}
-        />
-        {name}
+        {type === "radio" ? (
+          <Radio
+            className="radio-style"
+            name={type === "radio" ? `${componentName}-radio` : ""}
+            type={type}
+            value={value}
+            checked={this.isChecked(type, value, optionName)}
+            onChange={option => this.optionChange(option, optionName, type)}
+          />
+        ) : (
+          <Checkbox
+            className="checkbox-style"
+            type={type}
+            value={value}
+            checked={this.isChecked(type, value, optionName)}
+            onChange={option => this.optionChange(option, optionName, type)}
+          />
+        )}
+        <span className="label-style">{name}</span>
+        <br />
       </label>
     ));
   };
 
   render() {
     const { elements, componentName } = this.props;
-    return (
-      <div>
-        <span>{componentName}</span>
-        {this.renderElements(elements, componentName)}
-      </div>
-    );
+    return <div>{this.renderElements(elements, componentName)}</div>;
   }
 }
 export default optionchangewrapper(CheckboxAndRadioWrapper);

frontend-react/src/components/widgets/CollapseWrapperStyled.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { connect } from "react-redux";
+import { OPTION_EXPAND_CHANGE } from "constants/actionTypes";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import sidebarStyle from "assets/sidebarStyle.js";
+import Collapse from "@material-ui/core/Collapse";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import Dashboard from "@material-ui/icons/Dashboard";
+
+const mapStateToProps = state => {
+  return {
+    uiexpand: state.uiexpand
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onUIExpandChanged: uiExpandOption =>
+    dispatch({ type: OPTION_EXPAND_CHANGE, ...uiExpandOption })
+});
+
+class CollapseWrapperStyled extends React.Component {
+  handleClick = componentName => {
+    this.props.onUIExpandChanged({
+      controlName: componentName,
+      value: !this.props.uiexpand[componentName]
+    });
+  };
+
+  isopen = componentName => this.props.uiexpand[componentName];
+  render() {
+    let { classes, componentName } = this.props;
+    return (
+      <div>
+        <ListItem
+          className={classes.whiteText}
+          onClick={() => this.handleClick(componentName)}
+        >
+          <ListItemIcon className={classes.whiteText}>
+            <Dashboard />
+          </ListItemIcon>
+          <ListItemText
+            className={classes.whiteText}
+            inset
+            primary={componentName}
+            disableTypography={true}
+          />
+          {this.isopen(componentName) ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse
+          className={classes.subOptionIndent}
+          in={this.isopen(componentName)}
+          timeout="auto"
+          unmountOnExit
+        >
+          {this.props.children}
+        </Collapse>
+      </div>
+    );
+  }
+}
+export default withStyles(sidebarStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(CollapseWrapperStyled)
+);

frontend-react/src/components/widgets/DeepCategoryWrapper.js

@@ -1,8 +1,15 @@
 import React from "react";
-import Select from "react-select";
 import { subcategorywrapper } from "utils/subcategorywrapper";
 import { hoc } from "utils/helpers";
 
+import withStyles from "@material-ui/core/styles/withStyles";
+import sidebarStyle from "assets/sidebarStyle.js";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import StarBorder from "@material-ui/icons/StarBorder";
+
 class DeepCategoryWrapper extends React.Component {
   handleOptionChange = selectedOption => {
     const { depth, onSubCategoryChanged } = this.props;
@@ -10,21 +17,45 @@ class DeepCategoryWrapper extends React.Component {
   };
 
   render() {
-    const { options, depth, childrenComponents } = this.props;
+    const { options, depth, childrenComponents, classes } = this.props;
     const {
       subcategory: { [depth]: deepSubCategory }
     } = this.props;
 
     return (
       <div>
-        <Select
-          value={deepSubCategory || null}
-          onChange={this.handleOptionChange}
-          options={options}
-        />
+        <List disablePadding>
+          {options.map(({ label, value }, index) => (
+            <ListItem
+              onClick={() => this.handleOptionChange({ label, value })}
+              className={
+                classes.nested +
+                " " +
+                classes.collapsedItemStyle +
+                " " +
+                (deepSubCategory && deepSubCategory.value === value
+                  ? classes.checkedItem
+                  : "")
+              }
+              key={index}
+            >
+              <ListItemIcon className={classes.whiteText}>
+                <StarBorder />
+              </ListItemIcon>
+              <ListItemText
+                className={classes.whiteText}
+                primary={label}
+                disableTypography={true}
+              />
+            </ListItem>
+          ))}
+        </List>
+
         {hoc(deepSubCategory && deepSubCategory.value, childrenComponents)}
       </div>
     );
   }
 }
-export default subcategorywrapper(DeepCategoryWrapper);
+export default withStyles(sidebarStyle)(
+  subcategorywrapper(DeepCategoryWrapper)
+);

frontend-react/src/components/widgets/DropDownWrapper.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import sidebarStyle from "assets/sidebarStyle.js";
+import StarBorder from "@material-ui/icons/StarBorder";
+
+class DropdownWrapper extends React.Component {
+  handleOptionChange = selectedOption => {
+    const { onOptionChanged, optionName } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: selectedOption
+    });
+  };
+
+  render() {
+    let { value, options, choices, classes } = this.props;
+    let optionName = value;
+    return (
+      <List disablePadding>
+        {choices.map(({ label, value }, index) => (
+          <ListItem
+            onClick={() => this.handleOptionChange({ label, value })}
+            className={
+              classes.nested +
+              " " +
+              classes.collapsedItemStyle +
+              " " +
+              (options[optionName] && options[optionName].value === value
+                ? classes.checkedItem
+                : "")
+            }
+            key={index}
+          >
+            <ListItemIcon className={classes.whiteText}>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText
+              className={classes.whiteText}
+              primary={label}
+              disableTypography={true}
+            />
+          </ListItem>
+        ))}
+      </List>
+    );
+  }
+}
+export default withStyles(sidebarStyle)(optionchangewrapper(DropdownWrapper));

frontend-react/src/components/widgets/RangeWrapper.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { Range } from "rc-slider";
 import { optionchangewrapper } from "utils/optionchangewrapper";
+import "assets/rangeStyle.css";
 import "rc-slider/assets/index.css";
+import Input from "@material-ui/core/Input";
 
 class RangeWrapper extends React.Component {
   sendAction = (optionName, optionValue) => {
@@ -39,14 +41,24 @@ class RangeWrapper extends React.Component {
           step={step}
           onAfterChange={this.handleRangeChange}
         />
-        <input
-          ref={node => {
+        <Input
+          placeholder="Min"
+          className="input-style"
+          inputProps={{
+            "aria-label": "Min"
+          }}
+          inputRef={node => {
             this.inputMin = node;
           }}
           onChange={this.handleInputChange}
         />
-        <input
-          ref={node => {
+        <Input
+          placeholder="Max"
+          className="input-style"
+          inputProps={{
+            "aria-label": "Max"
+          }}
+          inputRef={node => {
             this.inputMax = node;
           }}
           onChange={this.handleInputChange}