merged

Merge branch 'updateStyle' of https://github.com/oslabs-beta/ReacType into updateStyle

Author: tlukasiewicz89

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -243,7 +243,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         </h4>
         <TableParentProps parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
         </div>
-        <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', alignItems: 'center'}}>
+        <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
   <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
 </svg>

app/src/components/StateManagement/CreateTab/components/Table3.tsx

@@ -48,7 +48,7 @@ const Table3 = props => {
     },
     {
       field: 'delete',
-      headerName: '+',
+      headerName: 'X',
       width: 70,
       editable: false,
       renderCell: function renderCell(params: any) {

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -23,31 +23,31 @@ const TableParentProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 50,
+      width: 70,
       editable: false
     },
     {
       field: 'key',
       headerName: 'Key',
-      width: 50,
+      width: 90,
       editable: true
     },
     {
       field: 'value',
       headerName: 'Value',
-      width: 50,
+      width: 90,
       editable: true
     },
     {
       field: 'type',
       headerName: 'Type',
-      width: 50,
+      width: 90,
       editable: false
     },
     {
       field: 'delete',
       headerName: '+',
-      width: 50,
+      width: 90,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -26,31 +26,31 @@ const TableStateProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 50,
+      width: 70,
       editable: false
     },
     {
       field: 'key',
       headerName: 'Key',
-      width: 50,
+      width: 90,
       editable: true
     },
     {
       field: 'value',
       headerName: 'Value',
-      width: 50,
+      width: 90,
       editable: true
     },
     {
       field: 'type',
       headerName: 'Type',
-      width: 50,
+      width: 90,
       editable: false
     },
     {
       field: 'delete',
       headerName: 'X',
-      width: 50,
+      width: 90,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (

app/src/components/main/DirectChildComponent.tsx

@@ -51,19 +51,19 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
       state.canvasFocus.childId === childId ? '1px 1px 3px #a7cced' : ''
   };
 
-  // const combinedStyle = combineStyles(
-  //   combineStyles(
-  //     combineStyles(globalDefaultStyle, referencedComponent.style),
-  //     style
-  //   ),
-  //   interactiveStyle
-  // );
+  const combinedStyle = combineStyles(
+    combineStyles(
+      combineStyles(globalDefaultStyle, referencedComponent.style),
+      style
+    ),
+    interactiveStyle
+  );
   // Renders name and not children of subcomponents to clean up Canvas view when dragging components
   // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
   return  (
     <div
       onClick={onClickHandler}
-      //style={combinedStyle}
+      style={combinedStyle}
       ref={drag}
     >
       <strong>{name}</strong>

app/src/public/styles/style.css

@@ -41,11 +41,14 @@ h4 {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
+
 }
 .state-prop-grid {
   height: 300px;
-  width: max-content;
+  width: 400px;
   flex-grow: 1;
+  padding-left: 10px; 
+  padding-right: 10px;
 }
 .HTMLItemCreate {
   flex-grow: 1;