fix: toggle strategies ui adjustments (#2030)

* fix: toggle strategies ui adjustments

* fix dark theme type ts issue

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}

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>

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')]: {

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: {

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,

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

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;