From b12962e7d2741c80ebca1abc1c67825026a09994 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 12 Jan 2023 13:29:38 +0000 Subject: [PATCH] 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) --- .../FeatureOverviewEnvSwitch.tsx | 5 ++- .../FeatureOverviewEnvSwitches.tsx | 1 - ...atureOverviewSidePanelEnvironmentHider.tsx | 37 ++++++++++--------- ...tureOverviewSidePanelEnvironmentSwitch.tsx | 2 +- 4 files changed, 23 insertions(+), 22 deletions(-) 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')(() => ({