add grw-slack-notification-sm btn triangle

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -86,11 +86,11 @@ const EditorNavbarBottom = (props) => {
           {/* Button or the normal Slack banner */}
           {hasSlackConfig && (isDeviceSmallerThanMd ? (
             <Button
-              className="grw-slack-notification-sm border mr-2"
+              className="grw-slack-btn-sm border mr-2"
               onClick={() => (setSlackExpanded(!isSlackExpanded))}
             >
-              <SlackLogo />
-              <span className="fa fa-caret-up ml-2"></span>
+              <SlackLogo className="grw-slack-notification-sm" />
+              <span className="grw-slack-btn-triangle fa fa-caret-up ml-2"></span>
             </Button>
           ) : (
             <div className="mr-2">

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

@@ -259,11 +259,16 @@ ul.pagination {
 }
 
 .grw-slack-notification-sm {
-  background-color: $secondary;
-  border-color: transparent;
   fill: #dd80de;
 }
 
+.grw-slack-btn-sm {
+}
+
+.grw-slack-btn-triangle {
+  color: #505050;
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -192,11 +192,21 @@ $table-hover-bg: $bgcolor-table-hover;
 }
 
 .grw-slack-notification-sm {
-  background-color: $light;
-  border-color: transparent;
   fill: purple;
 }
 
+.grw-slack-btn-sm {
+  background-color: white;
+}
+
+.grw-slack-btn-sm:hover {
+  background-color: white;
+}
+
+.grw-slack-btn-triangle {
+  color: gray;
+}
+
 /*
  * GROWI HandsontableModal
  */