Fixed a theming issue and made some minor stylistic tweaks

ui/src/features/DiscoverTable/Table.js

@@ -182,7 +182,7 @@ export default function DiscoverTable(props) {
             sx={{
               height: "100%",
               width: "300px",
-              backgroundColor: "white",
+              backgroundColor: theme.palette.background.default,
               borderLeft: "1px solid lightgrey"
             }}
           >

ui/src/features/DiscoverTable/Utils/Details.js

@@ -20,12 +20,13 @@ import { AZURE_PORTAL } from "../../../global/azureClouds";
 
 import { TableContext } from "../TableContext";
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#1a90ff",
-    },
-  },
+const detailsTheme = (theme) => createTheme({
+  ...theme,
+  // palette: {
+  //   primary: {
+  //     main: "#1a90ff",
+  //   },
+  // },
   overrides: {
     MuiLinearProgress: {
       root: {
@@ -81,7 +82,14 @@ function NumberCircularProgress(props) {
         alignItems="center"
         justifyContent="center"
       >
-        <Typography variant="h6" component="div" color="textSecondary">{`${props.value}%`}</Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          color="textSecondary"
+          sx={{ mb: 1 }}
+        >
+          {`${props.value}%`}
+        </Typography>
       </Box>
     </Box>
   );
@@ -126,7 +134,7 @@ export default function ItemDetails(props) {
   });
 
   return isTarget ? (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={detailsTheme}>
       <Wrapper>
         <Box sx={{ display: "flex" }}>
           <Box sx={{ width: "40px" }} />

ui/src/features/configure/block/Utils/confirmDelete.js

@@ -23,10 +23,10 @@ import { deleteBlock } from "../../../ipam/ipamAPI";
 
 import { apiRequest } from '../../../../msal/authConfig';
 
-const Spotlight = styled("span")({
-  fontWeight: "bold",
-  color: "mediumblue"
-});
+const Spotlight = styled("span")(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.mode === 'dark' ? 'cornflowerblue' : 'mediumblue'
+}));
 
 export default function ConfirmDelete(props) {
   const { open, handleClose, space, block, refresh } = props;
@@ -92,7 +92,7 @@ export default function ConfirmDelete(props) {
             Please confirm you want to delete Block <Spotlight>'{block}'</Spotlight>
           </DialogContentText>
           <Box sx={{ display: "flex", justifyContent: "center", width: "100%", pt: 3 }}>
-            <FormGroup sx={{ pl: 1, pr: 1, border: "1px solid rgba(224, 224, 224, 1)", borderRadius: "4px" }}>
+            <FormGroup sx={{ pl: 2.5, pr: 1, border: "1px solid rgba(224, 224, 224, 1)", borderRadius: "4px" }}>
               <FormControlLabel
                 control={
                   <Checkbox

ui/src/features/configure/block/Utils/editReservations.js

@@ -53,10 +53,10 @@ const msgMap = {
   "errCIDRExists": "A vNET with the assigned CIDR has already been associated with the target IP Block."
 };
 
-const Spotlight = styled("span")({
-  fontWeight: "bold",
-  color: "mediumblue"
-});
+const Spotlight = styled("span")(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.mode === 'dark' ? 'cornflowerblue' : 'mediumblue'
+}));
 
 const gridStyle = {
   height: '100%',

ui/src/features/configure/block/Utils/editVnets.js

@@ -36,10 +36,10 @@ import {
 
 import { apiRequest } from "../../../../msal/authConfig";
 
-const Spotlight = styled("span")({
-  fontWeight: "bold",
-  color: "mediumblue"
-});
+const Spotlight = styled("span")(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.mode === 'dark' ? 'cornflowerblue' : 'mediumblue'
+}));
 
 const gridStyle = {
   height: '100%',

ui/src/features/configure/space/Utils/confirmDelete.js

@@ -23,10 +23,10 @@ import { deleteSpace } from "../../../ipam/ipamAPI";
 
 import { apiRequest } from '../../../../msal/authConfig';
 
-const Spotlight = styled("span")({
-  fontWeight: "bold",
-  color: "mediumblue"
-});
+const Spotlight = styled("span")(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.mode === 'dark' ? 'cornflowerblue' : 'mediumblue'
+}));
 
 export default function ConfirmDelete(props) {
   const { open, handleClose, space, refresh } = props;
@@ -92,7 +92,7 @@ export default function ConfirmDelete(props) {
             Please confirm you want to delete Space <Spotlight>'{space}'</Spotlight>
           </DialogContentText>
           <Box sx={{ display: "flex", justifyContent: "center", width: "100%", pt: 3 }}>
-            <FormGroup sx={{ pl: 1, pr: 1, border: "1px solid rgba(224, 224, 224, 1)", borderRadius: "4px" }}>
+            <FormGroup sx={{ pl: 2.5, pr: 1, border: "1px solid rgba(224, 224, 224, 1)", borderRadius: "4px" }}>
               <FormControlLabel
                 control={
                   <Checkbox