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