Redesign listing mobile version [MAILPOET-2778]

assets/js/src/listing/listing.jsx

@@ -593,24 +593,26 @@ class Listing extends React.Component {
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         { this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
         <div className="mailpoet-listing">
-          { groups }
-          <div>
-            { search }
-            <ListingFilters
-              filters={this.state.filters}
-              filter={this.state.filter}
-              group={this.state.group}
-              onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
-              onSelectFilter={this.handleFilter}
-              onEmptyTrash={this.handleEmptyTrash}
-            />
-            {extraActions}
-            <ListingPages
-              count={this.state.count}
-              page={this.state.page}
-              limit={this.state.limit}
-              onSetPage={this.handleSetPage}
-            />
+          <div className="mailpoet-listing-header">
+            { groups }
+            <div>
+              { search }
+              <ListingFilters
+                filters={this.state.filters}
+                filter={this.state.filter}
+                group={this.state.group}
+                onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
+                onSelectFilter={this.handleFilter}
+                onEmptyTrash={this.handleEmptyTrash}
+              />
+              {extraActions}
+              <ListingPages
+                count={this.state.count}
+                page={this.state.page}
+                limit={this.state.limit}
+                onSetPage={this.handleSetPage}
+              />
+            </div>
           </div>
           <table className={tableClasses}>
             <thead>
@@ -651,7 +653,7 @@ class Listing extends React.Component {
             />
 
           </table>
-          <div className="tablenav bottom clearfix">
+          <div className="mailpoet-listing-footer clearfix">
             <ListingPages
               count={this.state.count}
               page={this.state.page}

assets/js/src/newsletters/listings/heading.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import MailPoet from 'mailpoet';
 
 const ListingHeading = () => (
-  <div>
+  <div className="mailpoet-newsletter-listing-heading-wrapper">
     <h1 className="mailpoet-newsletter-listing-heading title">
       {MailPoet.I18n.t('pageTitle')}
       <Link