fix: small fixes on variants push to env UI (#2991)

https://linear.app/unleash/issue/2-652/slight-improvements-and-fixes-on-the-push-to-environment-feature

Includes:

- Hover effect on the items should cover the full width of the menu;
- Clicking anywhere on the item should toggle the check;
- Small refactoring


![image](https://user-images.githubusercontent.com/14320932/214592250-05ecc584-3b6b-49f4-93a5-4d3323cd9cde.png)

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx

@@ -2,7 +2,6 @@ import {
     Button,
     Checkbox,
     Divider,
-    FormControlLabel,
     Menu,
     MenuItem,
     styled,
@@ -17,15 +16,18 @@ const StyledMenu = styled(Menu)(({ theme }) => ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        padding: theme.spacing(2),
         '& > li': {
-            padding: theme.spacing(0),
+            padding: theme.spacing(0, 1),
         },
     },
 }));
 
+const StyledActions = styled('div')(({ theme }) => ({
+    margin: theme.spacing(1, 2),
+}));
+
 const StyledButton = styled(Button)(({ theme }) => ({
-    marginTop: theme.spacing(1),
+    marginTop: theme.spacing(2),
 }));
 
 interface IPushVariantsButtonProps {
@@ -77,6 +79,16 @@ export const PushVariantsButton = ({
         );
     };
 
+    const toggleSelectedEnvironment = (
+        environment: IFeatureEnvironmentWithCrEnabled
+    ) => {
+        if (selectedEnvironments.includes(environment)) {
+            removeSelectedEnvironment(environment);
+        } else {
+            addSelectedEnvironment(environment);
+        }
+    };
+
     const cleanupState = () => {
         setSelectedEnvironments([]);
         setPushToAnchorEl(null);
@@ -115,36 +127,27 @@ export const PushVariantsButton = ({
                         {environments
                             .filter(environment => environment.name !== current)
                             .map(otherEnvironment => (
-                                <MenuItem key={otherEnvironment.name}>
+                                <MenuItem
-                                    <FormControlLabel
+                                    key={otherEnvironment.name}
                                     disabled={
-                                            !hasAccessTo[
+                                        !hasAccessTo[otherEnvironment.name] ??
-                                                otherEnvironment.name
+                                        false
-                                            ] ?? false
                                     }
-                                        control={
+                                    onClick={() =>
+                                        toggleSelectedEnvironment(
+                                            otherEnvironment
+                                        )
+                                    }
+                                >
                                     <Checkbox
-                                                onChange={event => {
-                                                    if (event.target.checked) {
-                                                        addSelectedEnvironment(
-                                                            otherEnvironment
-                                                        );
-                                                    } else {
-                                                        removeSelectedEnvironment(
-                                                            otherEnvironment
-                                                        );
-                                                    }
-                                                }}
                                         checked={selectedEnvironments.includes(
                                             otherEnvironment
                                         )}
-                                                value={otherEnvironment.name}
-                                            />
-                                        }
-                                        label={otherEnvironment.name}
                                     />
+                                    {otherEnvironment.name}
                                 </MenuItem>
                             ))}
+                        <StyledActions>
                             <Divider />
                             <StyledButton
                                 variant="outlined"
@@ -156,6 +159,7 @@ export const PushVariantsButton = ({
                             >
                                 Push to selected ({selectedEnvironments.length})
                             </StyledButton>
+                        </StyledActions>
                     </StyledMenu>
                 </>
             }