Multiple UI Improvements

13 files changed, 26 insertions, 14 deletions

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index deef92a54..85c28ca5c 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -32,9 +32,11 @@ export default class AccessHistoryModal extends React.Component {
     onShow() {
         AsyncClient.getAudits();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     onHide() {
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 200f4d724..f5341c0bc 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -51,9 +51,11 @@ export default class ActivityLogModal extends React.Component {
     onShow() {
         AsyncClient.getSessions();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     onHide() {
diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx
index 56e2e53f9..749371c39 100644
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -61,6 +61,9 @@ export default class ChannelInviteModal extends React.Component {
     onShow() {
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
     componentDidUpdate(prevProps) {
@@ -139,11 +142,10 @@ export default class ChannelInviteModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_nam}</span></Modal.Title>
+                    <Modal.Title>{'Add New Members to '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
                 </Modal.Header>
                 <Modal.Body
                     ref='modalBody'
-                    style={{maxHeight}}
                 >
                     {inviteError}
                     {content}
diff --git a/web/react/components/channel_notifications_modal.jsx b/web/react/components/channel_notifications_modal.jsx
index 887589468..e70d3a634 100644
--- a/web/react/components/channel_notifications_modal.jsx
+++ b/web/react/components/channel_notifications_modal.jsx
@@ -335,7 +335,7 @@ export default class ChannelNotificationsModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span>
+                    <Modal.Title>{'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span></Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <div className='settings-table'>
diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx
index 99bae962a..1255067fd 100644
--- a/web/react/components/delete_channel_modal.jsx
+++ b/web/react/components/delete_channel_modal.jsx
@@ -39,7 +39,9 @@ export default class DeleteChannelModal extends React.Component {
                 show={this.props.show}
                 onHide={this.props.onHide}
             >
-                <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header>
+                <Modal.Header closeButton={true}>
+                    <h4 className='modal-title'>{'Confirm DELETE Channel'}</h4>
+                </Modal.Header>
                 <Modal.Body>
                     {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`}
                 </Modal.Body>
diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx
index 5e89a0893..827654e1b 100644
--- a/web/react/components/delete_post_modal.jsx
+++ b/web/react/components/delete_post_modal.jsx
@@ -131,7 +131,7 @@ export default class DeletePostModal extends React.Component {
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    {`Confirm ${postTerm} Delete`}
+                    <Modal.Title>{`Confirm ${postTerm} Delete`}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     {`Are you sure you want to delete this ${postTerm.toLowerCase()}?`}
diff --git a/web/react/components/edit_channel_header_modal.jsx b/web/react/components/edit_channel_header_modal.jsx
index 5529a419d..209e30fcc 100644
--- a/web/react/components/edit_channel_header_modal.jsx
+++ b/web/react/components/edit_channel_header_modal.jsx
@@ -84,7 +84,7 @@ export default class EditChannelHeaderModal extends React.Component {
                 onHide={this.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    {'Edit Header for ' + this.props.channel.display_name}
+                    <Modal.Title>{'Edit Header for ' + this.props.channel.display_name}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <p>{'Edit the text appearing next to the channel name in the channel header.'}</p>
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 25a915e22..649ec7321 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component {
 
     componentDidUpdate(prevProps, prevState) {
         if (!prevState.show && this.state.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
             }
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 0b8b07d8c..21683bb01 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -196,7 +196,7 @@ export default class PostInfo extends React.Component {
                         type='text'
                         readOnly='true'
                         ref='permalinkbox'
-                        className='permalink-text form-control no-resize min-height input-large'
+                        className='permalink-text form-control no-resize'
                         rows='1'
                         value={permalink}
                     />
diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx
index 0a37a6803..8178c5902 100644
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -209,7 +209,7 @@ export default class RhsRootPost extends React.Component {
                                 </time>
                             </li>
                             <li className='col col__reply'>
-                                <div className='dropdown'>
+                                <div>
                                     {rootOptions}
                                 </div>
                             </li>
diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx
index eed4a1f19..27224c283 100644
--- a/web/react/components/team_members_modal.jsx
+++ b/web/react/components/team_members_modal.jsx
@@ -26,9 +26,11 @@ export default class TeamMembersModal extends React.Component {
     }
 
     onShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
         }
     }
 
diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx
index 9c88bb819..9c0fe3709 100644
--- a/web/react/components/user_settings/manage_outgoing_hooks.jsx
+++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx
@@ -188,7 +188,7 @@ export default class ManageOutgoingHooks extends React.Component {
                     key={hook.id}
                     className='webhook__item'
                 >
-                    <div className='padding-top x2'>
+                    <div className='padding-top x2 webhook__url'>
                         <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
                     </div>
                     {channelDiv}
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index 97c601b5e..36e1aa217 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -47,9 +47,11 @@ export default class UserSettingsModal extends React.Component {
     }
 
     handleShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
+        } else {
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         }
     }