FB対応

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

@@ -69,7 +69,7 @@ const EditorNavbarBottom = (props) => {
               slackChannels={props.editorContainer.state.slackChannels}
               onEnabledFlagChange={slackEnabledFlagChangedHandler}
               onChannelChange={slackChannelsChangedHandler}
-              id="idForSavePageControl"
+              id="idForSlackNotification"
               popUp
             />
           </nav>
@@ -100,16 +100,12 @@ const EditorNavbarBottom = (props) => {
                 slackChannels={props.editorContainer.state.slackChannels}
                 onEnabledFlagChange={slackEnabledFlagChangedHandler}
                 onChannelChange={slackChannelsChangedHandler}
-                id="idForSavePageControl"
+                id="idForSlackNotification"
                 popUp={false}
               />
             </div>
           ))}
-          <SavePageControls
-            smallScreen={isDeviceSmallerThanMd}
-            click={() => (setSlackExpanded(!isSlackExpanded))}
-            slackOnly={false}
-          />
+          <SavePageControls />
           { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
         </form>
       </div>

src/client/js/components/SlackNotification.jsx

@@ -39,7 +39,7 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification w-100">
-        <div className="grw-navbar-bottom-slack input-group extended-setting">
+        <div className="grw-input-group-slack-notification input-group extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
@@ -54,7 +54,7 @@ class SlackNotification extends React.Component {
             </div>
           </label>
           <input
-            className="grw-navbar-bottom-slack form-control align-top"
+            className="grw-form-control-slack-notification form-control align-top"
             type="text"
             value={this.props.slackChannels}
             placeholder="Input channels"

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

@@ -17,9 +17,12 @@
     }
   }
   // height settings for slack button's responsive design
-  // in the input element
-  .grw-navbar-bottom-slack {
-    height: 24px;
+  // in the input and form-control element
+  .grw-form-control-slack-notification {
+    height: $input-height-slack;
+  }
+  .grw-input-group-slack-notification {
+    height: $input-height-slack;
   }
 }
 //　TODO デザインの使用が確定して実装、本タスクのスコープ外