GW-3620 realized responsive design initially

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

@@ -51,7 +51,7 @@ const EditorNavbarBottom = (props) => {
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
         <form className="form-inline ml-auto">
-          <SavePageControls />
+          <SavePageControls isDeviceSmallerThanMd={isDeviceSmallerThanMd} />
           { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
         </form>
       </div>

src/client/js/components/SavePageControls.jsx

@@ -93,6 +93,7 @@ class SavePageControls extends React.Component {
               onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
               onChannelChange={this.slackChannelsChangedHandler}
               id="idForSavePageControl"
+              smallScreen={this.props.isDeviceSmallerThanMd}
             />
           </div>
           )
@@ -135,6 +136,7 @@ const SavePageControlsWrapper = withUnstatedContainers(SavePageControls, [AppCon
 
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  isDeviceSmallerThanMd: PropTypes.bool.isRequired,
 
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,

src/client/js/components/SlackNotification.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Collapse } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 
 /**
@@ -19,6 +20,7 @@ class SlackNotification extends React.Component {
 
     this.updateCheckboxHandler = this.updateCheckboxHandler.bind(this);
     this.updateSlackChannelsHandler = this.updateSlackChannelsHandler.bind(this);
+    this.state = { isExpanded: false };
   }
 
   updateCheckboxHandler(event) {
@@ -35,7 +37,7 @@ class SlackNotification extends React.Component {
     }
   }
 
-  render() {
+  getSlackNormal() {
     const { t } = this.props;
 
     return (
@@ -69,6 +71,45 @@ class SlackNotification extends React.Component {
         </div>
       </div>
     );
+
+  }
+
+  setExpanded= (value) => {
+    this.setState({ isExpanded: value });
+  }
+
+  /*
+Note to myself:
+The collapse stuff worked, but it should be put in the EditorNavbarBottom level of rendering. The state should be
+lifted and button here would only be a trigger for the function at the parrent level. The passed down props would only
+affect the rendering of the banner itself.
+*/
+  getSlackButton() {
+    return (
+      <div className="grw-slack-notification">
+        <button
+          type="button"
+          onClick={() => this.setExpanded(!this.state.isExpanded)}
+        >
+          <i className="icon-arrow-up"></i>
+        </button>
+        <Collapse isOpen={this.state.isExpanded}>
+          <div className="px-2"> {/* set padding for border-top */}
+            <div className="navbar navbar-expand border-top px-0">
+              <form className="form-inline ml-auto">
+                {this.getSlackNormal()}
+              </form>
+            </div>
+          </div>
+        </Collapse>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      this.props.smallScreen ? this.getSlackButton() : this.getSlackNormal()
+    );
   }
 
 }
@@ -76,6 +117,7 @@ class SlackNotification extends React.Component {
 SlackNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
+  smallScreen: PropTypes.bool.isRequired,
   isSlackEnabled: PropTypes.bool.isRequired,
   slackChannels: PropTypes.string.isRequired,
   onEnabledFlagChange: PropTypes.func,