The variables of slack were not organized, so I organized them.

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

@@ -291,6 +291,10 @@ body.on-edit {
   }
 }
 
+
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: transparent;
   $color-slack: #4b144c;
@@ -315,24 +319,24 @@ body.on-edit {
       background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
     }
   }
-}
-
-.grw-slack-logo svg {
-  fill: #dd80de;
-}
+  .grw-slack-logo svg {
+    fill: #dd80de;
+  }
 
-.grw-btn-slack {
-  background-color: black;
-  &:focus,
-  &:hover {
+  .grw-btn-slack {
     background-color: black;
+    &:focus,
+    &:hover {
+      background-color: black;
+    }
   }
-}
 
-.grw-btn-slack-triangle {
-  color: $secondary;
+  .grw-btn-slack-triangle {
+    color: $secondary;
+  }
 }
 
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -206,6 +206,9 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: white;
   $color-slack: #4b144c;
@@ -228,23 +231,22 @@ $table-hover-bg: $bgcolor-table-hover;
       background-image: url(/images/icons/slack/slack-logo-on.svg);
     }
   }
-}
-
-.grw-slack-logo svg {
-  fill: #af30b0;
-}
-
-.grw-btn-slack {
-  background-color: white;
+  .grw-slack-logo svg {
+    fill: #af30b0;
+  }
 
-  &:hover,
-  &:focus {
+  .grw-btn-slack {
     background-color: white;
+
+    &:hover,
+    &:focus {
+      background-color: white;
+    }
   }
-}
 
-.grw-btn-slack-triangle {
-  color: $secondary;
+  .grw-btn-slack-triangle {
+    color: $secondary;
+  }
 }
 
 /*