From f3685bcb8d7797511f3553359b51aa9dcc88e57c Mon Sep 17 00:00:00 2001
From: David Remer <webmaster@websupporter.net>
Date: Thu, 30 Nov 2023 15:49:18 +0200
Subject: [PATCH] Styling of Dynamic Segment Listing

[MAILPOET-5395]
---
 .../css/src/mailpoet-dynamic-segments.scss    | 34 +++++++++++++++++++
 .../segments/dynamic/list/bulk-actions.tsx    |  2 +-
 .../dynamic/list/listing-tab-content.tsx      |  2 +-
 .../js/src/segments/dynamic/list/notices.tsx  |  6 ++--
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss b/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
index 626fdce9ec..bef77ef78f 100644
--- a/mailpoet/assets/css/src/mailpoet-dynamic-segments.scss
+++ b/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;
+  }
+}
diff --git a/mailpoet/assets/js/src/segments/dynamic/list/bulk-actions.tsx b/mailpoet/assets/js/src/segments/dynamic/list/bulk-actions.tsx
index 022931654d..0e3eac62c2 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list/bulk-actions.tsx
+++ b/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"
diff --git a/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx b/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
index 9bbd07c9d7..029bf86646 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list/listing-tab-content.tsx
+++ b/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) => {
diff --git a/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx b/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
index a6a1a7338d..ced45f4c87 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list/notices.tsx
+++ b/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}
       />
     </>