Styling of Dynamic Segment Listing

[MAILPOET-5395]

mailpoet/assets/css/src/mailpoet-dynamic-segments.scss

@@ -38,3 +38,37 @@
 .mailpoet-confirm-dialog {
   max-width: 600px;
 }
+
+.mailpoet-segments-listing-header {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 120px auto auto;
+  grid-template-rows: auto auto;
+  padding: 8px 16px 24px;
+
+  .mailpoet-segments-listing-bulk-actions {
+    grid-column: 1/2;
+    grid-row: 2/2;
+  }
+
+  .mailpoet-segments-listing-notices__notice-list {
+    grid-column: 1/4;
+    grid-row: 1/1;
+
+    .components-notice {
+      margin: 0;
+    }
+  }
+
+  .mailpoet-segments-listing-search {
+    grid-column: 2/3;
+    grid-row: 2/2;
+    max-width: 430px;
+  }
+}
+
+.woocommerce-table {
+  .components-card__header {
+    display: none;
+  }
+}

mailpoet/assets/js/src/segments/dynamic/list/bulk-actions.tsx

@@ -46,7 +46,7 @@ export function BulkActions({ tab, onClick }: BulkActionsProps): JSX.Element {
     <SelectControl
       multiple={false}
       hideLabelFromVision
-      className="mailpoet-segments-listing-group"
+      className="mailpoet-segments-listing-bulk-actions"
       label={__('Bulk Actions', 'mailpoet')}
       options={bulkActions}
       value="0"

mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx

@@ -149,8 +149,8 @@ export function ListingTabContent({ tab }: ListingTableProps): JSX.Element {
 
   return (
     <>
-      <DynamicSegmentsListNotices />
       <div className="mailpoet-segments-listing-header">
+        <DynamicSegmentsListNotices />
         <BulkActions
           tab={tab}
           onClick={(selected, action) => {

mailpoet/assets/js/src/segments/dynamic/list/notices.tsx

@@ -28,16 +28,16 @@ export function DynamicSegmentsListNotices(): JSX.Element {
     <>
       <NoticeList
         notices={nonDismissibleNotices}
-        className="mailpoet-automation-editor-notices__notice-list"
+        className="mailpoet-segments-listing-notices__notice-list"
       />
       <NoticeList
         notices={dismissibleNotices}
-        className="mailpoet-automation-editor-notices__notice-list"
+        className="mailpoet-segments-listing-notices__notice-list"
         onRemove={removeNotice}
       />
       <SnackbarList
         notices={snackbarNotices}
-        className="mailpoet-automation-editor-notices__snackbar-list"
+        className="mailpoet-segments-listing-notices__notice-list"
         onRemove={removeNotice}
       />
     </>