ts updates on redux files

Author: tolgamizrakci

src/components/HTMLComponentPanel.jsx

@@ -1,41 +1,41 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { withStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import IconButton from "@material-ui/core/IconButton";
-import ImageIcon from "@material-ui/icons/Image";
-import FormIcon from "@material-ui/icons/Description";
-import ButtonIcon from "@material-ui/icons/EditAttributes";
-import LinkIcon from "@material-ui/icons/Link";
-import ListIcon from "@material-ui/icons/List";
-import ParagraphIcon from "@material-ui/icons/LocalParking";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Tab from "@material-ui/core/Tab";
-import Chip from "@material-ui/core/Chip";
-import theme from "./theme.ts";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import ImageIcon from '@material-ui/icons/Image';
+import FormIcon from '@material-ui/icons/Description';
+import ButtonIcon from '@material-ui/icons/EditAttributes';
+import LinkIcon from '@material-ui/icons/Link';
+import ListIcon from '@material-ui/icons/List';
+import ParagraphIcon from '@material-ui/icons/LocalParking';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Tab from '@material-ui/core/Tab';
+import Chip from '@material-ui/core/Chip';
+import theme from './theme.ts';
 
 class HTMLComponentPanel extends Component {
   state = {
-    HtmlComponentName: ""
+    HtmlComponentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      HtmlComponentName: event.target.value
+      HtmlComponentName: event.target.value,
     });
   };
 
