fix: improve hidden envs UI/UX (#2887)

Some small UI/UX fixes related to user-scoped hidden environments in the
feature overview after aligning with @NicolaeUnleash


![image](https://user-images.githubusercontent.com/14320932/212077468-ee830ccf-7a82-4006-bd12-b87116160574.png)

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',

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,

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 (
-        <ConditionallyRender
-            condition={hiddenEnvironments.has(environment.name)}
-            show={<VisibleOff onClick={toggleHiddenEnvironments} />}
-            elseShow={<Visible onClick={toggleHiddenEnvironments} />}
-        />
+        <StyledVisibilityToggle
+            onClick={toggleHiddenEnvironments}
+            visibilityOff={hiddenEnvironments.has(environment.name)}
+        >
+            <ConditionallyRender
+                condition={hiddenEnvironments.has(environment.name)}
+                show={<VisibilityOff />}
+                elseShow={<Visibility />}
+            />
+        </StyledVisibilityToggle>
     );
 };

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')(() => ({