Deleted the description for testing.

src/client/js/components/SlackNotification.jsx

@@ -39,22 +39,19 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="form-group grw-slack-notification">
+      <div className="grw-slack-notification">
         <div className="input-group input-group-sm extended-setting">
           <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" />
+              <input
+                type="checkbox"
+                className="custom-control-input border-0"
+                id="slackSwitch"
+                checked={this.props.isSlackEnabled}
+                onChange={this.updateCheckboxHandler}
+              />
               <label className="custom-control-label" htmlFor="slackSwitch">
-                {/* <i className="fab fa-slack text-danger"></i> */}
               </label>
             </div>
           </label>

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

@@ -123,7 +123,6 @@ body.on-edit {
     height: $grw-editor-navbar-bottom-height;
 
     .grw-slack-notification {
-      white-space: nowrap !important;
       border-style: solid;
       border-width: 1px;
       border-radius: 16px;
@@ -135,12 +134,12 @@ body.on-edit {
 
       .custom-control-label {
         &::after {
-          background-image: url(/images/icons/editor/slack-logo-on.svg);
+          background-image: url(/images/icons/slack/slack-logo-on.svg);
         }
       }
       .custom-control-input:checked ~ .custom-control-label {
         &::after {
-          background-image: url(/images/icons/editor/slack-logo-off.svg);
+          background-image: url(/images/icons/slack/slack-logo-off.svg);
         }
       }
 

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

@@ -35,37 +35,6 @@ 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);
-//     }
-//   }
-// }
-
 .grw-slack-notification {
   $custom-control-indicator-size-slack: 2rem; //size shitei