From 6dc78b987237da5b0e3ef4d9bf4d441fab12ad97 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 17 Sep 2024 17:36:58 +0000
Subject: [PATCH] Fit and Finish UX Fixes (#263)

* fill send test message button

Signed-off-by: Joanne Wang <jowg@amazon.com>

* extend content to full width of page

Signed-off-by: Joanne Wang <jowg@amazon.com>

* fix spacing across buttons (8px)

Signed-off-by: Joanne Wang <jowg@amazon.com>

* add vertical spacing

Signed-off-by: Joanne Wang <jowg@amazon.com>

* fix header and content 16px

Signed-off-by: Joanne Wang <jowg@amazon.com>

* remove extra 10px padding

Signed-off-by: Joanne Wang <jowg@amazon.com>

* align active indicator

Signed-off-by: Joanne Wang <jowg@amazon.com>

* wrap h2 in Eui Title with size s prop

Signed-off-by: Joanne Wang <jowg@amazon.com>

* fix padding for elements from search bar 8px

Signed-off-by: Joanne Wang <jowg@amazon.com>

* remove bottom border in empty state

Signed-off-by: Joanne Wang <jowg@amazon.com>

* wip

Signed-off-by: Joanne Wang <jowg@amazon.com>

* fix original view monitors page

Signed-off-by: Joanne Wang <jowg@amazon.com>

* fix original spacing

Signed-off-by: Joanne Wang <jowg@amazon.com>

* run yarn test:jest -u

Signed-off-by: Joanne Wang <jowg@amazon.com>

* upgrade to v4

Signed-off-by: Joanne Wang <jowg@amazon.com>

---------

Signed-off-by: Joanne Wang <jowg@amazon.com>
(cherry picked from commit 7dd95ec17bebb0597e67afa059bd6d4161b83e2a)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../components/ContentPanel/ContentPanel.tsx  |  8 +--
 .../__snapshots__/ContentPanel.test.tsx.snap  | 24 +++----
 public/pages/Channels/Channels.tsx            |  4 +-
 .../ChannelControls.test.tsx.snap             |  2 +-
 .../ChannelDetails.test.tsx.snap              | 68 ++++++++-----------
 .../__snapshots__/Channels.test.tsx.snap      | 22 +++---
 .../Channels/components/ChannelControls.tsx   |  2 +-
 .../components/details/ChannelDetails.tsx     | 15 ++--
 public/pages/CreateChannel/CreateChannel.tsx  | 12 ++--
 .../ChannelNamePanel.test.tsx.snap            | 20 +++---
 public/pages/Emails/CreateRecipientGroup.tsx  | 13 ++--
 public/pages/Emails/CreateSESSender.tsx       | 13 ++--
 public/pages/Emails/CreateSender.tsx          | 13 ++--
 public/pages/Emails/EmailGroups.tsx           | 10 +--
 public/pages/Emails/EmailSenders.tsx          | 10 +--
 .../RecipientGroupsTable.test.tsx.snap        | 20 +++---
 .../__snapshots__/SendersTable.test.tsx.snap  | 22 +++---
 .../SendersTableControls.test.tsx.snap        |  2 +-
 .../forms/CreateRecipientGroupForm.tsx        |  4 +-
 .../components/forms/CreateSESSenderForm.tsx  |  4 +-
 .../components/forms/CreateSenderForm.tsx     |  4 +-
 .../tables/RecipientGroupsTable.tsx           |  9 ++-
 .../components/tables/SESSendersTable.tsx     |  6 +-
 .../Emails/components/tables/SendersTable.tsx |  6 +-
 .../tables/SendersTableControls.tsx           |  2 +-
 .../__snapshots__/Main.test.tsx.snap          | 22 +++---
 26 files changed, 163 insertions(+), 174 deletions(-)

diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
index 2f6acc7c..4a4b11fc 100644
--- a/public/components/ContentPanel/ContentPanel.tsx
+++ b/public/components/ContentPanel/ContentPanel.tsx
@@ -8,7 +8,7 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 
@@ -40,7 +40,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       alignItems="center"
     >
       <EuiFlexItem>
-        <EuiText size={titleSize}>
+        <EuiTitle size={titleSize}>
           <h2>
             {title}
             {total !== undefined ? (
@@ -49,7 +49,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
               >{` (${total})`}</span>
             ) : null}
           </h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexItem>
       {actions ? (
         <EuiFlexItem grow={false}>
@@ -70,7 +70,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
 
     <EuiHorizontalRule margin="s" className={horizontalRuleClassName} />
 
-    <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
+    <div style={{ padding: '0px', ...bodyStyles }}>{children}</div>
   </EuiPanel>
 );
 
diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
index 13d35e14..8c25393c 100644
--- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
+++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
@@ -11,13 +11,11 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -39,7 +37,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel
@@ -59,20 +57,18 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel
diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx
index 6e28b2fd..77441eec 100644
--- a/public/pages/Channels/Channels.tsx
+++ b/public/pages/Channels/Channels.tsx
@@ -277,11 +277,11 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
             appRightControls={headerControls}
             appLeftControls={[{ renderComponent: totalChannels }]}
           />
-          <ContentPanel>
+          <ContentPanel panelStyles={{ padding: this.state.total < 1? '16px 16px 0px' : '16px' }}>
             <div style={{ marginBottom: '10px' }}>
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 {channelControlsComponent}
-                <div style={{ marginLeft: '10px' }}>
+                <div style={{ marginLeft: '16px' }}>
                   {channelActionsComponent}
                 </div>
               </div>
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
index acf23670..4af9ef5d 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ChannelControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
index b03d0e62..2c01d3d2 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -25,12 +25,12 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -48,7 +48,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -57,13 +56,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -148,7 +145,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -157,13 +153,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -180,13 +174,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -201,12 +195,12 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -224,7 +218,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -233,13 +226,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -324,7 +315,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -333,13 +323,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -355,13 +343,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 exports[`<ChannelDetails/> spec renders the component 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="max-width: 1316px;"
+  style="padding: 0px 8px 0px 0px;"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -376,12 +364,12 @@ exports[`<ChannelDetails/> spec renders the component 1`] = `
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-bottom: 5px;"
+        style="padding-top: 5px;"
       />
     </div>
   </div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
diff --git a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
index 77e8c13b..75b32f3c 100644
--- a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Channels
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        Channels
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -108,7 +106,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx
index 8024a88f..2de239f2 100644
--- a/public/pages/Channels/components/ChannelControls.tsx
+++ b/public/pages/Channels/components/ChannelControls.tsx
@@ -96,7 +96,7 @@ export const ChannelControls = (props: ChannelControlsProps) => {
   }
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup gutterSize={'m'}>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           fullWidth={true}
diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx
index 233f50f1..90549b89 100644
--- a/public/pages/Channels/components/details/ChannelDetails.tsx
+++ b/public/pages/Channels/components/details/ChannelDetails.tsx
@@ -33,6 +33,7 @@ import { ChannelDetailsActions } from './ChannelDetailsActions';
 import { ChannelSettingsDetails } from './ChannelSettingsDetails';
 import PageHeader from "../../../../components/PageHeader/PageHeader";
 import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
+import { getUseUpdatedUx } from '../../../../services/utils/constants';
 
 interface ChannelDetailsProps extends RouteComponentProps<{
   id: string
@@ -143,7 +144,7 @@ export function ChannelDetails(props: ChannelDetailsProps) {
     },
   ];
 
-  const actionsAndMuteComponent = <EuiFlexGroup gutterSize="m" alignItems="flexEnd">
+  const actionsAndMuteComponent = <EuiFlexGroup gutterSize="s" alignItems="center">
     <EuiFlexItem />
     <EuiFlexItem grow={false}>
       {channel && (
@@ -196,10 +197,11 @@ export function ChannelDetails(props: ChannelDetailsProps) {
       isDisabled: !channel?.is_enabled,
       run: sendTestMessage,
       label: 'Send test message',
+      fill: true,
     } as TopNavControlButtonData,
   ];
 
-  const badgeComponent = <EuiFlexItem grow={false} style={{ paddingBottom: 5 }}>
+  const badgeComponent = <EuiFlexItem grow={false} style={{ paddingTop: '5px' }}>
     {channel?.is_enabled === undefined ? null : channel.is_enabled ? (
       <EuiHealth color="success">Active</EuiHealth>
     ) : (
@@ -225,10 +227,10 @@ export function ChannelDetails(props: ChannelDetailsProps) {
           <EuiFlexGroup
           alignItems="center"
           gutterSize="m"
-          style={{ maxWidth: 1316 }}
+          style={{ padding: '0px 8px 0px 0px' }}
         >
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="m" alignItems="flexEnd">
+            <EuiFlexGroup gutterSize="m" alignItems="center">
               <EuiFlexItem grow={false}>
                 <EuiText size="s">
                   <h1>{channel?.name ?? '-'}</h1>
@@ -242,12 +244,12 @@ export function ChannelDetails(props: ChannelDetailsProps) {
         )}
       </PageHeader>
 
-      <EuiSpacer />
+      {!getUseUpdatedUx() && <EuiSpacer />}
+
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Name and description"
         titleSize="s"
-        panelStyles={{ maxWidth: 1300 }}
       >
         <ChannelDetailItems listItems={nameList} />
       </ContentPanel>
@@ -258,7 +260,6 @@ export function ChannelDetails(props: ChannelDetailsProps) {
         bodyStyles={{ padding: 'initial' }}
         title="Configurations"
         titleSize="s"
-        panelStyles={{ maxWidth: 1300 }}
       >
         <ChannelSettingsDetails channel={channel} />
       </ContentPanel>
diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx
index 3751f45c..6035f13b 100644
--- a/public/pages/CreateChannel/CreateChannel.tsx
+++ b/public/pages/CreateChannel/CreateChannel.tsx
@@ -373,13 +373,15 @@ export function CreateChannel(props: CreateChannelsProps) {
       <CreateChannelContext.Provider
         value={{ edit: props.edit, inputErrors, setInputErrors }}
       >
-       {!getUseUpdatedUx() && (
-          <EuiText size="s">
-            <h1>{`${props.edit ? 'Edit' : 'Create'} channel`}</h1>
-          </EuiText>
+        {!getUseUpdatedUx() && (
+          <>
+            <EuiText size="s">
+              <h1>{`${props.edit ? 'Edit' : 'Create'} channel`}</h1>
+            </EuiText>
+            <EuiSpacer />
+          </>
         )}
 
-        <EuiSpacer />
         <ChannelNamePanel
           name={name}
           setName={setName}
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
index 303884b0..d182ab00 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
@@ -11,13 +11,11 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name and description
-        </h2>
-      </div>
+        Name and description
+      </h2>
     </div>
   </div>
   <hr
@@ -120,13 +118,11 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name and description
-        </h2>
-      </div>
+        Name and description
+      </h2>
     </div>
   </div>
   <hr
diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx
index ee325fc0..05e0b184 100644
--- a/public/pages/Emails/CreateRecipientGroup.tsx
+++ b/public/pages/Emails/CreateRecipientGroup.tsx
@@ -111,17 +111,18 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiText size="s">
-          <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
+          </EuiText>
+          <EuiSpacer />
+        </>
       )}
 
-      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure recipient group"
         titleSize="s"
-        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateRecipientGroupForm
           name={name}
@@ -137,7 +138,7 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
         />
       </ContentPanel>
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
+      <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_GROUPS}`}>
             Cancel
diff --git a/public/pages/Emails/CreateSESSender.tsx b/public/pages/Emails/CreateSESSender.tsx
index 8b9f84ad..e517240a 100644
--- a/public/pages/Emails/CreateSESSender.tsx
+++ b/public/pages/Emails/CreateSESSender.tsx
@@ -102,17 +102,18 @@ export function CreateSESSender(props: CreateSESSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiText size="s">
-          <h1>{`${props.edit ? 'Edit' : 'Create'} SES sender`}</h1>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <h1>{`${props.edit ? 'Edit' : 'Create'} SES sender`}</h1>
+          </EuiText>
+          <EuiSpacer />
+        </>
       )}
 
-      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure sender"
         titleSize="s"
-        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateSESSenderForm
           senderName={senderName}
@@ -129,7 +130,7 @@ export function CreateSESSender(props: CreateSESSenderProps) {
       </ContentPanel>
 
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
+      <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
diff --git a/public/pages/Emails/CreateSender.tsx b/public/pages/Emails/CreateSender.tsx
index 31c5b282..067eb3fa 100644
--- a/public/pages/Emails/CreateSender.tsx
+++ b/public/pages/Emails/CreateSender.tsx
@@ -99,17 +99,18 @@ export function CreateSender(props: CreateSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiText size="s">
-          <h1>{`${props.edit ? 'Edit' : 'Create'} SMTP sender`}</h1>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <h1>{`${props.edit ? 'Edit' : 'Create'} SMTP sender`}</h1>
+          </EuiText>
+          <EuiSpacer />
+        </>
       )}
 
-      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure sender"
         titleSize="s"
-        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateSenderForm
           senderName={senderName}
@@ -128,7 +129,7 @@ export function CreateSender(props: CreateSenderProps) {
       </ContentPanel>
 
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
+      <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
diff --git a/public/pages/Emails/EmailGroups.tsx b/public/pages/Emails/EmailGroups.tsx
index 109e0808..ab0f4e04 100644
--- a/public/pages/Emails/EmailGroups.tsx
+++ b/public/pages/Emails/EmailGroups.tsx
@@ -29,12 +29,14 @@ export function EmailGroups(props: EmailGroupsProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiText size="s">
-          <h1>Email recipient groups</h1>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <h1>Email recipient groups</h1>
+          </EuiText>
+          <EuiSpacer />
+        </>
       )}
 
-      <EuiSpacer />
       <RecipientGroupsTable coreContext={coreContext}
         notificationService={props.notificationService}
       />
diff --git a/public/pages/Emails/EmailSenders.tsx b/public/pages/Emails/EmailSenders.tsx
index 05e7beb9..18ad03df 100644
--- a/public/pages/Emails/EmailSenders.tsx
+++ b/public/pages/Emails/EmailSenders.tsx
@@ -37,13 +37,15 @@ export function EmailSenders(props: EmailSendersProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiText size="s">
-          <h1>Email senders</h1>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <h1>Email senders</h1>
+          </EuiText>
+          <EuiSpacer />
+        </>
       )}
       {mainStateContext.availableConfigTypes.includes('smtp_account') && (
         <>
-          <EuiSpacer />
           <SendersTable coreContext={coreContext}
             notificationService={props.notificationService}
           />
diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
index fb2a223c..fc8edb5b 100644
--- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Recipient groups
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        Recipient groups
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
index 647c1655..e47b772a 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          SMTP senders
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        SMTP senders
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -107,7 +105,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
index 00bfecc5..ce5ff41c 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<SendersTableControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
diff --git a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
index 71eada79..1c03cbb1 100644
--- a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
+++ b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
@@ -60,7 +60,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiCompressedFormRow
         label={
           <span>
@@ -84,7 +84,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
         </>
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiCompressedFormRow
         label="Emails"
         style={{ maxWidth: '650px' }}
diff --git a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
index c9ef703d..c667b0ab 100644
--- a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
@@ -59,7 +59,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiCompressedFormRow
         label="Email address"
         style={{ maxWidth: '650px' }}
@@ -82,7 +82,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={6}>
           <EuiCompressedFormRow
diff --git a/public/pages/Emails/components/forms/CreateSenderForm.tsx b/public/pages/Emails/components/forms/CreateSenderForm.tsx
index d51d355b..ef60a810 100644
--- a/public/pages/Emails/components/forms/CreateSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSenderForm.tsx
@@ -74,7 +74,7 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={4}>
           <EuiCompressedFormRow
@@ -141,7 +141,7 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiCompressedFormRow
         label="Encryption method"
         style={{ maxWidth: '650px' }}
diff --git a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
index d7a1f27e..eb3f2504 100644
--- a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
+++ b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
@@ -308,8 +308,12 @@ export class RecipientGroupsTable extends Component<
               appRightControls={headerControls}
               appLeftControls={[{ renderComponent: totalEmailGroups }]}
             />
-            <ContentPanel>
-              <EuiFlexGroup>
+            <ContentPanel
+              panelStyles={{
+                padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
+              }}
+            >
+              <EuiFlexGroup gutterSize={'m'}>
                 <EuiFlexItem>
                   {searchComponent}
                 </EuiFlexItem>
@@ -321,7 +325,6 @@ export class RecipientGroupsTable extends Component<
                         iconType="arrowDown"
                         iconSide="right"
                         onClick={this.togglePopover}
-                        style={{ marginLeft: '10px' }} // Ensure spacing is correct
                       >
                         Actions
                       </EuiSmallButton>
diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx
index 2b5059b7..dc55ca9e 100644
--- a/public/pages/Emails/components/tables/SESSendersTable.tsx
+++ b/public/pages/Emails/components/tables/SESSendersTable.tsx
@@ -245,6 +245,9 @@ export class SESSendersTable extends Component<
       <>
         {getUseUpdatedUx() ? (
           <ContentPanel
+            panelStyles={{
+              padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
+            }}
             actions={
               <ContentPanelActions
                 actions={[
@@ -263,7 +266,7 @@ export class SESSendersTable extends Component<
             titleSize="s"
             total={this.state.total}
           >
-            <EuiFlexGroup>
+            <EuiFlexGroup gutterSize={'m'}>
               <EuiFlexItem>
                 {searchComponent}
               </EuiFlexItem>
@@ -275,7 +278,6 @@ export class SESSendersTable extends Component<
                       iconType="arrowDown"
                       iconSide="right"
                       onClick={this.togglePopover}
-                      style={{ marginLeft: '10px' }} // Ensure spacing is correct
                     >
                       Actions
                     </EuiSmallButton>
diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx
index dba914f5..bd928faa 100644
--- a/public/pages/Emails/components/tables/SendersTable.tsx
+++ b/public/pages/Emails/components/tables/SendersTable.tsx
@@ -269,6 +269,9 @@ export class SendersTable extends Component<
       <>
         {getUseUpdatedUx() ? (
           <ContentPanel
+            panelStyles={{
+              padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
+            }}
             actions={
               <ContentPanelActions
                 actions={[
@@ -287,7 +290,7 @@ export class SendersTable extends Component<
             titleSize="s"
             total={this.state.total}
           >
-            <EuiFlexGroup>
+            <EuiFlexGroup gutterSize={'m'}>
               <EuiFlexItem>
                 {senderControlComponent}
               </EuiFlexItem>
@@ -299,7 +302,6 @@ export class SendersTable extends Component<
                       iconType="arrowDown"
                       iconSide="right"
                       onClick={this.togglePopover}
-                      style={{ marginLeft: '10px' }} // Ensure spacing is correct
                     >
                       Actions
                     </EuiSmallButton>
diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx
index 5bb879d9..e6cea6f1 100644
--- a/public/pages/Emails/components/tables/SendersTableControls.tsx
+++ b/public/pages/Emails/components/tables/SendersTableControls.tsx
@@ -63,7 +63,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
   }
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup gutterSize={'m'}>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           data-test-subj="senders-table-search-input"
diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
index 49182f1a..65eef144 100644
--- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
+++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
@@ -116,18 +116,16 @@ exports[`<Main /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2>
-              Channels
-              <span
-                style="color: rgb(159, 159, 159); font-weight: 300;"
-              >
-                 (0)
-              </span>
-            </h2>
-          </div>
+            Channels
+            <span
+              style="color: rgb(159, 159, 159); font-weight: 300;"
+            >
+               (0)
+            </span>
+          </h2>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -213,7 +211,7 @@ exports[`<Main /> spec renders the component 1`] = `
         style="padding: initial;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem"