Minor Ui Improvements (#2713)

6 files changed, 42 insertions, 24 deletions

diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx
index 444f3db8d..c7f9f9f79 100644
--- a/webapp/components/channel_info_modal.jsx
+++ b/webapp/components/channel_info_modal.jsx
@@ -37,7 +37,9 @@ class ChannelInfoModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButtton={true}>
-                    {channel.display_name}
+                    <Modal.Title>
+                        {channel.display_name}
+                    </Modal.Title>
                 </Modal.Header>
                 <Modal.Body ref='modalBody'>
                     <div className='row form-group'>
diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx
index 2bc1150a9..d072203a0 100644
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -527,12 +527,12 @@ export default class PostsView extends React.Component {
                     onClick={this.scrollToBottomAnimated}
                     hidden={!this.state.showUnreadMessageAlert}
                 >
-                        <i className='fa fa-arrow-circle-o-down'></i>
-                        &nbsp;
-                        <FormattedMessage
-                            id='posts_view.newMsg'
-                            defaultMessage='New Messages'
-                        />
+                    <i className='fa fa-angle-down'></i>
+                    &nbsp;
+                    <FormattedMessage
+                        id='posts_view.newMsg'
+                        defaultMessage='New Messages'
+                    />
                 </div>
             </div>
         );
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index 5d95759a2..326640148 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -18,6 +18,10 @@
     &.btn-danger {
         color: $white;
 
+        .app__body & {
+            color: $white;
+        }
+
         &:hover,
         &:focus,
         &:active {
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index aea8ac272..43d0cd98f 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -20,8 +20,8 @@
         overflow: visible;
 
         .custom-textarea {
-            min-height: 8em;
             max-height: 60vh;
+            min-height: 8em;
         }
 
         .suggestion-list__content {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 445ab9511..85447e534 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -170,25 +170,35 @@ body.ios {
     }
 }
 
-.post-list__new-messages-below{
-	background-color: #9fa5ad;
-	border-radius: 1em;
-	bottom: 0;
-	color: white;
-	cursor: pointer;
-	display: inline-block;
-	left: 50%;
-	padding: .25em .75em;
-	position: absolute;
-	transform: translateX(-50%);
-	transition: bottom .5s cubic-bezier(0.86, 0, 0.07, 1);
-	&[hidden]{
-		bottom: -30px;
-	}
+.post-list__new-messages-below {
+    @include single-transition(bottom .5s cubic-bezier(86, 0, 07, 1));
+    @include opacity(.9);
+    background-color: $black;
+    border-radius: 1em;
+    bottom: 10px;
+    color: $white;
+    cursor: pointer;
+    display: inline-block;
+    left: 50%;
+    padding: .3em .75em;
+    position: absolute;
+    transform: translateX(-50%);
+
+    &[hidden] {
+        bottom: -30px;
+    }
+
+    .fa {
+        font-size: 17px;
+        font-weight: bold;
+        margin-right: 1px;
+        position: relative;
+        top: 1px;
+    }
 }
 
 .file-overlay {
-    color: #ffffff;
+    color: $white;
     font-size: em(20px);
     font-weight: 600;
     height: 100%;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 27885c376..c4f4a025e 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -674,6 +674,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg, 1);
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg, 2);
         changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg, 2);
+        changeCss('.app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg, 1);
     }
 
     if (theme.centerChannelColor) {
@@ -730,6 +731,7 @@ export function applyTheme(theme) {
         changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4);
         changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1);
         changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2);
+        changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2);
     }
 
     if (theme.newMessageSeparator) {