From 2c6f2806a89f75fcb65a9b129de2b523446c14f3 Mon Sep 17 00:00:00 2001
From: Calvin Lee <calvin.lee@harness.io>
Date: Tue, 31 Jan 2023 15:41:43 -0700
Subject: [PATCH] feat: [scm-81]: fix toggle on webhook page (#275)

---
 web/src/pages/Webhooks/Webhooks.module.scss      | 15 +++++++++++++--
 web/src/pages/Webhooks/Webhooks.module.scss.d.ts |  2 ++
 web/src/pages/Webhooks/Webhooks.tsx              | 16 +++-------------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/Webhooks/Webhooks.module.scss b/web/src/pages/Webhooks/Webhooks.module.scss
index c9ee04fe6..bfeea5ab7 100644
--- a/web/src/pages/Webhooks/Webhooks.module.scss
+++ b/web/src/pages/Webhooks/Webhooks.module.scss
@@ -22,9 +22,20 @@
 .toggle {
   > input {
     opacity: 0;
-    left: 4.25%;
-    position: absolute;
+    position: relative;
     top: 40%;
     z-index: 999;
   }
 }
+
+.toggleEnable {
+  > input {
+    left: 52%;
+  }
+}
+
+.toggleDisable {
+  > input {
+    left: 32%;
+  }
+}
diff --git a/web/src/pages/Webhooks/Webhooks.module.scss.d.ts b/web/src/pages/Webhooks/Webhooks.module.scss.d.ts
index 75602c587..a2516c798 100644
--- a/web/src/pages/Webhooks/Webhooks.module.scss.d.ts
+++ b/web/src/pages/Webhooks/Webhooks.module.scss.d.ts
@@ -7,5 +7,7 @@ declare const styles: {
   readonly title: string
   readonly noData: string
   readonly toggle: string
+  readonly toggleEnable: string
+  readonly toggleDisable: string
 }
 export default styles
diff --git a/web/src/pages/Webhooks/Webhooks.tsx b/web/src/pages/Webhooks/Webhooks.tsx
index 2d34b6d12..33476d5f5 100644
--- a/web/src/pages/Webhooks/Webhooks.tsx
+++ b/web/src/pages/Webhooks/Webhooks.tsx
@@ -1,17 +1,7 @@
 import React, { useMemo, useState } from 'react'
-import {
-  Container,
-  PageBody,
-  Text,
-  Color,
-  TableV2,
-  Layout,
-  Utils,
-  useToaster,
-  IconName,
-  Toggle
-} from '@harness/uicore'
+import { Container, PageBody, Text, Color, TableV2, Layout, Utils, useToaster, IconName, Toggle } from '@harness/uicore'
 import { useHistory } from 'react-router-dom'
+import cx from 'classnames'
 import { useGet, useMutate } from 'restful-react'
 import type { CellProps, Column } from 'react-table'
 import { useAppContext } from 'AppContext'
@@ -73,7 +63,7 @@ export default function Webhooks() {
               <Container onClick={Utils.stopEvent}>
                 <Toggle
                   key={row.original.id}
-                  className={css.toggle}
+                  className={cx(css.toggle, checked ? css.toggleEnable : css.toggleDisable)}
                   checked={checked}
                   onChange={() => {
                     const data = { enabled: !checked }