adjust checkbox scss

resource/js/components/PageComment/CommentForm.js

@@ -242,19 +242,13 @@ export default class CommentForm extends React.Component {
 
 
                   <div style={{flex: 1}}></div>{/* spacer */}
-                  <div className="input-group-addon">
-                    <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
-                    <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
-                    <input className="comment-notif" type="checkbox" name="pageForm[notify][slack][on]" value="1"/>
-                  </div>
-                  <input className="comment-slack-channel" type="text" name="pageForm[notify][slack][channel]" value="" placeholder="slack-channel-name"
-                  id="comment-form-slack-channel"
-                  data-toggle="popover"
-                  title="Slack通知"
-                  data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
-                  data-trigger="focus"
-                  data-placement="top"
-                  />
+                    <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
+                      <label title="Slack通知">
+                        <input className="comment-notif" type="checkbox" name="pageForm[notify][slack][on]" value="1"/>
+                        <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="22" height="22"/>
+                        <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="22" height="22"/>
+                      </label>
+                    </span>
                     { this.state.errorMessage &&
                       <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
                     }

resource/styles/scss/_comment_growi.scss

@@ -104,5 +104,14 @@
         height: 180px;
       }
     }
+
+          // slack
+          .input-group-slack {
+              padding: 4px 6px;
+              line-height: 1em;
+              img, input {
+                vertical-align: middle;
+              }
+          }
   }
 }