Multiple UI Improvements

web/react/components/channel_loader.jsx

@@ -84,6 +84,16 @@ export default class ChannelLoader extends React.Component {
             }
         });
 
+        $('body').on('mouseenter mouseleave', '.search-item__container .post', function mouseOver(ev) {
+            if (ev.type === 'mouseenter') {
+                $(this).closest('.search-item__container').find('.date-separator').addClass('hovered--after');
+                $(this).closest('.search-item__container').next('div').find('.date-separator').addClass('hovered--before');
+            } else {
+                $(this).closest('.search-item__container').find('.date-separator').removeClass('hovered--after');
+                $(this).closest('.search-item__container').next('div').find('.date-separator').removeClass('hovered--before');
+            }
+        });
+
         $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');

web/react/components/search_results_item.jsx

@@ -59,8 +59,20 @@ export default class SearchResultsItem extends React.Component {
         };
 
         return (
+            <div className='search-item__container'>
+                <div className='date-separator'>
+                    <hr className='separator__hr' />
+                    <div className='separator__text'>
+                        <FormattedDate
+                            value={this.props.post.create_at}
+                            day='numeric'
+                            month='long'
+                            year='numeric'
+                        />
+                    </div>
+                </div>
                 <div
-                className='search-item-container post'
+                    className='post'
                 >
                     <div className='search-channel__name'>{channelName}</div>
                     <div className='post__content'>
@@ -78,9 +90,6 @@ export default class SearchResultsItem extends React.Component {
                                     <time className='search-item-time'>
                                         <FormattedDate
                                             value={this.props.post.create_at}
-                                        day='numeric'
-                                        month='long'
-                                        year='numeric'
                                             hour12={true}
                                             hour='2-digit'
                                             minute='2-digit'
@@ -120,6 +129,7 @@ export default class SearchResultsItem extends React.Component {
                         </div>
                     </div>
                 </div>
+            </div>
         );
     }
 }

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

@@ -173,6 +173,7 @@
 		.team__name {
 			line-height: 22px;
 			margin-top: -2px;
+			float: left;
 		}
 		.user__name {
 			@include single-transition(all, 0.1s, linear);

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

@@ -769,7 +769,7 @@ body.ios {
 
 		.comment-icon {
 			display: inline-block;
-			top: 3px;
+			top: 2px;
 			position: relative;
 			margin-right: 3px;
 			fill: inherit;

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

@@ -90,6 +90,7 @@
 	-webkit-overflow-scrolling: touch;
 	@include flex(1 1 auto);
 	height: calc(100% - 56px);
+	padding-top: 10px;
 }
 
 .search-results-header {
@@ -104,9 +105,10 @@
 	border-bottom: $border-gray;
 }
 
-.search-item-container {
+.search-item__container {
-	border-top: $border-gray;
+
-	padding: 10px 1em;
+	.post {
+		padding: 0 1em 1em;
 		margin: 0;
 
 		&:first-child {
@@ -119,6 +121,8 @@
 		}
 	}
 
+}
+
 .search-item__jump {
 	position: absolute;
 	right: 0;