fix fb

src/client/js/components/SlackNotification.jsx

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

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

@@ -119,6 +119,11 @@ body.on-edit {
     line-height: 1em;
   }
 
+  .grw-slack-notification {
+    background-color: white;
+    border-color: $gray-200;
+  }
+
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
 

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

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

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

@@ -328,8 +328,6 @@ body.on-edit {
       border-top-color: $border-color-theme;
     }
     .grw-slack-notification {
-      background-color: white;
-      border-color: $gray-200;
       $color-slack: #4b144c;
       .custom-control-label {
         &::before {