complete frontend restyling

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)
+);