Merge pull request #1637 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

24 files changed, 83 insertions, 39 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..7dac39942 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) {
@@ -103,11 +106,6 @@ export default class ChannelInviteModal extends React.Component {
         );
     }
     render() {
-        var maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         var inviteError = null;
         if (this.state.inviteError) {
             inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
@@ -139,11 +137,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);
         }
     }
 
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index f80da8415..eb1d36ced 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -576,6 +576,7 @@ export function applyTheme(theme) {
 
     if (theme.sidebarHeaderTextColor) {
         changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info', 'color:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1);
         changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.modal .modal-header .modal-title, .modal .modal-header .modal-title .name, .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1);
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 926c289e6..61ad186e0 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -145,6 +145,7 @@ select {
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
   cursor: auto;
   background: rgba(#fff, 0.1);
+  color: inherit;
 }
 
 .form-group {
@@ -210,6 +211,7 @@ select {
 
 .alert {
   padding: 8px 12px;
+  @include border-radius(2px);
 }
 
 .emoji {
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 166995632..da75bc61b 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -36,9 +36,13 @@
 #archive-link-home {
 	@include flex(0 0 auto);
 	cursor: pointer;
-	padding: 10px;
+	padding: 10px 20px;
 	font-size: 13px;
 
+	.fa {
+		@include opacity(0.7);
+	}
+
 	a {
 		color: inherit;
 	}
diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss
index 8910ff115..d4365d1e6 100644
--- a/web/sass-files/sass/partials/_get-link.scss
+++ b/web/sass-files/sass/partials/_get-link.scss
@@ -4,5 +4,5 @@
 	display: inline-block;
 	float: left;
 	padding: 4px 10px;
-	margin: 3px 0 0 10px;
+	margin: 1px 0 0 10px;
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index f8c7a65af..bd0392a52 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -293,6 +293,7 @@
 }
 
 .channel-header__links {
+	font-family: 'Open Sans', sans-serif;
 	height: 30px;
 	width: 24px;
 	line-height: 26px;
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 08d1d8a75..55725abe0 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -35,6 +35,9 @@
 		text-align: right;
 		padding-right: 0;
 	}
+	.team-member-list {
+		width: 100%;
+	}
 	.remove__member {
 		float: right;
 		color: #999;
@@ -95,6 +98,7 @@
 				background: rgba(0, 0, 0, 0.1);
 			}
 			span {
+			    font-family: 'Open Sans', sans-serif;
 				line-height: 10px;
 			}
 		}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 3b7184550..2ddde0c50 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -369,9 +369,9 @@ body.ios {
 		}
 	}
 
-    &.post--highlight {
-        background-color: beige;
-    }
+	&.post--highlight {
+		background-color: beige;
+	}
 
 	&.post--system .post__header .col__name {
 		display: none;
@@ -551,7 +551,23 @@ body.ios {
 			position: absolute;
 			right: 0;
 			top: 30px;
-			width: 60px;
+			width: 65px;
+		}
+
+		.permalink-popover {
+			min-width: 0;
+
+			.popover-content {
+				padding: 5px;
+			}
+
+			.form-control, .btn {
+				font-size: 13px;
+				height: 30px;
+				padding: 0 8px;
+				line-height: 30px;
+			}
+
 		}
 
 	}
@@ -569,6 +585,8 @@ body.ios {
 	.dropdown {
 		display: inline-block;
 		visibility: hidden;
+		position: absolute;
+		right: 0;
 		top: -1px;
 
 		.dropdown-menu {
@@ -602,11 +620,11 @@ body.ios {
 		word-wrap: break-word;
 		padding: 0.2em 0.5em 0em;
 		@include legacy-pie-clearfix;
-		width: calc(100% - 70px);
+		width: calc(100% - 75px);
 
 		img {
-            max-height: 400px;
-        }
+			max-height: 400px;
+		}
 
 		ul {
 			padding: 5px 0 0 20px;
@@ -679,11 +697,11 @@ body.ios {
 		color: #999;
 	}
 
-    .permalink-icon {
+	.permalink-icon {
 		display: inline-block;
 		color: $primary-color;
 		visibility: hidden;
-    }
+	}
 
 	.comment-icon__container {
 		fill: $primary-color;
@@ -828,10 +846,10 @@ body.ios {
 }
 
 .permalink-text {
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .permalink-popover {
-    min-width: 320px;
-    margin-left: 50px !important;
+	min-width: 320px;
+	margin-left: 50px !important;
 }
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index ba2fe2ffe..bdf04ff82 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -107,7 +107,8 @@
 
             &:after {
                 font-size: 20px;
-                content: '...'
+                content: '...';
+                top: -3px;
             }
 
         }
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 8c6214224..ee0c40067 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -40,7 +40,7 @@
         font-weight: 600;
     }
 
-	.no-padding--left {
+    .no-padding--left {
         padding-left: 0;
     }
     .padding-top {
@@ -313,17 +313,23 @@
     .member-name {
         font-weight:500;
         display: block;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .member-email {
         color:darkgrey;
         display: block;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .member-role, .member-drop {
         position:absolute;
-        right:15px;
-        top:13px;
+        right: 15px;
+        top: 8px;
     }
 }
 
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 7b3b8fdf9..d5bf0e503 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -110,6 +110,7 @@
                         }
                     }
                     .btn-close {
+                        font-family: 'Open Sans', sans-serif;
                         position: absolute;
                         right: 15px;
                         top: -1px;
@@ -142,7 +143,6 @@
                     }
                 }
                 a, a:hover, a:focus {
-                    padding-right: 10px;
                     background-color: rgba(black, 0.1);
                     border-radius: 0;
                     font-weight: 400;
diff --git a/web/templates/channel.html b/web/templates/channel.html
index a5c0354a3..8abbe36df 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -30,7 +30,7 @@ window.setup_channel_page({{ .Props }}, {{ .Team }}, {{ .Channel }}, {{ .User }}
   if($(window).height() > 1200){
     modals.css('max-height', 1000);
   } else {
-    modals.css('max-height', $(window).height() - 50);
+    modals.css('max-height', $(window).height() - 200);
   }
   modals.perfectScrollbar();
 </script>