fix: finished styling

Signed-off-by: Alejandro Parcet <[email protected]>

Author: alexpargon

node/src/components/navigation/Header.tsx

@@ -1,5 +1,5 @@
 import { HelpOutline, InfoOutline } from "@mui/icons-material";
-import { Box, Typography, styled } from "@mui/material";
+import { Box, Typography, styled, useTheme } from "@mui/material";
 import CustomTooltip from "../utils/CustomTooltip";
 
 const HeaderContainer = styled("div", {
@@ -44,6 +44,7 @@ const types: { [key in HeaderTypes]: TypographyVariant } = {
 
 function Header(props: HeaderProps) {
   const { tabTitle, infoText, ExtendedInfoText, headerType, helpContents, fontWeight } = props;
+  const theme = useTheme();
   return (
     <HeaderContainer headerType={headerType}>
       <Box flex={1} display="flex" alignItems="center">
@@ -58,29 +59,29 @@ function Header(props: HeaderProps) {
         {infoText && infoText.length > 0 && (
           <CustomTooltip title={infoText} ExtendedTootlip={ExtendedInfoText} placement="right" arrow>
             <InfoOutline
-              sx={theme => ({
+              sx={{
                 color: theme.palette.primary.light,
                 backgroundColor: theme.palette.background.default,
                 borderRadius: "50%",
                 padding: "2px",
                 marginLeft: "8px",
                 marginBottom: "2px",
                 fontSize: "24px",
-              })}
+              }}
             />
           </CustomTooltip>
         )}
       </Box>
       {helpContents && (
         <CustomTooltip title={helpContents} placement="right" arrow>
           <HelpOutline
-            sx={theme => ({
+            sx={{
               color: theme.palette.primary.light,
               backgroundColor: theme.palette.background.default,
               borderRadius: "50%",
               padding: "2px",
               fontSize: "32px",
-            })}
+            }}
           />
         </CustomTooltip>
       )}

node/src/components/plots/MOGAParetoTable.tsx

@@ -187,11 +187,7 @@ function MogaParetoTable({ tableData, hovered, setHovered }: MogaParetoTableProp
 
   return (
     <>
-      <Header
-        tabTitle="Pareto-Optimal MOGA Samples"
-        headerType="subTitle"
-        ExtendedInfoText="Explore the pareto-optimal solutions."
-      />
+      <Header tabTitle="Pareto-Optimal MOGA Samples" headerType="subTitle" infoText="Explore the pareto-optimal solutions" />
       <DataGrid
         rows={data?.rows || []}
         columns={columns}

node/src/components/sampling/JobSampling.tsx

@@ -1,5 +1,5 @@
 import { InfoOutline } from "@mui/icons-material";
-import { Accordion, Button, AccordionDetails } from "@mui/material";
+import { Accordion, Button, AccordionDetails, useTheme } from "@mui/material";
 import React, { useState } from "react";
 import CustomTooltip from "../utils/CustomTooltip";
 import AdaptExtedSamplingDocument from "../documents/AdaptExtendSamplingDocument";
@@ -23,6 +23,7 @@ interface JobSamplingProps {
 export function JobSampling(props: JobSamplingProps) {
   const { loading, setLoading, progress, setProgress, jobProgress, setJobProgress, colsFetched, jobsFetched, selectedFunction } =
     props;
+  const theme = useTheme();
   const [jobPanelOpen, setJobPanelOpen] = useState<boolean>(false);
 
   return (
@@ -51,13 +52,13 @@ export function JobSampling(props: JobSamplingProps) {
           arrow
         >
           <InfoOutline
-            sx={theme => ({
+            sx={{
               color: loading ? theme.palette.grey[400] : theme.palette.primary.light,
               backgroundColor: loading ? theme.palette.grey[200] : theme.palette.background.default,
               borderRadius: "50%",
               padding: "2px",
               marginLeft: "8px",
-            })}
+            }}
           />
         </CustomTooltip>
       </Button>

node/src/components/sampling/RunSamplingButton.tsx

@@ -1,4 +1,4 @@
-import { Button, CircularProgress } from "@mui/material";
+import { Button, CircularProgress, useTheme } from "@mui/material";
 import { toast } from "react-toastify";
 import { useServiceContext } from "../../context/ServiceContext";
 import CustomTooltip from "../utils/CustomTooltip";
@@ -18,8 +18,9 @@ const tooltipMessage = {
 };
 
 export function RunSamplingButton(props: RunSamplingButtonProps) {
-  const { permissions } = useServiceContext();
   const { handleRunSampling, disabled } = props;
+  const theme = useTheme();
+  const { permissions } = useServiceContext();
   const { launchingSampling, setLaunchingSampling, setRunningSampling } = useSamplingContext();
   const simplifiedHost = getSimplifiedHost();
 
@@ -52,12 +53,12 @@ export function RunSamplingButton(props: RunSamplingButtonProps) {
           variant="contained"
           onClick={handleRunSamplingWithErrorHandling}
           disabled={launchingSampling || disabled || permissions !== "WRITE"}
-          sx={theme => ({
+          sx={{
             "&:disabled": {
               backgroundColor: launchingSampling ? theme.palette.grey[100] : undefined,
               color: launchingSampling ? theme.palette.primary.contrastText : undefined,
             },
-          })}
+          }}
         >
           {launchingSampling ? (
             <>