From 2f1a0475221b31af8e0b4d26460fce2b0266d4fd Mon Sep 17 00:00:00 2001
From: Juan Lulkin <jmaiz@spotify.com>
Date: Wed, 21 Jul 2021 16:44:53 +0200
Subject: [PATCH] Align switches left and allows clicking row

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>
---
 .../FeatureFlags/FeatureFlagsItem.tsx         | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
index 62861d99a9..893fa24fec 100644
--- a/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx
@@ -17,8 +17,10 @@
 import React from 'react';
 import {
   ListItem,
+  Divider,
   ListItemSecondaryAction,
   ListItemText,
+  ListItemIcon,
   Switch,
   Tooltip,
 } from '@material-ui/core';
@@ -31,20 +33,22 @@ type Props = {
 };
 
 export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
-  <ListItem>
-    <ListItemText
-      primary={flag.name}
-      secondary={`Registered in ${flag.pluginId} plugin`}
-    />
-    <ListItemSecondaryAction>
-      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-        <Switch
-          color="primary"
-          checked={enabled}
-          onChange={() => toggleHandler(flag.name)}
-          name={flag.name}
-        />
-      </Tooltip>
-    </ListItemSecondaryAction>
-  </ListItem>
+  <>
+    <ListItem divider button onClick={() => toggleHandler(flag.name)}>
+      <ListItemIcon>
+        <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+          <Switch
+            color="primary"
+            checked={enabled}
+            onChange={() => toggleHandler(flag.name)}
+            name={flag.name}
+          />
+        </Tooltip>
+      </ListItemIcon>
+      <ListItemText
+        primary={flag.name}
+        secondary={`Registered in ${flag.pluginId} plugin`}
+      />
+    </ListItem>
+  </>
 );