fix(orchestrator): improve styles of generated field array in the dar…

…k theme (#2106)

FLPATH-1507

Signed-off-by: Marek Libra <mlibra@redhat.com>

plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx

@@ -7,6 +7,7 @@ import { JsonObject } from '@backstage/types';
 import {
   Box,
   Button,
+  makeStyles,
   Paper,
   Step,
   StepContent,
@@ -27,6 +28,24 @@ import SubmitButton from './SubmitButton';
 
 const Form = withTheme(MuiTheme);
 
+const useStyles = makeStyles(_theme => ({
+  // Hotfix: this should be fixed in the theme
+  step: {
+    '& form': {
+      '& .field-array > div > div': {
+        outline: 'inherit !important',
+        padding: 'inherit !important',
+        backgroundColor: 'inherit !important',
+
+        '& div > div > div > div': {
+          // unfortunately there are no better CSS selectors
+          backgroundColor: 'inherit !important',
+        },
+      },
+    },
+  },
+}));
+
 const getCombinedData = (
   steps: WorkflowInputSchemaStep[],
   isComposedSchema: boolean,
@@ -144,6 +163,7 @@ const OrchestratorForm = ({
   isExecuting: boolean;
   onReset: () => void;
 }) => {
+  const styles = useStyles();
   const [activeStep, setActiveStep] = React.useState(0);
   const handleBack = () => setActiveStep(activeStep - 1);
 
@@ -152,7 +172,7 @@ const OrchestratorForm = ({
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps?.map((step, index) => (
-          <Step key={step.key}>
+          <Step key={step.key} className={styles.step}>
             <StepLabel
               aria-label={`Step ${index + 1} ${step.title}`}
               aria-disabled="false"