Minor bug fixes (#7305)

* PLT-7063 - Changing search bar bg and color

* PLT-7064 - Adjusting info popover styling

* PLT-7124 - Fixing sidebar with webrtc call ongoing

* PLT-7400 - Fixing semi transparent options list

* PLT-7491 - Showing send button on mobile

6 files changed, 29 insertions, 22 deletions

diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 1a7771b9b..997ba8065 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -772,14 +772,14 @@ export default class CreatePost extends React.Component {
                             >
                                 {fileUpload}
                                 {emojiPicker}
+                                <a
+                                    className={sendButtonClass}
+                                    onClick={this.handleSubmit}
+                                >
+                                    <i className='fa fa-paper-plane'/>
+                                </a>
                             </span>
                         </div>
-                        <a
-                            className={sendButtonClass}
-                            onClick={this.handleSubmit}
-                        >
-                            <i className='fa fa-paper-plane'/>
-                        </a>
                         {tutorialTip}
                     </div>
                     <div className={postFooterClassName}>
diff --git a/webapp/components/webrtc/webrtc_controller.jsx b/webapp/components/webrtc/webrtc_controller.jsx
index 9a6dcb94e..576dc7b58 100644
--- a/webapp/components/webrtc/webrtc_controller.jsx
+++ b/webapp/components/webrtc/webrtc_controller.jsx
@@ -1186,7 +1186,7 @@ export default class WebrtcController extends React.Component {
 
         return (
             <div className='post-right__container'>
-                <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
+                <div className='search-bar__container channel-header alt'>{searchForm}</div>
                 <div className='sidebar-right__body'>
                     <WebrtcHeader
                         username={Utils.displayUsername(this.props.userId)}
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 6213d9c43..8d80d5d82 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -134,12 +134,7 @@
     top: 0;
 
     a {
-        @include opacity(.8);
         vertical-align: top;
-
-        &:hover {
-            @include opacity(1);
-        }
     }
 
 
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 245ff062f..54807f01f 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -544,11 +544,12 @@
 
         .send-button {
             @include single-transition(all, .15s);
+            border-left: 1px solid transparent;
             cursor: pointer;
             display: none;
-            font-size: 18px;
-            height: 37px;
-            line-height: 37px;
+            font-size: 17px;
+            height: 100%;
+            line-height: 49px;
             padding-right: 4px;
             text-align: center;
             vertical-align: bottom;
@@ -559,7 +560,9 @@
             }
 
             &.disabled {
-                color: grey;
+                i {
+                    color: inherit;
+                }
             }
         }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index fdbf774ee..b47db42a3 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -51,6 +51,10 @@
         .post-create-body {
             padding: 0;
 
+            .send-button {
+                display: block;
+            }
+
             textarea {
                 .app-content & {
                     border-left: none;
@@ -97,7 +101,7 @@
         @include single-transition(all, .35s, ease);
         @include translate3d(0, 100%, 0);
         @include box-shadow(none);
-        background: alpha-color($black, .8);
+        background: alpha-color($black, .9);
         border: none;
         height: calc(100% - 50px);
         max-width: 100%;
@@ -109,6 +113,10 @@
             @include translate3d(0, 0, 0);
         }
 
+        a {
+            color: #0091ff;
+        }
+
         .arrow {
             display: none;
         }
@@ -1011,10 +1019,10 @@
     .search-bar__container {
         @include flex(0 0 50px);
         background: $primary-color;
-        color: $white;
         padding: 0;
 
         .search-form__container {
+            color: $black;
             padding: 0;
         }
 
@@ -1041,6 +1049,8 @@
                 top: 7px;
 
                 svg {
+                    stroke: $black;
+                    stroke-opacity: .4;
                     width: 17px;
                 }
             }
@@ -1226,7 +1236,6 @@
         }
 
         .sidebar__search-clear {
-            @include opacity(1);
             color: inherit;
             display: block;
             height: 32px;
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 93ba39f30..b99f7b967 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -558,7 +558,7 @@ export function applyTheme(theme) {
         changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar', 'background:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .post-list__timestamp > div', 'border-color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.5));
         changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor);
-        changeCss('@media(max-width: 768px){.app__body .search-bar__container .search__form', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2));
+        changeCss('@media(max-width: 768px){.app__body .search-bar__container .search__form', 'background:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .navbar-right__icon', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2));
         changeCss('.app__body .navbar-right__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .navbar-right__icon svg', 'stroke:' + theme.sidebarHeaderTextColor);
@@ -634,7 +634,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
         changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
-        changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
+        changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i, .app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
         changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25));
@@ -650,7 +650,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
+        changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span, .app__body .post-create__container .post-body__actions > a', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .attachment .attachment__content, .app__body .attachment-actions button', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));