-  handleCreateHTMLChild = type => {
+  handleCreateHTMLChild = (type) => {
     this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
   };
 
   render() {
     const { addChild } = this.props;
     return (
-      <div className={classes.htmlPanel}>
+      <div className={'htmlPanel'} alignItems="flex-start" align="center">
         <Tab
           disableRipple
           classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -48,12 +48,16 @@ class HTMLComponentPanel extends Component {
                 className="htmlicons"
                 aria-label="Image"
                 onClick={() => {
-                  this.handleCreateHTMLChild("Image");
+                  this.handleCreateHTMLChild('Image');
+                }}
+                style={{
+                  margin: 0,
+                  padding: 0,
                 }}
               >
                 <ImageIcon
                   style={{
-                    color: "#e0e0e0"
+                    color: '#e0e0e0',
                   }}
                 />
               </IconButton>
@@ -62,10 +66,10 @@ class HTMLComponentPanel extends Component {
                 className={classes.chip}
                 variant="outlined"
                 style={{
-                  color: "white",
-                  borderColor: "#424242",
-                  borderWidth: "0.0px",
-                  fontSize: "50%"
+                  color: 'white',
+                  fontSize: '50%',
+                  margin: 0,
+                  padding: 0,
                 }}
               />
             </div>
@@ -75,20 +79,22 @@ class HTMLComponentPanel extends Component {
               className="htmlicons"
               aria-label="Form"
               onClick={() => {
-                this.handleCreateHTMLChild("Form");
+                this.handleCreateHTMLChild('Form');
+              }}
+              style={{
+                margin: 0,
+                padding: 0,
               }}
             >
-              <FormIcon style={{ color: "#e0e0e0" }} />
+              <FormIcon style={{ color: '#e0e0e0' }} />
             </IconButton>
             <Chip
               label="Form"
               className={classes.chip}
               variant="outlined"
               style={{
-                color: "white",
-                borderColor: "#424242",
-                borderWidth: "0.0px",
-                fontSize: "50%"
+                color: 'white',
+                fontSize: '50%',
               }}
             />
           </Grid>
@@ -97,20 +103,22 @@ class HTMLComponentPanel extends Component {
               className="htmlicons"
               aria-label="Button"
               onClick={() => {
-                this.handleCreateHTMLChild("Button");
+                this.handleCreateHTMLChild('Button');
+              }}
+              style={{
+                margin: 0,
+                padding: 0,
               }}
             >
-              <ButtonIcon style={{ color: "#e0e0e0" }} />
+              <ButtonIcon style={{ color: '#e0e0e0' }} />
             </IconButton>
             <Chip
               label="Button"
               className={classes.chip}
               variant="outlined"
               style={{
-                color: "white",
-                borderColor: "#424242",
-                borderWidth: "0.0px",
-                fontSize: "50%"
+                color: 'white',
+                fontSize: '50%',
               }}
             />
           </Grid>
@@ -119,20 +127,22 @@ class HTMLComponentPanel extends Component {
               className="htmlicons"
               aria-label="Link"
               onClick={() => {
-                this.handleCreateHTMLChild("Link");
+                this.handleCreateHTMLChild('Link');
+              }}
+              style={{
+                margin: 0,
+                padding: 0,
               }}
             >
-              <LinkIcon style={{ color: "#e0e0e0" }} />
+              <LinkIcon style={{ color: '#e0e0e0' }} />
             </IconButton>
             <Chip
               label="Link"
               className={classes.chip}
               variant="outlined"
               style={{
-                color: "white",
-                borderColor: "#424242",
-                borderWidth: "0.0px",
-                fontSize: "50%"
+                color: 'white',
+                fontSize: '50%',
               }}
             />
           </Grid>
@@ -141,20 +151,22 @@ class HTMLComponentPanel extends Component {
               className="htmlicons"
               aria-label="List"
               onClick={() => {
-                this.handleCreateHTMLChild("List");
+                this.handleCreateHTMLChild('List');
+              }}
+              style={{
+                margin: 0,
+                padding: 0,
               }}
             >
-              <ListIcon style={{ color: "#e0e0e0" }} />
+              <ListIcon style={{ color: '#e0e0e0' }} />
             </IconButton>
             <Chip
               label="List"
               className={classes.chip}
               variant="outlined"
               style={{
-                color: "white",
-                borderColor: "#424242",
-                borderWidth: "0.0px",
-                fontSize: "50%"
+                color: 'white',
+                fontSize: '50%',
               }}
             />
           </Grid>
@@ -163,20 +175,22 @@ class HTMLComponentPanel extends Component {
               className="htmlicons"
               aria-label="Paragraph"
               onClick={() => {
-                this.handleCreateHTMLChild("Paragraph");
+                this.handleCreateHTMLChild('Paragraph');
+              }}
+              style={{
+                margin: 0,
+                padding: 0,
               }}
             >
-              <ParagraphIcon style={{ color: "#e0e0e0" }} />
+              <ParagraphIcon style={{ color: '#e0e0e0' }} />
             </IconButton>
             <Chip
               label="Paragraph"
               className={classes.chip}
               variant="outlined"
               style={{
-                color: "white",
-                borderColor: "#424242",
-                borderWidth: "0.0px",
-                fontSize: "50%"
+                color: 'white',
+                fontSize: '50%',
               }}
             />
           </Grid>
@@ -189,37 +203,37 @@ class HTMLComponentPanel extends Component {
 function styles(theme) {
   return {
     htmlPanel: {
-      width: "100%",
-      height: "30%",
-      backgroundColor: "#212121",
-      borderStyle: "solid",
-      borderWidth: "0.5px",
-      borderRadius: "1px",
-      borderColor: "#424242",
-      bottom: "0px",
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      paddingBottom: "25px",
-      paddingTop: "2px",
-      boxShadow: "0 6px 6px rgba(0,0,0,0.23)"
+      width: '100%',
+      height: '30%',
+      backgroundColor: '#212121',
+      borderStyle: 'solid',
+      borderWidth: '0.5px',
+      borderRadius: '1px',
+      borderColor: '#424242',
+      bottom: '0px',
+      paddingLeft: '10px',
+      paddingRight: '10px',
+      paddingBottom: '25px',
+      paddingTop: '2px',
+      boxShadow: '0 6px 6px rgba(0,0,0,0.23)',
       // paddingBottom: "10px"
     },
     chip: {
-      color: "rgba(193, 66, 66, 0)"
+      color: 'rgba(193, 66, 66, 0)',
     },
     htmliconwrapper: {
-      verticalAlign: "baseline"
+      verticalAlign: 'baseline',
     },
     htmlicons: {
-      color: "#ffffff"
+      color: '#ffffff',
     },
     tabRoot: {
-      textTransform: "initial",
+      textTransform: 'initial',
       minWidth: 100,
       fontWeight: theme.typography.fontWeightRegular,
       // marginRight: theme.spacing.unit * 4,
-      color: "#ffffff"
-    }
+      color: '#ffffff',
+    },
   };
 }