Minor Ui Improvements (#2713)

webapp/components/channel_info_modal.jsx

@@ -37,7 +37,9 @@ class ChannelInfoModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButtton={true}>
+                    <Modal.Title>
                         {channel.display_name}
+                    </Modal.Title>
                 </Modal.Header>
                 <Modal.Body ref='modalBody'>
                     <div className='row form-group'>

webapp/components/posts_view.jsx

@@ -527,7 +527,7 @@ export default class PostsView extends React.Component {
                     onClick={this.scrollToBottomAnimated}
                     hidden={!this.state.showUnreadMessageAlert}
                 >
-                        <i className='fa fa-arrow-circle-o-down'></i>
+                    <i className='fa fa-angle-down'></i>
                     &nbsp;
                     <FormattedMessage
                         id='posts_view.newMsg'

webapp/sass/components/_buttons.scss

@@ -18,6 +18,10 @@
     &.btn-danger {
         color: $white;
 
+        .app__body & {
+            color: $white;
+        }
+
         &:hover,
         &:focus,
         &:active {

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 {

webapp/sass/layout/_post.scss

@@ -170,25 +170,35 @@ body.ios {
     }
 }
 
-.post-list__new-messages-below{
+.post-list__new-messages-below {
-	background-color: #9fa5ad;
+    @include single-transition(bottom .5s cubic-bezier(86, 0, 07, 1));
+    @include opacity(.9);
+    background-color: $black;
     border-radius: 1em;
-	bottom: 0;
+    bottom: 10px;
-	color: white;
+    color: $white;
     cursor: pointer;
     display: inline-block;
     left: 50%;
-	padding: .25em .75em;
+    padding: .3em .75em;
     position: absolute;
     transform: translateX(-50%);
-	transition: bottom .5s cubic-bezier(0.86, 0, 0.07, 1);
+
-	&[hidden]{
+    &[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%;

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) {