Merge pull request #2889 from weseek/imprv/slackbutton-design-fb

Slackボタンのデザインの当て（デザインチェックFB対応）

src/client/js/components/SlackNotification.jsx

@@ -49,12 +49,12 @@ class SlackNotification extends React.Component {
                 checked={this.props.isSlackEnabled}
                 onChange={this.updateCheckboxHandler}
               />
-              <label className={`custom-control-label align-center ${this.props.popUp ? 'mt-1' : ''}`} htmlFor={this.props.id}>
+              <label className="custom-control-label align-center" htmlFor={this.props.id}>
               </label>
             </div>
           </label>
           <input
-            className="grw-form-control-slack-notification form-control align-top"
+            className="grw-form-control-slack-notification form-control align-top pl-0"
             type="text"
             value={this.props.slackChannels}
             placeholder="Input channels"

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

@@ -1,5 +1,5 @@
 .grw-slack-notification {
-  $input-height-slack: 24px;
+  $input-height-slack: $custom-control-indicator-size * 1.5;
   border-color: $gray-200;
 
   border-style: solid;
@@ -23,6 +23,18 @@
   }
   .grw-input-group-slack-notification {
     height: $input-height-slack;
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+  }
+
+  .custom-control-label {
+    &::before {
+      border: transparent;
+    }
   }
 }
 //　TODO デザインの使用が確定して実装、本タスクのスコープ外

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

@@ -36,6 +36,10 @@ $table-hover-bg: $bgcolor-table-hover;
   background-color: $bgcolor-global;
 }
 
+.form-control::placeholder {
+  color: darken($bgcolor-global, 20%);
+}
+
 .form-control[disabled],
 .form-control[readonly] {
   color: lighten($color-global, 10%);