change color (light, dark)

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

@@ -86,8 +86,7 @@ const EditorNavbarBottom = (props) => {
           {/* Button or the normal Slack banner */}
           {hasSlackConfig && (isDeviceSmallerThanMd ? (
             <Button
-              color="white"
-              className="border mr-2"
+              className="grw-slack-notification-sm border mr-2"
               onClick={() => (setSlackExpanded(!isSlackExpanded))}
             >
               <SlackLogo />

src/client/js/components/SlackLogo.jsx

@@ -7,13 +7,15 @@ const SlackLogo = () => (
     height="20"
     width="20"
     fill="purple"
+    className="grw-slack-notification-sm"
   >
-    <path d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,
-    0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,
-    47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,
-    0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,
-    47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,
-    0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"
+    <path
+      d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,
+      0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,
+      47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,
+      0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,
+      47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,
+      0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z"
     />
   </svg>
 );

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

@@ -258,6 +258,11 @@ ul.pagination {
   }
 }
 
+.grw-slack-notification-sm {
+  background-color: $secondary;
+  border-color: transparent;
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -191,6 +191,11 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.grw-slack-notification-sm {
+  background-color: $light;
+  border-color: transparent;
+}
+
 /*
  * GROWI HandsontableModal
  */