wip

apps/app/src/components/SlackNotification.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
-  Form, FormGroup, Label, Input,
+  FormGroup, Input, InputGroup, InputGroupText,
   PopoverBody, PopoverHeader, UncontrolledPopover,
 } from 'reactstrap';
 
@@ -76,33 +76,60 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
     //     </UncontrolledPopover>
     //   </div>
     // </div>
-    <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
-      <div className="grw-input-group-slack-notification input-group extended-setting">
-        <label className="input-group-addon">
-          <div className="form-check form-switch form-switch-lg form-switch-slack">
-            <input
-              type="checkbox"
-              className="form-check-input border-0"
-              id={id}
-              checked={isSlackEnabled}
-              onChange={updateCheckboxHandler}
-            />
-            <label className="form-check-label align-center" htmlFor={id}></label>
-          </div>
-        </label>
-        <input
-          className="grw-form-control-slack-notification form-control align-top pl-0"
-          id={idForSlackPopover}
-          type="text"
-          value={slackChannels}
-          placeholder="Input channels"
-          onChange={updateSlackChannelsHandler}
-        />
-        <UncontrolledPopover trigger="focus" placement="top" target={idForSlackPopover}>
-          <PopoverHeader>{t('slack_notification.popover_title')}</PopoverHeader>
-          <PopoverBody>{t('slack_notification.popover_desc')}</PopoverBody>
-        </UncontrolledPopover>
-      </div>
-    </div>
+    // <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
+    //   <div className="grw-input-group-slack-notification input-group extended-setting">
+    //     <label className="input-group-addon">
+    //       <div className="form-check form-switch form-switch-lg form-switch-slack">
+    //         <input
+    //           type="checkbox"
+    //           className="form-check-input border-0"
+    //           id={id}
+    //           checked={isSlackEnabled}
+    //           onChange={updateCheckboxHandler}
+    //         />
+    //         <label className="form-check-label align-center" htmlFor={id}></label>
+    //       </div>
+    //     </label>
+    //     <input
+    //       className="grw-form-control-slack-notification form-control align-top pl-0"
+    //       id={idForSlackPopover}
+    //       type="text"
+    //       value={slackChannels}
+    //       placeholder="Input channels"
+    //       onChange={updateSlackChannelsHandler}
+    //     />
+    //     <UncontrolledPopover trigger="focus" placement="top" target={idForSlackPopover}>
+    //       <PopoverHeader>{t('slack_notification.popover_title')}</PopoverHeader>
+    //       <PopoverBody>{t('slack_notification.popover_desc')}</PopoverBody>
+    //     </UncontrolledPopover>
+    //   </div>
+    // </div>
+    <InputGroup className={`d-flex ${styles['grw-slack-switch']}`}>
+      <InputGroupText className="">
+        <FormGroup switch className="">
+          <Input
+            className="grw-slack-switch"
+            type="switch"
+            role="switch"
+            id={id}
+            checked={isSlackEnabled}
+            onChange={updateCheckboxHandler}
+          />
+
+        </FormGroup>
+      </InputGroupText>
+      <Input
+        className=""
+        id={idForSlackPopover}
+        type="text"
+        value={slackChannels}
+        placeholder="Input channels"
+        onChange={updateSlackChannelsHandler}
+      />
+      <UncontrolledPopover trigger="focus" placement="top" target={idForSlackPopover}>
+        <PopoverHeader>{t('slack_notification.popover_title')}</PopoverHeader>
+        <PopoverBody>{t('slack_notification.popover_desc')}</PopoverBody>
+      </UncontrolledPopover>
+    </InputGroup>
   );
 };