From c64f9a0e2098ef59f7cad5ca78703d32abdd3387 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 5 Sep 2022 11:00:36 +0200
Subject: [PATCH] fix: toggle strategies ui adjustments (#2030)

* fix: toggle strategies ui adjustments

* fix dark theme type ts issue
---
 .../FeatureStrategyEmpty/FeatureStrategyEmpty.tsx        | 9 +++++----
 .../FeatureStrategyMenu/FeatureStrategyMenu.tsx          | 3 +++
 .../FeatureMetricsStats/FeatureMetricsStats.styles.ts    | 2 +-
 .../FeatureOverviewEnvironment.styles.ts                 | 1 -
 frontend/src/themes/dark-theme.ts                        | 1 -
 frontend/src/themes/theme.ts                             | 1 -
 frontend/src/themes/themeTypes.ts                        | 1 -
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
index c604d24b4b..9c7609aebc 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
@@ -110,6 +110,9 @@ export const FeatureStrategyEmpty = ({
         }
     };
 
+    const canCopyFromOtherEnvironment =
+        otherAvailableEnvironments && otherAvailableEnvironments.length > 0;
+
     return (
         <div className={styles.container}>
             <div className={styles.title}>
@@ -136,12 +139,10 @@ export const FeatureStrategyEmpty = ({
                     projectId={projectId}
                     featureId={featureId}
                     environmentId={environmentId}
+                    matchWidth={canCopyFromOtherEnvironment}
                 />
                 <ConditionallyRender
-                    condition={
-                        otherAvailableEnvironments &&
-                        otherAvailableEnvironments.length > 0
-                    }
+                    condition={canCopyFromOtherEnvironment}
                     show={
                         <CopyButton
                             environmentId={environmentId}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
index 481925b40b..66b4c2bb1f 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@@ -12,6 +12,7 @@ interface IFeatureStrategyMenuProps {
     featureId: string;
     environmentId: string;
     variant?: IPermissionButtonProps['variant'];
+    matchWidth?: boolean;
 }
 
 export const FeatureStrategyMenu = ({
@@ -20,6 +21,7 @@ export const FeatureStrategyMenu = ({
     featureId,
     environmentId,
     variant,
+    matchWidth,
 }: IFeatureStrategyMenuProps) => {
     const [anchor, setAnchor] = useState<Element>();
     const isPopoverOpen = Boolean(anchor);
@@ -42,6 +44,7 @@ export const FeatureStrategyMenu = ({
                 onClick={onClick}
                 aria-labelledby={popoverId}
                 variant={variant}
+                sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
             >
                 {label}
             </PermissionButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
index 09be2d3fee..9ba92be5f1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     item: {
         padding: theme.spacing(2),
-        background: theme.palette.featureMetricsBackground,
+        background: 'transparent',
         borderRadius: theme.spacing(2),
         textAlign: 'center',
         [theme.breakpoints.up('md')]: {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
index f4ea62eaa3..06e265773d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
@@ -4,7 +4,6 @@ export const useStyles = makeStyles()(theme => ({
     featureOverviewEnvironment: {
         borderRadius: theme.shape.borderRadiusLarge,
         marginBottom: theme.spacing(2),
-        padding: '0.2rem',
         backgroundColor: theme.palette.background.paper,
     },
     accordion: {
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 035dd2651d..520675c00c 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -139,7 +139,6 @@ export default createTheme({
         formSidebarTextColor: themeColors.textColor,
         checkmarkBadge: themeColors.secondary,
         inputLabelBackground: 'transparent',
-        featureMetricsBackground: themeColors.secondary,
         grey: colors.grey,
         text: {
             primary: themeColors.textColor,
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index bfbd7804c9..e9a10be0f5 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -138,7 +138,6 @@ export default createTheme({
         },
         checkmarkBadge: colors.purple[800],
         inputLabelBackground: colors.white,
-        featureMetricsBackground: colors.grey[100],
         featureStrategySegmentChipBackground: colors.purple[800],
         featureSegmentSearchBackground: colors.purple[800],
         dialogHeaderBackground: colors.purple[800],
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index 87c29ac3a7..367be4cb73 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -66,7 +66,6 @@ declare module '@mui/material/styles' {
             from: string;
             to: string;
         };
-        featureMetricsBackground: string;
         constraintAccordion: {
             editBackground: string;
             background: string;