Improving compliance stuff (#2963)

* Improving compliance stuff

* Fixing padding on mobile

7 files changed, 169 insertions, 130 deletions

diff --git a/webapp/components/admin_console/audits.jsx b/webapp/components/admin_console/audits.jsx
index 1f94de7da..cb500f29c 100644
--- a/webapp/components/admin_console/audits.jsx
+++ b/webapp/components/admin_console/audits.jsx
@@ -75,24 +75,25 @@ export default class Audits extends React.Component {
             <div>
                 <ComplianceReports/>
 
-                <div className='panel'>
+                <div className='panel audit-panel'>
                     <h3>
                         <FormattedMessage
                             id='admin.audits.title'
-                            defaultMessage='User Activity'
+                            defaultMessage='User Activity Logs'
                         />
+                        <button
+                            type='submit'
+                            className='btn btn-link pull-right'
+                            onClick={this.reload}
+                        >
+                            <i className='fa fa-refresh'></i>
+                            <FormattedMessage
+                                id='admin.audits.reload'
+                                defaultMessage='Reload User Activity Logs'
+                            />
+                        </button>
                     </h3>
-                    <button
-                        type='submit'
-                        className='btn btn-primary'
-                        onClick={this.reload}
-                    >
-                        <FormattedMessage
-                            id='admin.audits.reload'
-                            defaultMessage='Reload'
-                        />
-                    </button>
-                    <div className='audit__panel'>
+                    <div className='audit-panel__table'>
                         {content}
                     </div>
                 </div>
diff --git a/webapp/components/admin_console/compliance_reports.jsx b/webapp/components/admin_console/compliance_reports.jsx
index 04b2c4deb..79b0d2210 100644
--- a/webapp/components/admin_console/compliance_reports.jsx
+++ b/webapp/components/admin_console/compliance_reports.jsx
@@ -266,7 +266,7 @@ export default class ComplianceReports extends React.Component {
         }
 
         return (
-            <div className='panel'>
+            <div className='panel compliance-panel'>
                 <h3>
                     <FormattedMessage
                         id='admin.compliance_reports.title'
@@ -274,112 +274,113 @@ export default class ComplianceReports extends React.Component {
                     />
                 </h3>
 
-                <table>
-                    <tbody>
-                        <tr>
-                            <td colSpan='5'
-                                style={{paddingBottom: '6px'}}
-                            >
-                                <FormattedMessage
-                                    id='admin.compliance_reports.desc'
-                                    defaultMessage='Job Name:'
-                                />
-                                <input
-                                    style={{width: '425px'}}
-                                    type='text'
-                                    className='form-control'
-                                    id='desc'
-                                    ref='desc'
-                                    placeholder={Utils.localizeMessage('admin.compliance_reports.desc_placeholder', 'Ex "Audit 445 for HR"')}
-                                />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <FormattedMessage
-                                    id='admin.compliance_reports.from'
-                                    defaultMessage='From:'
-                                />
-                                <input
-                                    type='text'
-                                    className='form-control'
-                                    id='from'
-                                    ref='from'
-                                    placeholder={Utils.localizeMessage('admin.compliance_reports.from_placeholder', 'Ex "2016-03-11"')}
-                                />
-                            </td>
-                            <td style={{paddingLeft: '4px'}}>
-                                <FormattedMessage
-                                    id='admin.compliance_reports.to'
-                                    defaultMessage='To:'
-                                />
-                                <input
-                                    type='text'
-                                    className='form-control'
-                                    id='to'
-                                    ref='to'
-                                    placeholder={Utils.localizeMessage('admin.compliance_reports.to_placeholder', 'Ex "2016-03-15"')}
-                                />
-                            </td>
-                            <td style={{paddingLeft: '4px'}}>
-                                <FormattedMessage
-                                    id='admin.compliance_reports.emails'
-                                    defaultMessage='Emails:'
-                                />
-                                <input
-                                    style={{width: '325px'}}
-                                    type='text'
-                                    className='form-control'
-                                    id='emails'
-                                    ref='emails'
-                                    placeholder={Utils.localizeMessage('admin.compliance_reports.emails_placeholder', 'Ex "bill@example.com, bob@example.com"')}
-                                />
-                            </td>
-                            <td style={{paddingLeft: '4px'}}>
-                                <FormattedMessage
-                                    id='admin.compliance_reports.keywords'
-                                    defaultMessage='Keywords:'
-                                />
-                                <input
-                                    style={{width: '250px'}}
-                                    type='text'
-                                    className='form-control'
-                                    id='keywords'
-                                    ref='keywords'
-                                    placeholder={Utils.localizeMessage('admin.compliance_reports.keywords_placeholder', 'Ex "shorting stock"')}
-                                />
-                            </td>
-                            <td>
-                                <button
-                                    id='run-button'
-                                    type='submit'
-                                    className='btn btn-primary'
-                                    onClick={this.runReport}
-                                    style={{marginTop: '20px', marginLeft: '20px'}}
-                                >
-                                    <FormattedMessage
-                                        id='admin.compliance_reports.run'
-                                        defaultMessage='Run'
-                                    />
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                {serverError}
-                <div style={{marginTop: '20px'}}>
+                <div className='row'>
+                    <div className='col-sm-6 col-md-4 form-group'>
+                        <label>
+                            <FormattedMessage
+                                id='admin.compliance_reports.desc'
+                                defaultMessage='Job Name:'
+                            />
+                        </label>
+                        <input
+                            type='text'
+                            className='form-control'
+                            id='desc'
+                            ref='desc'
+                            placeholder={Utils.localizeMessage('admin.compliance_reports.desc_placeholder', 'E.g. "Audit 445 for HR"')}
+                        />
+                    </div>
+                    <div className='col-sm-3 col-md-2 form-group'>
+                        <label>
+                            <FormattedMessage
+                                id='admin.compliance_reports.from'
+                                defaultMessage='From:'
+                            />
+                        </label>
+                        <input
+                            type='text'
+                            className='form-control'
+                            id='from'
+                            ref='from'
+                            placeholder={Utils.localizeMessage('admin.compliance_reports.from_placeholder', 'E.g. "2016-03-11"')}
+                        />
+                    </div>
+                    <div className='col-sm-3 col-md-2 form-group'>
+                        <label>
+                            <FormattedMessage
+                                id='admin.compliance_reports.to'
+                                defaultMessage='To:'
+                            />
+                        </label>
+                        <input
+                            type='text'
+                            className='form-control'
+                            id='to'
+                            ref='to'
+                            placeholder={Utils.localizeMessage('admin.compliance_reports.to_placeholder', 'E.g. "2016-03-15"')}
+                        />
+                    </div>
+                </div>
+                <div className='row'>
+                    <div className='col-sm-6 col-md-4 form-group'>
+                        <label>
+                            <FormattedMessage
+                                id='admin.compliance_reports.emails'
+                                defaultMessage='Emails:'
+                            />
+                        </label>
+                        <input
+                            type='text'
+                            className='form-control'
+                            id='emails'
+                            ref='emails'
+                            placeholder={Utils.localizeMessage('admin.compliance_reports.emails_placeholder', 'E.g. "bill@example.com, bob@example.com"')}
+                        />
+                    </div>
+                    <div className='col-sm-6 col-md-4 form-group'>
+                        <label>
+                            <FormattedMessage
+                                id='admin.compliance_reports.keywords'
+                                defaultMessage='Keywords:'
+                            />
+                        </label>
+                        <input
+                            type='text'
+                            className='form-control'
+                            id='keywords'
+                            ref='keywords'
+                            placeholder={Utils.localizeMessage('admin.compliance_reports.keywords_placeholder', 'E.g. "shorting stock"')}
+                        />
+                    </div>
+                </div>
+                <div className='clearfix'>
                     <button
+                        id='run-button'
                         type='submit'
                         className='btn btn-primary'
+                        onClick={this.runReport}
+                    >
+                        <FormattedMessage
+                            id='admin.compliance_reports.run'
+                            defaultMessage='Run Compliance Report'
+                        />
+                    </button>
+                </div>
+                {serverError}
+                <div className='text-right'>
+                    <button
+                        type='submit'
+                        className='btn btn-link'
                         onClick={this.reload}
                     >
+                        <i className='fa fa-refresh'></i>
                         <FormattedMessage
                             id='admin.compliance_reports.reload'
-                            defaultMessage='Reload'
+                            defaultMessage='Reload Completed Compliance Reports'
                         />
                     </button>
                 </div>
-                <div className='compliance__panel'>
+                <div className='compliance-panel__table'>
                     {content}
                 </div>
             </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index cfa4d9e25..7e46903db 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -75,8 +75,8 @@
   "add_outgoing_webhook.triggerWOrds": "Trigger Words (One Per Line)",
   "add_outgoing_webhook.triggerWords": "Trigger Words (One Per Line)",
   "add_outgoing_webhook.triggerWordsOrChannelRequired": "A valid channel or a list of trigger words is required",
-  "admin.audits.reload": "Reload",
-  "admin.audits.title": "User Activity",
+  "admin.audits.reload": "Reload User Activity Logs",
+  "admin.audits.title": "User Activity Logs",
   "admin.compliance.directoryDescription": "Directory to which compliance reports are written. If blank, will be set to ./data/.",
   "admin.compliance.directoryExample": "Ex \"./data/\"",
   "admin.compliance.directoryTitle": "Compliance Directory Location:",
@@ -91,18 +91,18 @@
   "admin.compliance.title": "Compliance Settings",
   "admin.compliance.true": "true",
   "admin.compliance_reports.desc": "Job Name:",
-  "admin.compliance_reports.desc_placeholder": "Ex \"Audit 445 for HR\"",
+  "admin.compliance_reports.desc_placeholder": "E.g. \"Audit 445 for HR\"",
   "admin.compliance_reports.emails": "Emails:",
-  "admin.compliance_reports.emails_placeholder": "Ex \"bill@example.com, bob@example.com\"",
+  "admin.compliance_reports.emails_placeholder": "E.g. \"bill@example.com, bob@example.com\"",
   "admin.compliance_reports.from": "From:",
-  "admin.compliance_reports.from_placeholder": "Ex \"2016-03-11\"",
+  "admin.compliance_reports.from_placeholder": "E.g. \"2016-03-11\"",
   "admin.compliance_reports.keywords": "Keywords:",
-  "admin.compliance_reports.keywords_placeholder": "Ex \"shorting stock\"",
-  "admin.compliance_reports.reload": "Reload",
-  "admin.compliance_reports.run": "Run",
+  "admin.compliance_reports.keywords_placeholder": "E.g. \"shorting stock\"",
+  "admin.compliance_reports.reload": "Reload Completed Compliance Reports",
+  "admin.compliance_reports.run": "Run Compliance Report",
   "admin.compliance_reports.title": "Compliance Reports",
   "admin.compliance_reports.to": "To:",
-  "admin.compliance_reports.to_placeholder": "Ex \"2016-03-15\"",
+  "admin.compliance_reports.to_placeholder": "E.g. \"2016-03-15\"",
   "admin.compliance_table.desc": "Description",
   "admin.compliance_table.download": "Download",
   "admin.compliance_table.params": "Params",
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 3a4cd3b89..cc3d7a4b9 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -11,6 +11,15 @@
         }
     }
 
+    .compliance-panel,
+    .audit-panel {
+        .row {
+            > .form-group {
+                padding-left: 15px;
+            }
+        }
+    }
+
     .user-popover {
         pointer-events: none;
     }
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 65fefdb33..0f47e7529 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -160,17 +160,6 @@
         width: 100%;
     }
 
-    .compliance__panel,
-    .audit__panel {
-        background-color: $white;
-        border: 1px solid $border-gray;
-        height: 70vh;
-        margin-top: 10px;
-        overflow: auto;
-        padding: 5px;
-        width: 100%;
-    }
-
     .app__content {
         color: #333;
 
diff --git a/webapp/sass/routes/_compliance.scss b/webapp/sass/routes/_compliance.scss
new file mode 100644
index 000000000..57eb538c6
--- /dev/null
+++ b/webapp/sass/routes/_compliance.scss
@@ -0,0 +1,38 @@
+@charset 'UTF-8';
+
+.compliance-panel__table,
+.audit-panel__table {
+    background-color: $white;
+    border: 1px solid $border-gray;
+    margin-top: 10px;
+    max-height: 70vh;
+    min-height: 100px;
+    overflow: auto;
+    padding: 5px;
+    width: 100%;
+}
+
+.compliance-panel,
+.audit-panel {
+    .row {
+        > .form-group {
+            padding-left: 0;
+
+            &:first-child {
+                padding-left: 15px;
+            }
+        }
+
+        label {
+            font-weight: 600;
+        }
+    }
+
+    .fa-refresh {
+        margin-right: 5px;
+    }
+}
+
+.compliance-panel {
+    margin-bottom: 3em;
+}
diff --git a/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss
index 4f3f6f9cd..11b815007 100644
--- a/webapp/sass/routes/_module.scss
+++ b/webapp/sass/routes/_module.scss
@@ -4,6 +4,7 @@
 @import 'activity-log';
 @import 'admin-console';
 @import 'backstage';
+@import 'compliance';
 @import 'docs';
 @import 'error-page';
 @import 'loading';