change name and wrap slack-logo

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

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

src/client/js/components/SlackLogo.jsx

@@ -6,7 +6,6 @@ const SlackLogo = () => (
     viewBox="0 0 448 448"
     height="20"
     width="20"
-    className="grw-slack-notification-sm"
   >
     <path
       d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,

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

@@ -258,19 +258,23 @@ ul.pagination {
   }
 }
 
-.grw-slack-notification-sm {
+.grw-slack-logo svg {
   fill: #dd80de;
 }
 
-.grw-slack-btn-sm {
+.grw-btn-slack {
   background-color: black;
 }
 
-.grw-slack-btn-sm:focus {
+.grw-btn-slack:focus {
   background-color: black;
 }
 
-.grw-slack-btn-triangle {
+.grw-btn-slack:hover {
+  background-color: black;
+}
+
+.grw-btn-slack-triangle {
   color: $secondary;
 }
 

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

@@ -191,23 +191,23 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
-.grw-slack-notification-sm {
+.grw-slack-logo svg {
   fill: #af30b0;
 }
 
-.grw-slack-btn-sm {
+.grw-btn-slack {
   background-color: white;
 }
 
-.grw-slack-btn-sm:hover {
+.grw-btn-slack:hover {
   background-color: white;
 }
 
-.grw-slack-btn-sm:focus {
+.grw-btn-slack:focus {
   background-color: white;
 }
 
-.grw-slack-btn-triangle {
+.grw-btn-slack-triangle {
   color: $secondary;
 }