style(3000): Make new style switch more clickable (#18773)

* style(3000): Make new style switch more clickable * Use LemonSwitch in app config
PostHog · Nov 21, 2023 · 9c58a93 · 9c58a93
1 parent c6e0491
commit 9c58a93
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -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>
     )
 }