adjust PageStatusAlert layout

src/client/js/components/PageStatusAlert.jsx

@@ -37,14 +37,14 @@ class PageStatusAlert extends React.Component {
   renderSomeoneEditingAlert() {
     const { t } = this.props;
     return (
-      <div className="card grw-page-status-alert text-white text-center bg-success d-hackmd-none fixed-bottom">
+      <div className="card grw-page-status-alert text-white bg-success d-hackmd-none fixed-bottom">
         <div className="card-body">
-          <p className="card-text">
+          <p className="card-text grw-card-label-container">
             <i className="icon-fw icon-people"></i>
             {t('hackmd.someone_editing')}
           </p>
-          <p className="card-text">
-            <a href="#hackmd" className="btn btn-lg btn-outline-white">
+          <p className="card-text grw-card-btn-container">
+            <a href="#hackmd" className="btn btn-outline-white">
               <i className="fa fa-fw fa-file-text-o"></i>
               Open HackMD Editor
             </a>
@@ -57,14 +57,14 @@ class PageStatusAlert extends React.Component {
   renderDraftExistsAlert(isRealtime) {
     const { t } = this.props;
     return (
-      <div className="card grw-page-status-alert text-white text-center bg-success d-hackmd-none fixed-bottom">
+      <div className="card grw-page-status-alert text-white bg-success d-hackmd-none fixed-bottom">
         <div className="card-body">
-          <p className="card-text">
+          <p className="card-text grw-card-label-container">
             <i className="icon-fw icon-pencil"></i>
             {t('hackmd.this_page_has_draft')}
           </p>
-          <p className="card-text">
-            <a href="#hackmd" className="btn btn-lg btn-outline-white">
+          <p className="card-text grw-card-btn-container">
+            <a href="#hackmd" className="btn btn-outline-white">
               <i className="fa fa-fw fa-file-text-o"></i>
               Open HackMD Editor
             </a>
@@ -80,14 +80,14 @@ class PageStatusAlert extends React.Component {
     const label2 = t('Load latest');
 
     return (
-      <div className="card grw-page-status-alert text-white text-center bg-warning fixed-bottom">
+      <div className="card grw-page-status-alert text-white bg-warning fixed-bottom">
         <div className="card-body">
-          <p className="card-text">
+          <p className="card-text grw-card-label-container">
             <i className="icon-fw icon-bulb"></i>
             {this.props.pageContainer.state.lastUpdateUsername} {label1}
           </p>
-          <p className="card-text">
-            <a href="#" className="btn btn-lg btn-outline-white" onClick={this.refreshPage}>
+          <p className="card-text grw-card-btn-container">
+            <a href="#" className="btn btn-outline-white" onClick={this.refreshPage}>
               <i className="icon-fw icon-reload"></i>
               {label2}
             </a>
@@ -120,6 +120,8 @@ class PageStatusAlert extends React.Component {
       content = this.renderDraftExistsAlert();
     }
 
+    content = this.renderUpdatedAlert();
+
     return content;
   }
 

src/client/styles/scss/_page.scss

@@ -182,13 +182,38 @@
 
 .card.grw-page-status-alert {
   $margin-bottom: $grw-navbar-bottom-height + 10px;
-  margin: 0 10px $margin-bottom;
 
-  box-shadow: 0 2px 5px 2px #0004;
+  box-shadow: 0px 2px 4px #0000004d;
   opacity: 0.9;
 
+  @include media-breakpoint-down(sm) {
+    margin: 0 10px $margin-bottom;
+
+    .grw-card-label-container {
+      text-align: center;
+    }
+    .grw-card-btn-container {
+      text-align: center;
+
+      .btn {
+        @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+      }
+    }
+  }
+
   @include media-breakpoint-up(md) {
-    width: 420px;
+    width: 700px;
     margin: 0 auto $margin-bottom;
+
+    .card-body {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .grw-card-label-container,
+    .grw-card-btn-container {
+      margin: 0;
+    }
   }
 }