From 9c58a934dd1dce84647b0346fe7458f920fb0c21 Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Tue, 21 Nov 2023 14:19:15 +0100
Subject: [PATCH] style(3000): Make new style switch more clickable (#18773)

* style(3000): Make new style switch more clickable

* Use LemonSwitch in app config
---
 .../src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss    |  6 +++---
 frontend/src/scenes/plugins/edit/PluginDrawer.tsx    | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index d92e8fe712bb8..c785fbc3c53b6 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -51,8 +51,8 @@
     }
 
     .posthog-3000 & {
-        --lemon-switch-width: 1.5rem;
-        --lemon-switch-height: 0.75rem;
+        --lemon-switch-height: 1.125rem;
+        --lemon-switch-width: calc(11 / 6 * var(--lemon-switch-height)); // Same proportion as in IconToggle
     }
 }
 
@@ -117,7 +117,7 @@
     justify-content: center;
 
     .posthog-3000 & {
-        --lemon-switch-handle-ratio: calc(8 / 10);
+        --lemon-switch-handle-ratio: calc(3 / 4); // Same proportion as in IconToggle
         --lemon-switch-handle-gutter: calc(var(--lemon-switch-height) * calc(1 - var(--lemon-switch-handle-ratio)) / 2);
         --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio));
         --lemon-switch-active-translate: translateX(
diff --git a/frontend/src/scenes/plugins/edit/PluginDrawer.tsx b/frontend/src/scenes/plugins/edit/PluginDrawer.tsx
index b5a5b7f31f5a0..979f5fa689c90 100644
--- a/frontend/src/scenes/plugins/edit/PluginDrawer.tsx
+++ b/frontend/src/scenes/plugins/edit/PluginDrawer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useActions, useValues } from 'kea'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import { Form, Switch } from 'antd'
+import { Form } from 'antd'
 import { userLogic } from 'scenes/userLogic'
 import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
 import { Drawer } from 'lib/components/Drawer'
@@ -18,7 +18,7 @@ import { MOCK_NODE_PROCESS } from 'lib/constants'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 import { PluginTags } from '../tabs/apps/components'
 import { IconLock } from 'lib/lemon-ui/icons'
-import { LemonButton, LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonSwitch, LemonTag, Link } from '@posthog/lemon-ui'
 import { IconCode } from '@posthog/icons'
 
 window.process = MOCK_NODE_PROCESS
@@ -31,10 +31,10 @@ function EnabledDisabledSwitch({
     onChange?: (value: boolean) => void
 }): JSX.Element {
     return (
-        <>
-            <Switch checked={value} onChange={onChange} />
-            <strong className="pl-2.5">{value ? 'Enabled' : 'Disabled'}</strong>
-        </>
+        <div className="flex items-center gap-2">
+            <LemonSwitch checked={value || false} onChange={onChange} />
+            <strong>{value ? 'Enabled' : 'Disabled'}</strong>
+        </div>
     )
 }