.

src/client/js/components/SlackNotification.jsx

@@ -39,32 +39,40 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="grw-slack-notification">
+      <div className="form-group grw-slack-notification">
         <div className="input-group input-group-sm extended-setting">
-          <label className="input-group-addon bg-light">
-            <img id="slack-mark-white" alt="slack-mark" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18" />
-            <img id="slack-mark-black" alt="slack-mark" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18" />
+          <label className="input-group-addon">
+            {/* <img id="slack-mark-white" alt="slack-mark" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18" />
+                <img id="slack-mark-black" alt="slack-mark" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18" /> */}
 
+            {/* <input
+                  type="checkbox"
+                  value="1"
+                  checked={this.props.isSlackEnabled}
+                  onChange={this.updateCheckboxHandler}
+                /> */}
+            <div className="custom-control custom-switch ">
+              <input type="checkbox" className="custom-control-input border-0" id="slackSwitch" />
+              <label className="custom-control-label" htmlFor="slackSwitch">
+                {/* <i className="fab fa-slack text-danger"></i> */}
+              </label>
+            </div>
+          </label>
+          <div>
             <input
-              type="checkbox"
-              value="1"
-              checked={this.props.isSlackEnabled}
-              onChange={this.updateCheckboxHandler}
+              className="form-control"
+              type="text"
+              value={this.props.slackChannels}
+              placeholder="Input channels"
+              data-toggle="popover"
+              title={t('slack_notification.popover_title')}
+              data-content={t('slack_notification.popover_desc')}
+              data-trigger="focus"
+              data-placement="top"
+              onChange={this.updateSlackChannelsHandler}
             />
 
-          </label>
-          <input
-            className="form-control"
-            type="text"
-            value={this.props.slackChannels}
-            placeholder="Input channels"
-            data-toggle="popover"
-            title={t('slack_notification.popover_title')}
-            data-content={t('slack_notification.popover_desc')}
-            data-trigger="focus"
-            data-placement="top"
-            onChange={this.updateSlackChannelsHandler}
-          />
+          </div>
         </div>
       </div>
     );

src/client/styles/scss/_on-edit.scss

@@ -123,6 +123,54 @@ body.on-edit {
     height: $grw-editor-navbar-bottom-height;
 
     .grw-slack-notification {
+      white-space: nowrap !important;
+      //kokokara-test
+      border-style: solid;
+      border-width: 1px;
+      border-radius: 16px;
+
+      .input-group-addon {
+        padding: 0px !important;
+        border-radius: 16px 0px 0px 16px;
+      }
+      .custom-switch {
+        padding-left: $custom-switch-width + $custom-control-gutter;
+      }
+      //   .custom-control-label {
+      //     &::before {
+      //       // stylelint-disable-next-line property-blacklist
+      //       vertical-align: middle;
+      //       // width: 44px;
+      //       // height: $input-height;
+
+      //       border-color: transparent;
+      //       border-radius: 35px 0px 0px 35px;
+      //     }
+
+      //     &::after {
+      //       // stylelint-disable-next-line property-blacklist
+      //       // width: 20px;
+      //       // height: 20px;
+      //       // border-radius: 10px;
+      //     }
+      //   }
+
+      //   .custom-control-input:checked ~ .custom-control-label {
+      //     &::after {
+      //       width: 20px;
+      //       height: 20px;
+      //       transform: translateX(20px);
+      //     }
+      //   }
+
+      //   .custom-control-input:disabled {
+      //     &:checked ~ .custom-control-label::before {
+      //       background-color: pink;
+      //     }
+      //   }
+      // }
+      //kokomade
+
       .input-group-addon {
         padding: 2px 8px;
         line-height: 1em;
@@ -131,8 +179,10 @@ body.on-edit {
           vertical-align: middle;
         }
       }
+
       .form-control {
         width: 80px;
+        border: transparent;
         @include media-breakpoint-up(sm) {
           width: 130px;
         }

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -88,4 +88,4 @@ $pre-color: dummyinvalildcolor; // disable pre color specification with invalid
 //== Custom Checkbox
 $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;
-$custom-control-indicator-size: 1.2rem;
+$custom-control-indicator-size: 2.2rem;

src/client/styles/scss/atoms/_custom_control.scss

@@ -32,3 +32,36 @@ label.custom-control-label {
     }
   }
 }
+
+//slack
+
+.custom-switch.custom-switch-slack {
+  $custom-control-indicator-size-slack: $custom-control-indicator-size * 1.5;
+  $custom-switch-width-slack: $custom-control-indicator-size-slack * 1.75;
+  $custom-control-gutter-slack: $custom-control-gutter * 1.5;
+  $custom-control-indicator-size-slack: $custom-control-indicator-size * 1.5;
+  $custom-switch-indicator-size-slack: subtract($custom-control-indicator-size-slack, $custom-control-indicator-border-width * 4);
+
+  padding-left: $custom-switch-width-slack + $custom-control-gutter-slack;
+
+  .custom-control-label {
+    &::before {
+      left: -($custom-switch-width-slack + $custom-control-gutter-slack);
+      width: $custom-switch-width-slack;
+      height: $custom-control-indicator-size-slack;
+    }
+
+    &::after {
+      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+      left: add(-($custom-switch-width-slack + $custom-control-gutter-slack), $custom-control-indicator-border-width * 2);
+      width: $custom-switch-indicator-size-slack;
+      height: $custom-switch-indicator-size-slack;
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      transform: translateX($custom-switch-width-slack - $custom-control-indicator-size-slack);
+    }
+  }
+}

src/client/styles/scss/theme/_apply-colors.scss

@@ -327,6 +327,24 @@ body.on-edit {
     .page-editor-footer {
       border-top-color: $border-color-theme;
     }
+    .grw-slack-notification {
+      background-color: white;
+      border-color: $bordercolor-nav-tabs;
+      $color-slack: #4b144c;
+      .custom-control-label {
+        &::before {
+          background-color: lighten($color-slack, 60%);
+        }
+        &::after {
+          background-color: white;
+        }
+      }
+      .custom-control-input:checked ~ .custom-control-label {
+        &::before {
+          background-color: $gray-400;
+        }
+      }
+    }
   }
 
   .grw-editor-navbar-bottom {