Merge pull request #1562 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/get_link_modal.jsx

@@ -75,7 +75,7 @@ export default class GetLinkModal extends React.Component {
                 onHide={this.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    {this.props.title}
+                    <h4 className='modal-title'>{this.props.title}</h4>
                 </Modal.Header>
                 <Modal.Body>
                     {helpText}

web/react/components/sidebar.jsx

@@ -3,7 +3,6 @@
 
 import NewChannelFlow from './new_channel_flow.jsx';
 import MoreDirectChannels from './more_direct_channels.jsx';
-import SearchBox from './search_bar.jsx';
 import SidebarHeader from './sidebar_header.jsx';
 import UnreadChannelIndicator from './unread_channel_indicator.jsx';
 import TutorialTip from './tutorial/tutorial_tip.jsx';
@@ -586,7 +585,6 @@ export default class Sidebar extends React.Component {
                     teamName={TeamStore.getCurrent().name}
                     teamType={TeamStore.getCurrent().type}
                 />
-                <SearchBox />
 
                 <UnreadChannelIndicator
                     show={this.state.showTopUnread}

web/react/components/view_image.jsx

@@ -423,10 +423,11 @@ export default class ViewImageModal extends React.Component {
                     onClick={this.props.onModalDismissed}
                 >
                     <div
-                        className={'image-wrapper ' + bgClass}
+                        className={'image-wrapper'}
                         onClick={this.props.onModalDismissed}
                     >
                         <div
+                            className={bgClass}
                             onMouseEnter={this.onMouseEnterImage}
                             onMouseLeave={this.onMouseLeaveImage}
                             onClick={(e) => e.stopPropagation()}

web/react/utils/utils.jsx

@@ -607,7 +607,7 @@ export function applyTheme(theme) {
         changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1);
-        changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
+        changeCss('@media(min-width: 960px){.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
         changeCss('.attachment__content', 'background:' + theme.centerChannelBg, 1);
     }
 
@@ -638,8 +638,7 @@ export function applyTheme(theme) {
         changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
-        changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
+        changeCss('@media(min-width: 960px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
-        changeCss('@media(max-width: 960px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1);
         changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);

web/sass-files/sass/partials/_responsive.scss

@@ -484,7 +484,8 @@
                 padding: 0 10px 0 31px;
                 background: rgba(black, 0.2);
                 @include border-radius(3px);
-                color: inherit;
+                color: #444;
+                background: #fff;
             }
         }
     }
@@ -509,15 +510,15 @@
         &.move--right {
             @include translate3d(0, 0, 0);
         }
+        > div {
+            padding-bottom: 0;
+        }
         .nav-pills__unread-indicator-bottom {
             bottom: 10px;
         }
         .badge {
             top: 13px;
         }
-        > div {
-            padding-bottom: 65px;
-        }
         .team__header {
             display: none;
             @include clearfix;

web/sass-files/sass/partials/_search.scss

@@ -38,6 +38,7 @@
 	font-size: 14px;
 	@include opacity(0.5);
 	display: none;
+	color: #777;
 }
 .search__form {
 	.search-bar__container & {