fix(orchestrator):fix wrong color for selected tab (#1331)

Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>

Author: LiorSoffer

workspaces/orchestrator/.changeset/orange-lamps-flow.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+fix wrong color for selected tab

workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/OrchestratorPage.tsx

@@ -16,25 +16,44 @@
 
 import { TabbedLayout } from '@backstage/core-components';
 
+import { Box } from '@material-ui/core';
+import { makeStyles } from 'tss-react/mui';
+
 import { workflowInstancesRouteRef } from '../../routes';
+import { useIsDarkMode } from '../../utils/isDarkMode';
 import { BaseOrchestratorPage } from '../BaseOrchestratorPage';
 import { WorkflowRunsTabContent } from './WorkflowRunsTabContent';
 import { WorkflowsTabContent } from './WorkflowsTabContent';
 
+const useStyles = makeStyles<{ isDarkMode: boolean }>()(
+  (_, { isDarkMode }) => ({
+    tabbedLayout: {
+      '& .Mui-selected': {
+        color: isDarkMode ? '#ffffff !important' : '#151515 !important',
+      },
+    },
+  }),
+);
+
 export const OrchestratorPage = () => {
+  const isDarkMode = useIsDarkMode();
+  const { classes } = useStyles({ isDarkMode });
+
   return (
     <BaseOrchestratorPage title="Workflow Orchestrator" noPadding>
-      <TabbedLayout>
-        <TabbedLayout.Route path="/" title="Workflows">
-          <WorkflowsTabContent />
-        </TabbedLayout.Route>
-        <TabbedLayout.Route
-          path={workflowInstancesRouteRef.path}
-          title="All runs"
-        >
-          <WorkflowRunsTabContent />
-        </TabbedLayout.Route>
-      </TabbedLayout>
+      <Box className={classes.tabbedLayout}>
+        <TabbedLayout>
+          <TabbedLayout.Route path="/" title="Workflows">
+            <WorkflowsTabContent />
+          </TabbedLayout.Route>
+          <TabbedLayout.Route
+            path={workflowInstancesRouteRef.path}
+            title="All runs"
+          >
+            <WorkflowRunsTabContent />
+          </TabbedLayout.Route>
+        </TabbedLayout>
+      </Box>
     </BaseOrchestratorPage>
   );
 };

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx

@@ -19,18 +19,33 @@ import { useAsync } from 'react-use';
 import { TabbedLayout } from '@backstage/core-components';
 import { useApi, useRouteRefParams } from '@backstage/core-plugin-api';
 
+import { Box } from '@material-ui/core';
 import Grid from '@mui/material/Grid';
+import { makeStyles } from 'tss-react/mui';
 
 import { orchestratorApiRef } from '../../api';
 import { workflowRouteRef, workflowRunsRoutePath } from '../../routes';
+import { useIsDarkMode } from '../../utils/isDarkMode';
 import { BaseOrchestratorPage } from '../BaseOrchestratorPage';
 import { WorkflowRunsTabContent } from '../OrchestratorPage/WorkflowRunsTabContent';
 import { RunButton } from './RunButton';
 import { WorkflowDetailsTabContent } from './WorkflowDetailsTabContent';
 
+const useStyles = makeStyles<{ isDarkMode: boolean }>()(
+  (_, { isDarkMode }) => ({
+    tabbedLayout: {
+      '& .Mui-selected': {
+        color: isDarkMode ? '#ffffff !important' : '#151515 !important',
+      },
+    },
+  }),
+);
+
 export const WorkflowPage = () => {
   const { workflowId } = useRouteRefParams(workflowRouteRef);
   const orchestratorApi = useApi(orchestratorApiRef);
+  const isDarkMode = useIsDarkMode();
+  const { classes } = useStyles({ isDarkMode });
 
   const {
     value: workflowOverviewDTO,
@@ -47,24 +62,29 @@ export const WorkflowPage = () => {
       typeLink="/orchestrator"
       noPadding
     >
-      <TabbedLayout>
-        <TabbedLayout.Route path="/" title="Workflow details">
-          <Grid container spacing={2}>
-            <RunButton isAvailable={workflowOverviewDTO?.data.isAvailable} />
-            <WorkflowDetailsTabContent
-              loadingWorkflowOverview={loadingWorkflowOverview}
-              workflowOverviewDTO={workflowOverviewDTO?.data}
-              errorWorkflowOverview={errorWorkflowOverview}
-            />
-          </Grid>
-        </TabbedLayout.Route>
-        <TabbedLayout.Route path={workflowRunsRoutePath} title="Workflow runs">
-          <Grid container spacing={2}>
-            <RunButton isAvailable={workflowOverviewDTO?.data.isAvailable} />
-            <WorkflowRunsTabContent />
-          </Grid>
-        </TabbedLayout.Route>
-      </TabbedLayout>
+      <Box className={classes.tabbedLayout}>
+        <TabbedLayout>
+          <TabbedLayout.Route path="/" title="Workflow details">
+            <Grid container spacing={2}>
+              <RunButton isAvailable={workflowOverviewDTO?.data.isAvailable} />
+              <WorkflowDetailsTabContent
+                loadingWorkflowOverview={loadingWorkflowOverview}
+                workflowOverviewDTO={workflowOverviewDTO?.data}
+                errorWorkflowOverview={errorWorkflowOverview}
+              />
+            </Grid>
+          </TabbedLayout.Route>
+          <TabbedLayout.Route
+            path={workflowRunsRoutePath}
+            title="Workflow runs"
+          >
+            <Grid container spacing={2}>
+              <RunButton isAvailable={workflowOverviewDTO?.data.isAvailable} />
+              <WorkflowRunsTabContent />
+            </Grid>
+          </TabbedLayout.Route>
+        </TabbedLayout>
+      </Box>
     </BaseOrchestratorPage>
   );
 };