Merge pull request #29 from oslabs-beta/RachStateModalDebug

Debugged State Management UI

Author: rachelk585

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

@@ -121,6 +121,12 @@ const TableParentProps = props => {
 const useStyles = makeStyles({
   themeLight: {
     color: 'rgba(0,0,0,0.54)',
+    '& button:hover':{
+      backgroundColor: 'LightGray'
+    },
+    '& button':{
+      color: 'black'
+    },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'
     }

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

@@ -112,6 +112,12 @@ const TablePassedInProps = props => {
 const useStyles = makeStyles({
   themeLight: {
     color: 'rgba(0,0,0,0.54)',
+    '& button:hover':{
+      backgroundColor: 'LightGray'
+    },
+    '& button':{
+      color: 'black'
+    },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'
     }

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import {
   DataGrid,
-  GridEditRowsModel,
+  GridEditRowsModel
 } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -109,6 +109,7 @@ const TableStateProps = props => {
         editRowsModel={editRowsModel}
         onRowClick={selectHandler}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+        disableColumnMenu={false}
       />
     </div>
   );
@@ -117,8 +118,11 @@ const TableStateProps = props => {
 const useStyles = makeStyles({
   themeLight: {
     color: 'rgba(0,0,0,0.54)',
-    '& .MuiTablePagination-root': {
-      color: 'rbga(0,0,0,0.54)'
+    '& button:hover':{
+      backgroundColor: 'LightGray'
+    },
+    '& button':{
+      color: 'black'
     }
   },
   themeDark: {

app/src/components/StateManagement/StateManagement.tsx

@@ -37,6 +37,7 @@ const StateManager = (props): JSX.Element => {
   // then this will re-render the dataTable
 
   const background_Color = isDarkMode ? '#21262b' : 'white';
+  const color = isDarkMode ? 'white' : 'black';
 
   return (
     <React.Fragment>

app/src/public/styles/style.css

@@ -747,3 +747,7 @@ a.nav_link:hover {
   align-items: center;
 }
 
+li {
+  color: black !important;
+}
+