From 94fdba9a31c02b817afc5832a488194ecde23132 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 15 Jun 2017 20:07:00 +0500
Subject: Ui improvements (#6651)

* PLT-6691 - Centering emoji in post view

* PLT-6737 - FIxing on hover style for heade icons

* PLT-6768 - Fixing error on profile picture

* PLT-6792 - Fixing link preview image not resizing

* PLT-6793 - User popover position on mobile
---
 webapp/components/form_error.jsx      | 10 ++++++++++
 webapp/components/setting_picture.jsx | 10 +++++++---
 webapp/components/user_profile.jsx    |  7 ++++++-
 webapp/sass/layout/_post.scss         |  4 ++++
 webapp/sass/responsive/_mobile.scss   |  6 ++++++
 webapp/utils/utils.jsx                |  6 ++++--
 6 files changed, 37 insertions(+), 6 deletions(-)

(limited to 'webapp')

diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx
index b3ac3fef0..e8c3d1e98 100644
--- a/webapp/components/form_error.jsx
+++ b/webapp/components/form_error.jsx
@@ -43,6 +43,16 @@ export default class FormError extends React.Component {
             return null;
         }
 
+        if (this.props.type === 'modal') {
+            return (
+                <div className='form-group'>
+                    <label className='col-sm-12 has-error'>
+                        {message}
+                    </label>
+                </div>
+            );
+        }
+
         if (this.props.type === 'backstage') {
             return (
                 <div className='pull-left has-error'>
diff --git a/webapp/components/setting_picture.jsx b/webapp/components/setting_picture.jsx
index 93d41a312..2d389a902 100644
--- a/webapp/components/setting_picture.jsx
+++ b/webapp/components/setting_picture.jsx
@@ -102,14 +102,14 @@ export default class SettingPicture extends Component {
         }
 
         return (
-            <ul className='section-max'>
+            <ul className='section-max form-horizontal'>
                 <li className='col-xs-12 section-title'>{this.props.title}</li>
                 <li className='col-xs-offset-3 col-xs-8'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
                             {img}
                         </li>
-                        <li className='setting-list-item'>
+                        <li className='setting-list-item padding-top x2'>
                             <FormattedMessage
                                 id='setting_picture.help'
                                 defaultMessage='Upload a profile picture in BMP, JPG, JPEG or PNG format, at least {width}px in width and {height}px height.'
@@ -120,7 +120,11 @@ export default class SettingPicture extends Component {
                             />
                         </li>
                         <li className='setting-list-item'>
-                            <FormError errors={[this.props.clientError, this.props.serverError]}/>
+                            <hr/>
+                            <FormError
+                                errors={[this.props.clientError, this.props.serverError]}
+                                type={'modal'}
+                            />
                             <span className='btn btn-sm btn-primary btn-file sel-btn'>
                                 <FormattedMessage
                                     id='setting_picture.select'
diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
index 5fb01b725..b3290d1de 100644
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -56,6 +56,11 @@ export default class UserProfile extends React.Component {
     render() {
         let name = '...';
         let profileImg = '';
+        let popoverPosition = 'right';
+        if (Utils.isMobile()) {
+            popoverPosition = 'bottom';
+        }
+
         if (this.props.user) {
             name = Utils.displayUsername(this.props.user.id);
             profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
@@ -73,7 +78,7 @@ export default class UserProfile extends React.Component {
             <OverlayTrigger
                 ref='overlay'
                 trigger='click'
-                placement='right'
+                placement={popoverPosition}
                 rootClose={true}
                 overlay={
                     <ProfilePopover
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 73253f4be..5dc524caa 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -884,6 +884,10 @@
         }
     }
 
+    .emoticon {
+        vertical-align: top;
+    }
+
     p {
         font-size: 13.5px;
         line-height: 1.6em;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index ee1532933..24db3821f 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1549,6 +1549,12 @@
 }
 
 @media screen and (max-width: 480px) {
+    .post {
+        .img-div {
+            max-width: 100%;
+        }
+    }
+
     .nav-tabs {
         margin-top: 1em;
 
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 015084e7b..e7f13c4a0 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -694,10 +694,12 @@ export function applyTheme(theme) {
     }
 
     if (theme.linkColor) {
-        changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
         changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
-        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor);
+        changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
+        changeCss('.app__body .channel-header #member_popover:hover', 'color:' + changeOpacity(theme.linkColor, 0.6));
+        changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor);
-- 
cgit v1.2.3-1-g7c22