Merge pull request #2818 from weseek/add-darkmode-for-xs-design

Add darkmode for xs design

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

@@ -86,12 +86,13 @@ const EditorNavbarBottom = (props) => {
           {/* Button or the normal Slack banner */}
           {hasSlackConfig && (isDeviceSmallerThanMd ? (
             <Button
-              color="white"
-              className="border mr-2"
+              className="grw-btn-slack border mr-2"
               onClick={() => (setSlackExpanded(!isSlackExpanded))}
             >
-              <SlackLogo />
-              <span className="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,14 +6,14 @@ const SlackLogo = () => (
     viewBox="0 0 448 448"
     height="20"
     width="20"
-    fill="purple"
   >
-    <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,22 @@ ul.pagination {
   }
 }
 
+.grw-slack-logo svg {
+  fill: #dd80de;
+}
+
+.grw-btn-slack {
+  background-color: black;
+  &:focus,
+  &:hover {
+    background-color: black;
+  }
+}
+
+.grw-btn-slack-triangle {
+  color: $secondary;
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -191,6 +191,23 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.grw-slack-logo svg {
+  fill: #af30b0;
+}
+
+.grw-btn-slack {
+  background-color: white;
+
+  &:hover,
+  &:focus {
+    background-color: white;
+  }
+}
+
+.grw-btn-slack-triangle {
+  color: $secondary;
+}
+
 /*
  * GROWI HandsontableModal
  */