Ui improvements (#5755)

* PLT-5816 - Flagged posts tooltip fix

* PLT-5766 - Link previews appearing outside the box

* PLT-5795 - Fixing alignment user list in channel

* PLT-5818 - Reset password error not aligned

* PLT-5837 - Adjusting image preview max height

* PLT-5778 - Updating word break for paragraphs

* PLT-5848 - Updating label for file error

* PLT-5846 - Markdown tables extra border on mobile

* PLT-5662 - Pinned post UI improvement

* Fixing eslint error

* Updating tooltip eslint issue

* PLT-5832 - Removing error styling on labels

webapp/components/admin_console/reset_password_modal.jsx

@@ -61,7 +61,7 @@ class ResetPasswordModal extends React.Component {
 
         if (this.state.serverError) {
             urlClass += ' has-error';
-            serverError = <div className='form-group has-error'><p className='input__help error'>{this.state.serverError}</p></div>;
+            serverError = <div className='has-error'><p className='input__help error'>{this.state.serverError}</p></div>;
         }
 
         let title;

webapp/components/audio_video_preview.jsx

@@ -94,7 +94,6 @@ export default class AudioVideoPreview extends React.Component {
             <video
                 key={this.props.fileInfo.id}
                 ref='video'
-                style={{maxHeight: this.props.maxHeight}}
                 data-setup='{}'
                 controls='controls'
                 width={width}
@@ -111,6 +110,5 @@ export default class AudioVideoPreview extends React.Component {
 
 AudioVideoPreview.propTypes = {
     fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired,
-    maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired
+    fileUrl: React.PropTypes.string.isRequired
 };

webapp/components/channel_header.jsx

@@ -241,7 +241,10 @@ export default class ChannelHeader extends React.Component {
         );
 
         const flaggedTooltip = (
-            <Tooltip id='flaggedTooltip'>
+            <Tooltip
+                id='flaggedTooltip'
+                className='text-nowrap'
+            >
                 <FormattedMessage
                     id='channel_header.flagged'
                     defaultMessage='Flagged Posts'
@@ -676,19 +679,27 @@ export default class ChannelHeader extends React.Component {
             headerText = channel.header;
         }
 
-        const toggleFavoriteTooltip = (
-            <Tooltip id='favoriteTooltip'>
-                {this.state.isFavorite ?
+        let toggleFavoriteTooltip;
+        if (this.state.isFavorite) {
+            toggleFavoriteTooltip = (
+                <Tooltip id='favoriteTooltip'>
                     <FormattedMessage
                         id='channelHeader.removeFromFavorites'
                         defaultMessage='Remove from Favorites'
-                    /> :
+                    />
+                </Tooltip>
+            );
+        } else {
+            toggleFavoriteTooltip = (
+                <Tooltip id='favoriteTooltip'>
                     <FormattedMessage
                         id='channelHeader.addToFavorites'
                         defaultMessage='Add to Favorites'
-                    />}
-            </Tooltip>
-        );
+                    />
+                </Tooltip>
+            );
+        }
+
         const toggleFavorite = (
             <OverlayTrigger
                 delayShow={Constants.OVERLAY_TIME_DELAY}

webapp/components/post_view/components/post_attachment_opengraph.jsx

@@ -32,7 +32,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         this.onImageLoad = this.onImageLoad.bind(this);
         this.onImageError = this.onImageError.bind(this);
         this.truncateText = this.truncateText.bind(this);
-        this.setImageWidth = this.setImageWidth.bind(this);
     }
 
     IMAGE_LOADED = {
@@ -75,20 +74,16 @@ export default class PostAttachmentOpenGraph extends React.Component {
 
     componentDidMount() {
         OpenGraphStore.addUrlDataChangeListener(this.onOpenGraphMetadataChange);
-        this.setImageWidth();
-        window.addEventListener('resize', this.setImageWidth);
     }
 
     componentDidUpdate() {
         if (this.props.childComponentDidUpdateFunction) {
             this.props.childComponentDidUpdateFunction();
         }
-        this.setImageWidth();
     }
 
     componentWillUnmount() {
         OpenGraphStore.removeUrlDataChangeListener(this.onOpenGraphMetadataChange);
-        window.removeEventListener('resize', this.setImageWidth);
     }
 
     onOpenGraphMetadataChange(url) {
@@ -163,9 +158,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         return (
             <div
                 className='attachment__image__container--openraph'
-                style={{
-                    width: (this.imageDimentions.height * this.imageRatio) + this.smallImageContainerLeftPadding
-                }} // Initially set the width accordinly to max image heigh, ie 80px. Later on it would be modified according to actul height of image.
                 ref={(div) => {
                     this.smallImageContainer = div;
                 }}
@@ -216,20 +208,6 @@ export default class PostAttachmentOpenGraph extends React.Component {
         return element;
     }
 
-    setImageWidth() {
-        if (
-            this.state.imageLoaded === this.IMAGE_LOADED.YES &&
-            this.smallImageContainer &&
-            this.smallImageElement
-        ) {
-            this.smallImageContainer.style.width = (
-                (this.smallImageElement.offsetHeight * this.imageRatio) +
-                this.smallImageContainerLeftPadding +
-                'px'
-            );
-        }
-    }
-
     truncateText(text, maxLength = this.textMaxLenght, ellipsis = this.textEllipsis) {
         if (text.length > maxLength) {
             return text.substring(0, maxLength - ellipsis.length) + ellipsis;

webapp/components/search_bar.jsx

@@ -216,7 +216,10 @@ export default class SearchBar extends React.Component {
         );
 
         const flaggedTooltip = (
-            <Tooltip id='flaggedTooltip'>
+            <Tooltip
+                id='flaggedTooltip'
+                className='text-nowrap'
+            >
                 <FormattedMessage
                     id='channel_header.flagged'
                     defaultMessage='Flagged Posts'

webapp/components/view_image.jsx

@@ -185,7 +185,6 @@ export default class ViewImageModal extends React.Component {
                     <ImagePreview
                         fileInfo={fileInfo}
                         fileUrl={fileUrl}
-                        maxHeight={this.state.imgHeight}
                     />
                 );
             } else if (fileType === 'video' || fileType === 'audio') {
@@ -193,7 +192,6 @@ export default class ViewImageModal extends React.Component {
                     <AudioVideoPreview
                         fileInfo={fileInfo}
                         fileUrl={fileUrl}
-                        maxHeight={this.state.imgHeight}
                     />
                 );
             } else if (PDFPreview.supports(fileInfo)) {
@@ -344,7 +342,7 @@ LoadingImagePreview.propTypes = {
     loading: React.PropTypes.string
 };
 
-function ImagePreview({fileInfo, fileUrl, maxHeight}) {
+function ImagePreview({fileInfo, fileUrl}) {
     let previewUrl;
     if (fileInfo.has_preview_image) {
         previewUrl = FileStore.getFilePreviewUrl(fileInfo.id);
@@ -359,16 +357,12 @@ function ImagePreview({fileInfo, fileUrl, maxHeight}) {
             rel='noopener noreferrer'
             download={true}
         >
-            <img
-                style={{maxHeight}}
-                src={previewUrl}
-            />
+            <img src={previewUrl}/>
         </a>
     );
 }
 
 ImagePreview.propTypes = {
     fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired,
-    maxHeight: React.PropTypes.number.isRequired
+    fileUrl: React.PropTypes.string.isRequired
 };