Delete test description.

src/client/js/components/SlackNotification.jsx

@@ -40,9 +40,8 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification">
-        <div className="input-group input-group-sm extended-setting">
+        <div className="input-group  extended-setting">
           <label className="input-group-addon">
-            {/* slack redesign area */}
             <div className="custom-control custom-switch ">
               <input
                 type="checkbox"
@@ -54,7 +53,6 @@ class SlackNotification extends React.Component {
               <label className="custom-control-label" htmlFor="slackSwitch">
               </label>
             </div>
-            {/* slack redesign area end */}
 
           </label>
           <input

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

@@ -121,17 +121,13 @@ body.on-edit {
 
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
-    //slack redesign area
+
     .grw-slack-notification {
-      $custom-select-height-slack: 2rem;
+      $input-height-slack: 1.8rem;
+
       border-style: solid;
       border-width: 1px;
-      border-radius: $input-height-sm/2 0 0 $input-height-sm/2;
-
-      .input-group-addon {
-        padding: 0px !important;
-        border-radius: 2px;
-      }
+      border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
 
       .custom-control-label {
         &::after {
@@ -146,16 +142,14 @@ body.on-edit {
       }
 
       .input-group-addon {
-        padding: 2px 8px;
-        line-height: 1em;
-        img,
         input {
           vertical-align: middle;
         }
       }
-      //slack redesign area end
+
       .form-control {
         width: 80px;
+        height: $input-height-slack;
         border: transparent;
         @include media-breakpoint-up(sm) {
           width: 130px;

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

@@ -90,6 +90,3 @@ $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;
 $custom-control-indicator-size: 1.2rem;
 
-
-// test kesu warning kesu warning
-$input-height-sm:1.8rem;

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

@@ -33,62 +33,41 @@ label.custom-control-label {
   }
 }
 
-//slack btn
+//lg
 
 .grw-slack-notification {
-  $custom-control-indicator-size-slack: 1.8rem; //size shitei
-
-  //from _variables.scss of bs4
-  $custom-switch-width: $custom-control-indicator-size-slack * 1.75;
-  $custom-switch-indicator-border-radius: $custom-control-indicator-size-slack / 2;
-  $custom-switch-indicator-size: subtract($custom-control-indicator-size-slack, $custom-control-indicator-border-width * 4);
-
-  //base class from _custom-forms.scss of bs4
-  .custom-control {
-    padding-left: $custom-control-gutter + $custom-control-indicator-size-slack;
-  }
-  .custom-control-input {
-    width: $custom-control-indicator-size-slack;
-    height: ($font-size-base * $line-height-base + $custom-control-indicator-size-slack) / 2 !important;
-  }
-  //base end
-
   .custom-switch {
-    padding-left: $custom-switch-width + $custom-control-gutter;
+    $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-slack) / 2;
-        left: -($custom-switch-width + $custom-control-gutter);
-        width: $custom-switch-width;
-        height: $custom-control-indicator-size-slack;
-        pointer-events: all;
-        // stylelint-disable-next-line property-blacklist
-        border-radius: $custom-switch-indicator-border-radius;
+        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-slack) / 2, $custom-control-indicator-border-width * 2);
-        left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
-        width: $custom-switch-indicator-size;
-        height: $custom-switch-indicator-size;
-        background-color: $custom-control-indicator-border-color;
-        // stylelint-disable-next-line property-blacklist
-        border-radius: $custom-switch-indicator-border-radius;
-        @include transition(transform 0.15s ease-in-out, $custom-forms-transition);
+        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 {
-        background-color: $custom-control-indicator-bg;
-        transform: translateX($custom-switch-width - $custom-control-indicator-size-slack);
-      }
-    }
-
-    .custom-control-input:disabled {
-      &:checked ~ .custom-control-label::before {
-        background-color: $custom-control-indicator-checked-disabled-bg;
+        transform: translateX($custom-switch-width-lg - $custom-control-indicator-size-lg);
       }
     }
   }