feat: [scm-81]: fix toggle on webhook page (#275)

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%;
+  }
+}

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

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 }