centered publish-disabled message

client/build/containers/PublishDisabledMessage/view.js

@@ -40,11 +40,15 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       var message = this.props.message;
-      return _react.default.createElement("div", null, _react.default.createElement("p", {
+      return _react.default.createElement("div", {
+        className: 'publish-disabled-message'
+      }, _react.default.createElement("div", {
+        className: 'message'
+      }, _react.default.createElement("p", {
         className: 'text--secondary'
       }, "Publishing is currently disabled."), _react.default.createElement("p", {
         className: 'text--secondary'
-      }, message));
+      }, message)));
     }
   }]);
 

client/scss/all.scss

@@ -40,6 +40,7 @@
 @import 'containers/_dropzone';
 @import 'containers/_publish-url-input';
 @import 'containers/_publish-status';
+@import 'containers/_publish-disabled-message';
 
 @import '_media-queries';
 

client/scss/containers/_publish-disabled-message.scss

@@ -0,0 +1,11 @@
+.publish-disabled-message {
+  // fill the parent flex container
+  flex: 1 0 auto;
+  // be a flex container for children
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .message {
+    text-align: center;
+  }
+}

client/src/containers/PublishDisabledMessage/view.jsx

@@ -4,9 +4,11 @@ class PublishDisabledMessage extends React.Component {
   render () {
     const message = this.props.message;
     return (
-      <div>
-        <p className={'text--secondary'}>Publishing is currently disabled.</p>
-        <p className={'text--secondary'}>{message}</p>
+      <div className={'publish-disabled-message'}>
+        <div className={'message'}>
+          <p className={'text--secondary'}>Publishing is currently disabled.</p>
+          <p className={'text--secondary'}>{message}</p>
+        </div>
       </div>
     );
   }