Ui improvements (#3963)

* PLT-4061 - Updating pdf preview pages message

* PLT-4063 - Fixing spacing for LDAP button

* PLT-3837 - Showing reply button on mobile in the RHS

* PLT-4046 - Cantering tutorial on older mobile versions

webapp/components/admin_console/ldap_test_button.jsx

@@ -66,28 +66,32 @@ export default class LdapTestButton extends React.Component {
         let message = null;
         if (this.state.fail) {
             message = (
-                <div className='alert alert-warning'>
+                <div>
-                    <i className='fa fa-warning'/>
+                    <div className='alert alert-warning'>
-                    <FormattedMessage
+                        <i className='fa fa-warning'/>
-                        id='admin.ldap.testFailure'
+                        <FormattedMessage
-                        defaultMessage='LDAP Test Failure: {error}'
+                            id='admin.ldap.testFailure'
-                        values={{
+                            defaultMessage='LDAP Test Failure: {error}'
-                            error: this.state.fail
+                            values={{
-                        }}
+                                error: this.state.fail
-                    />
+                            }}
+                        />
+                    </div>
                 </div>
             );
         } else if (this.state.success) {
             message = (
-                <div className='alert alert-success'>
+                <div>
-                    <i className='fa fa-success'/>
+                    <div className='alert alert-success'>
-                    <FormattedMessage
+                        <i className='fa fa-success'/>
-                        id='admin.ldap.testSuccess'
+                        <FormattedMessage
-                        defaultMessage='LDAP Test Successful'
+                            id='admin.ldap.testSuccess'
-                        values={{
+                            defaultMessage='LDAP Test Successful'
-                            error: this.state.fail
+                            values={{
-                        }}
+                                error: this.state.fail
-                    />
+                            }}
+                        />
+                    </div>
                 </div>
             );
         }

webapp/components/pdf_preview.jsx

@@ -164,12 +164,15 @@ export default class PDFPreview extends React.Component {
 
         if (this.state.pdf.numPages > MAX_PDF_PAGES) {
             pdfCanvases.push(
-                <div className='pdf-max-pages'>
+                <a
+                    href={this.props.fileUrl}
+                    className='pdf-max-pages'
+                >
                     <FormattedMessage
                         id='pdf_preview.max_pages'
-                        defaultMessage='PDF previews only show the first five pages.'
+                        defaultMessage='Download to read more pages'
                     />
-                </div>
+                </a>
             );
         }
 

webapp/i18n/en.json

@@ -1496,7 +1496,7 @@
   "password_send.link": "<p>A password reset link has been sent to <b>{email}</b></p>",
   "password_send.reset": "Reset my password",
   "password_send.title": "Password Reset",
-  "pdf_preview.max_pages": "PDF previews only show the first five pages.",
+  "pdf_preview.max_pages": "Download to read more pages",
   "pending_post_actions.cancel": "Cancel",
   "pending_post_actions.retry": "Retry",
   "permalink.error.access": "Permalink belongs to a deleted message or to a channel to which you do not have access.",

webapp/sass/components/_files.scss

@@ -139,8 +139,9 @@
 }
 
 .pdf-max-pages {
-    bottom: 0;
     background: $white;
+    bottom: 0;
+    display: block;
     left: 0;
     position: relative;
     width: 100%;

webapp/sass/responsive/_mobile.scss

@@ -138,6 +138,10 @@
             display: none;
             visibility: visible;
 
+            .sidebar--right & {
+                display: inline-block;
+            }
+
             &.icon--show {
                 display: inline-block;
             }
@@ -1159,6 +1163,14 @@
 }
 
 @media screen and (max-width: 320px) {
+    .tutorial-steps__container {
+        .tutorial__content {
+            .tutorial__steps {
+                padding: 0 20px;
+                width: 100%;
+            }
+        }
+    }
     .tip-overlay {
         &.tip-overlay--sidebar {
             min-height: 440px;

webapp/sass/routes/_admin-console.scss

@@ -52,6 +52,12 @@
         }
     }
 
+    .btn {
+        &.btn-spacing--right {
+            margin-right: 10px;
+        }
+    }
+
     .log__panel {
         background-color: white;
         border: 1px solid #ddd;