Redesign listing container & groups [MAILPOET-2778]

assets/css/src/components-plugin/_listing.scss

@@ -1,3 +1,79 @@
+.mailpoet-listing {
+  background: $color-white;
+  border: 1px solid $color-tertiary-light;
+  border-radius: 0 4px 4px;
+  font-family: $font-family;
+  padding: $grid-gap;
+
+  .mailpoet-tab-content & {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
+.mailpoet-listing-groups {
+  list-style: none;
+  margin: 0;
+  padding: $grid-gap ($grid-gap / 2);
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 0 $grid-gap $grid-gap $grid-gap;
+    white-space: nowrap;
+  }
+
+  li:first-child {
+    padding-left: 0;
+  }
+
+  li:last-child {
+    padding-right: 0;
+  }
+
+  li a {
+    color: $color-text-light;
+    font-size: $font-size;
+    text-decoration: none;
+  }
+
+  li a.mailpoet-listing-groups-current {
+    color: $color-secondary;
+    font-weight: bold;
+  }
+
+  li a span.mailpoet-listing-groups-count {
+    background-color: $color-tertiary-light;
+    border-radius: 8px;
+    font-size: $font-size-extra-small;
+    font-weight: 600;
+    margin-left: 2px;
+    padding: 1px 6px;
+  }
+
+  li a.mailpoet-listing-groups-current span.mailpoet-listing-groups-count {
+    background-color: $color-secondary-light;
+  }
+
+  a.mailpoet-listing-groups-current span.mailpoet-listing-groups-title {
+    position: relative;
+  }
+
+  a.mailpoet-listing-groups-current span.mailpoet-listing-groups-title:after {
+    background: $color-secondary;
+    border-radius: 2px;
+    content: '';
+    height: 4px;
+    left: 0;
+    margin-top: 5px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+}
+
 .mailpoet_listing_loading tbody tr,
 .mailpoet_form_loading tbody tr {
   opacity: .2;

assets/css/src/settings/_typography.scss

@@ -1,6 +1,7 @@
 $font-family: 'proxima-soft', sans-serif;
 $font-size: 16px;
 $font-size-small: 14px;
+$font-size-extra-small: 12px;
 $line-height: 1.5;
 
 $heading-line-height: 1.25;

assets/js/src/listing/groups.jsx

@@ -13,18 +13,17 @@ class ListingGroups extends React.Component {
   }
 
   render() {
-    const groups = this.props.groups.map((group, index) => {
+    const groups = this.props.groups.map((group) => {
       if (group.name === 'trash' && group.count === 0) {
         return false;
       }
 
       const classes = classNames(
-        { current: (group.name === this.props.group) }
+        { 'mailpoet-listing-groups-current': (group.name === this.props.group) }
       );
 
       return (
         <li key={group.name}>
-          {(index > 0) ? ' |' : ''}
           <a
             href="#"
             className={classes}
@@ -34,20 +33,24 @@ class ListingGroups extends React.Component {
             }}
             data-automation-id={`filters_${group.label.replace(' ', '_').toLowerCase()}`}
           >
-            {group.label}
-            &nbsp;
-            <span className="count">
-            (
-              { parseInt(group.count, 10).toLocaleString() }
-            )
+            <span className="mailpoet-listing-groups-title">
+              {group.label}
             </span>
+            {group.count > 0 && (
+              <>
+                &nbsp;
+                <span className="mailpoet-listing-groups-count">
+                  { parseInt(group.count, 10).toLocaleString() }
+                </span>
+              </>
+            )}
           </a>
         </li>
       );
     });
 
     return (
-      <ul className="subsubsub">
+      <ul className="mailpoet-listing-groups">
         { groups }
       </ul>
     );

assets/js/src/listing/listing.jsx

@@ -593,7 +593,7 @@ class Listing extends React.Component {
       <>
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         { this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
-        <div>
+        <div className="mailpoet-listing">
           { groups }
           { search }
           <div className="tablenav top clearfix">

tests/acceptance/SettingsInactiveSubscribersChangeCest.php

@@ -47,12 +47,14 @@ class SettingsInactiveSubscribersChangeCest {
         $i->wait(2);
         $i->reloadPage();
         $i->waitForListingItemsToLoad();
-        $i->see('Inactive (0)');
+        $i->see('Inactive');
+        $i->dontSeeElement('[data-automation-id="filters_inactive"] .mailpoet-listing-groups-count');
         return;
       } catch (Exception $e) {
         continue;
       }
     }
-    $i->see('Inactive (0)');
+    $i->see('Inactive');
+    $i->dontSeeElement('[data-automation-id="filters_inactive"] .mailpoet-listing-groups-count');
   }
 }