add .grw-custom-switch-slack

src/client/js/components/SlackNotification.jsx

@@ -39,7 +39,7 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="grw-slack-notification">
+      <div className="grw-slack-notification grw-custom-switch-slack">
         <div className="input-group  extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg">

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

@@ -122,44 +122,6 @@ body.on-edit {
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
 
-    .grw-slack-notification {
-      $input-height-slack: 1.8rem;
-
-      border-style: solid;
-      border-width: 1px;
-      border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
-
-      .custom-control-label {
-        &::after {
-          background-image: url(/images/icons/slack/slack-logo-off.svg);
-          background-size: 15px;
-        }
-      }
-      .custom-control-input:checked ~ .custom-control-label {
-        &::after {
-          background-image: url(/images/icons/slack/slack-logo-on.svg);
-        }
-      }
-
-      .input-group-addon {
-        input {
-          vertical-align: middle;
-        }
-      }
-
-      .form-control {
-        width: 80px;
-        height: $input-height-slack;
-        border: transparent;
-        @include media-breakpoint-up(sm) {
-          width: 130px;
-        }
-        @include media-breakpoint-up(md) {
-          width: 180px;
-        }
-      }
-    }
-
     .grw-grant-selector {
       @include media-breakpoint-down(sm) {
         .btn .label {

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

@@ -34,7 +34,6 @@ label.custom-control-label {
 }
 
 //lg
-
 .grw-slack-notification {
   .custom-switch.custom-switch-lg {
     $custom-control-indicator-size-lg: $custom-control-indicator-size * 1.5;
@@ -72,3 +71,41 @@ label.custom-control-label {
     }
   }
 }
+
+.grw-custom-switch-slack {
+  $input-height-slack: 1.8rem;
+
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
+
+  .custom-control-label {
+    &::after {
+      background-image: url(/images/icons/slack/slack-logo-off.svg);
+      background-size: 15px;
+    }
+  }
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-image: url(/images/icons/slack/slack-logo-on.svg);
+    }
+  }
+
+  .input-group-addon {
+    input {
+      vertical-align: middle;
+    }
+  }
+
+  .form-control {
+    width: 80px;
+    height: $input-height-slack;
+    border: transparent;
+    @include media-breakpoint-up(sm) {
+      width: 130px;
+    }
+    @include media-breakpoint-up(md) {
+      width: 180px;
+    }
+  }
+}