From 27a2a1a776d3481b905388bd971d4ee2c40619a1 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Wed, 20 Apr 2022 15:00:56 +0200
Subject: [PATCH] fix: make environment switch text clickable (#887)

* fix: make environment switch text clickable

* refactor: use a cursor pointer for the label

* refactor: avoid empty clickable area
---
 .../FeatureOverviewEnvSwitch.styles.ts        |  9 ++++++++
 .../FeatureOverviewEnvSwitch.tsx              | 22 +++++++++++--------
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts
new file mode 100644
index 0000000000..d2c974c006
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts
@@ -0,0 +1,9 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    label: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+    },
+}));
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 800bb21772..6bde11aee4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
@@ -10,6 +10,7 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
 import React from 'react';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { useStyles } from './FeatureOverviewEnvSwitch.styles';
 
 interface IFeatureOverviewEnvSwitchProps {
     env: IFeatureEnvironment;
@@ -29,6 +30,7 @@ const FeatureOverviewEnvSwitch = ({
         useFeatureApi();
     const { refetchFeature } = useFeature(projectId, featureId);
     const { setToastData, setToastApiError } = useToast();
+    const styles = useStyles();
 
     const handleToggleEnvironmentOn = async () => {
         try {
@@ -91,15 +93,17 @@ const FeatureOverviewEnvSwitch = ({
     );
 
     return (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-            <PermissionSwitch
-                permission={UPDATE_FEATURE_ENVIRONMENT}
-                projectId={projectId}
-                checked={env.enabled}
-                onChange={toggleEnvironment}
-                environmentId={env.name}
-            />
-            {content}
+        <div>
+            <label className={styles.label}>
+                <PermissionSwitch
+                    permission={UPDATE_FEATURE_ENVIRONMENT}
+                    projectId={projectId}
+                    checked={env.enabled}
+                    onChange={toggleEnvironment}
+                    environmentId={env.name}
+                />
+                {content}
+            </label>
         </div>
     );
 };