Merge pull request #2733 from weseek/add-dark-mode-for-slack-button

Add dark mode for slack button

public/images/icons/slack/slack-logo-dark-off.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#9BA5AF;}</style>
+  </defs>
+  <path class="cls-1" 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>

public/images/icons/slack/slack-logo-dark-on.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448">
+  <defs>
+    <style>.cls-1{fill:#DD80DE;}</style>
+  </defs>
+  <path class="cls-1" 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/js/components/PageComment/CommentEditor.jsx

@@ -346,6 +346,8 @@ class CommentEditor extends React.Component {
             </label>
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{ this.state.errorMessage && errorMessage }</span>
+
+            {/* TODO コメント機能のとき、Slackボタンが適用しない問題は別タスク(gw 3282 slack button)に回す。Dark Mode 対応を先行する。 */}
             { this.state.hasSlackConfig
               && (
               <div className="form-inline align-self-center mr-md-2">

src/client/styles/scss/atoms/_custom_control.scss

@@ -79,20 +79,9 @@ label.custom-control-label {
       border-color: transparent;
     }
     &::after {
-      background-color: white;
-      background-image: url(/images/icons/slack/slack-logo-off.svg);
       background-size: 15px;
     }
   }
-  .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      background-color: lighten($color-slack, 60%);
-    }
-    &::after {
-      background-image: url(/images/icons/slack/slack-logo-on.svg);
-    }
-  }
-
   .input-group-addon {
     input {
       vertical-align: middle;

src/client/styles/scss/molecules/slack-notification.scss

@@ -1,6 +1,5 @@
 .grw-slack-notification {
   $input-height-slack: 1.8rem;
-  background-color: white;
   border-color: $gray-200;
 
   border-style: solid;

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

@@ -232,6 +232,32 @@ ul.pagination {
   }
 }
 
+.grw-slack-notification {
+  background-color: transparent;
+  $color-slack: #4b144c;
+
+  .custom-control-label {
+    &::before {
+      background-color: $secondary;
+      border-color: transparent;
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 10%);
+    }
+    &::after {
+      background-color: darken($color-slack, 5%);
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */

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

@@ -167,6 +167,30 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.grw-slack-notification {
+  background-color: white;
+  $color-slack: #4b144c;
+
+  .custom-control-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
+    &::after {
+      background-color: white;
+      background-image: url(/images/icons/slack/slack-logo-off.svg);
+    }
+  }
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      background-color: lighten($color-slack, 60%);
+    }
+    &::after {
+      background-image: url(/images/icons/slack/slack-logo-on.svg);
+    }
+  }
+}
+
 /*
  * GROWI HandsontableModal
  */