updated table styling for create edit tab

Author: carlyjackson

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