diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
index 8ffa0c3417..b0ccc91e61 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
@@ -25,9 +25,10 @@ interface IFeatureOverviewEnvSwitchProps {
setHiddenEnvironments: (environment: string) => void;
}
-const StyledContainer = styled('div')(({ theme }) => ({
+const StyledContainer = styled('div')({
display: 'flex',
-}));
+ alignItems: 'center',
+});
const StyledLabel = styled('label')({
display: 'inline-flex',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
index 7fddf21da8..8c741f9c77 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
@@ -6,7 +6,6 @@ import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverview
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { styled } from '@mui/material';
-import { IFeatureToggle } from '../../../../../interfaces/featureToggle';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
index 6ce35fac1d..5065abf61d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
@@ -1,23 +1,19 @@
import { IFeatureEnvironment } from 'interfaces/featureToggle';
-import { styled } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-const Visible = styled(Visibility)(({ theme }) => ({
- cursor: 'pointer',
+const StyledVisibilityToggle = styled(IconButton, {
+ shouldForwardProp: prop => prop !== 'highlighted',
+})<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
marginLeft: 'auto',
- marginTop: theme.spacing(0.5),
- color: theme.palette.neutral.main,
+ marginRight: theme.spacing(-1),
+ color: visibilityOff
+ ? theme.palette.neutral.main
+ : theme.palette.tertiary.main,
'&:hover': {
- opacity: 1,
+ color: theme.palette.neutral.main,
},
- opacity: 0,
-}));
-
-const VisibleOff = styled(VisibilityOff)(({ theme }) => ({
- cursor: 'pointer',
- marginLeft: 'auto',
- color: theme.palette.neutral.main,
}));
interface IFeatureOverviewSidePanelEnvironmentHiderProps {
@@ -36,10 +32,15 @@ export const FeatureOverviewSidePanelEnvironmentHider = ({
};
return (
- }
- elseShow={}
- />
+
+ }
+ elseShow={}
+ />
+
);
};
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx
index fa16962322..2bd6b700f9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx
@@ -13,7 +13,6 @@ import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfi
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { styled } from '@mui/material';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { RemoveRedEye, Star } from '@mui/icons-material';
import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
const StyledContainer = styled('div')(({ theme }) => ({
@@ -22,6 +21,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(2),
},
display: 'flex',
+ alignItems: 'center',
}));
const StyledLabel = styled('label')(() => ({