From a5066a9afc204421f54879ff8c1c1189fde8e780 Mon Sep 17 00:00:00 2001
From: Miki <amoo_miki@yahoo.com>
Date: Mon, 19 Aug 2024 08:21:28 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#231)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonEmpty

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedRadio and EuiCompressedRadioGroup

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedEuiTextArea

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedComboBox

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallFilterButton

Signed-off-by: Miki <miki@amazon.com>

* Update snapshots and tests

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>
---
 public/pages/Channels/Channels.tsx            |  10 +-
 .../ChannelActions.test.tsx.snap              |   8 +-
 .../ChannelControls.test.tsx.snap             |  10 +-
 .../ChannelDetailsActions.test.tsx.snap       |   6 +-
 .../__snapshots__/Channels.test.tsx.snap      |  16 +-
 .../DetailsListModal.test.tsx.snap            |  73 +++++----
 .../DetailsTableModal.test.tsx.snap           | 146 ++++++++++--------
 .../Channels/components/ChannelActions.tsx    |   6 +-
 .../Channels/components/ChannelControls.tsx   |  14 +-
 .../components/details/ChannelDetails.tsx     |   5 +-
 .../details/ChannelDetailsActions.tsx         |   6 +-
 .../components/modals/DeleteChannelModal.tsx  |  14 +-
 .../components/modals/DetailsListModal.tsx    |   6 +-
 .../components/modals/DetailsTableModal.tsx   |   6 +-
 .../components/modals/MuteChannelModal.tsx    |  10 +-
 public/pages/CreateChannel/CreateChannel.tsx  |  24 +--
 .../ChannelNamePanel.test.tsx.snap            |  24 +--
 .../__snapshots__/ChimeSettings.test.tsx.snap |  12 +-
 .../CustomWebhookSettings.test.tsx.snap       |  32 ++--
 .../MicrosoftTeamsSettings.test.tsx.snap      |  12 +-
 .../__snapshots__/SlackSettings.test.tsx.snap |  12 +-
 .../components/ChannelNamePanel.tsx           |  14 +-
 .../components/ChimeSettings.tsx              |   8 +-
 .../components/CustomWebhookSettings.tsx      |  52 +++----
 .../components/EmailSettings.tsx              |  56 +++----
 .../components/MicrosoftTeamsSettings.tsx     |   8 +-
 .../CreateChannel/components/SNSSettings.tsx  |  22 +--
 .../components/SlackSettings.tsx              |   8 +-
 .../components/WebhookHeaders.tsx             |  30 ++--
 .../modals/CreateRecipientGroupModal.tsx      |  10 +-
 .../modals/CreateSESSenderModal.tsx           |  10 +-
 .../components/modals/CreateSenderModal.tsx   |  10 +-
 public/pages/Emails/CreateRecipientGroup.tsx  |  12 +-
 public/pages/Emails/CreateSESSender.tsx       |  12 +-
 public/pages/Emails/CreateSender.tsx          |  12 +-
 .../CreateRecipientGroupForm.test.tsx.snap    |  12 +-
 .../CreateSESSenderForm.test.tsx.snap         |  12 +-
 .../CreateSenderForm.test.tsx.snap            |  12 +-
 .../RecipientGroupsTable.test.tsx.snap        |  14 +-
 .../__snapshots__/SendersTable.test.tsx.snap  |  16 +-
 .../SendersTableControls.test.tsx.snap        |   8 +-
 .../forms/CreateRecipientGroupForm.tsx        |  26 ++--
 .../components/forms/CreateSESSenderForm.tsx  |  28 ++--
 .../components/forms/CreateSenderForm.tsx     |  38 ++---
 .../modals/DeleteRecipientGroupModal.tsx      |  14 +-
 .../components/modals/DeleteSenderModal.tsx   |  14 +-
 .../tables/RecipientGroupsTable.tsx           |  22 +--
 .../components/tables/SESSendersTable.tsx     |  22 +--
 .../Emails/components/tables/SendersTable.tsx |  18 +--
 .../tables/SendersTableControls.tsx           |  10 +-
 .../__snapshots__/Main.test.tsx.snap          |  16 +-
 51 files changed, 510 insertions(+), 488 deletions(-)

diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx
index f472761a..cea25925 100644
--- a/public/pages/Channels/Channels.tsx
+++ b/public/pages/Channels/Channels.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiHealth,
   EuiHorizontalRule,
@@ -238,9 +238,9 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
                 },
                 {
                   component: (
-                    <EuiButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
+                    <EuiSmallButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
                       Create channel
-                    </EuiButton>
+                    </EuiSmallButton>
                   ),
                 },
               ]}
@@ -269,9 +269,9 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
                 title={<h2>No channels to display</h2>}
                 body="To send or receive notifications, you will need to create a notification channel."
                 actions={
-                  <EuiButton href={`#${ROUTES.CREATE_CHANNEL}`}>
+                  <EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
                     Create channel
-                  </EuiButton>
+                  </EuiSmallButton>
                 }
               />
             }
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelActions.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelActions.test.tsx.snap
index 40a3119e..c3a5080a 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelActions.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelActions.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<ChannelActions/> spec clicks in the popover 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -48,7 +48,7 @@ exports[`<ChannelActions/> spec renders the action button disabled by default 1`
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -87,7 +87,7 @@ exports[`<ChannelActions/> spec renders the popover 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -127,7 +127,7 @@ exports[`<ChannelActions/> spec renders the popover with multiple selected chann
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
index 2d1a5ae1..acf23670 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
@@ -8,13 +8,13 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
           placeholder="Search"
           type="search"
         />
@@ -26,7 +26,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+              class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
               focusable="false"
               height="16"
               role="img"
@@ -56,7 +56,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
             type="button"
           >
             <span
@@ -98,7 +98,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
             type="button"
           >
             <span
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap
index 6fc5ed19..ec5263a3 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<ChannelDetailsActions /> spec clicks buttons in popover 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -48,7 +48,7 @@ exports[`<ChannelDetailsActions /> spec opens popover 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -88,7 +88,7 @@ exports[`<ChannelDetailsActions /> spec renders the component 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
index 6d19547c..70e53c08 100644
--- a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     disabled=""
                     type="button"
                   >
@@ -79,7 +79,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <a
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 href="#/create-channel"
                 rel="noreferrer"
               >
@@ -112,13 +112,13 @@ exports[`<Channels/> spec renders the empty component 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldSearch euiFieldSearch--fullWidth"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
               placeholder="Search"
               type="search"
             />
@@ -130,7 +130,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -160,7 +160,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                 type="button"
               >
                 <span
@@ -202,7 +202,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                 type="button"
               >
                 <span
@@ -511,7 +511,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
                         class="euiSpacer euiSpacer--l"
                       />
                       <a
-                        class="euiButton euiButton--primary"
+                        class="euiButton euiButton--primary euiButton--small"
                         href="#/create-channel"
                         rel="noreferrer"
                       >
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
index 902a09ac..dec65dee 100644
--- a/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
@@ -166,7 +166,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                         class="euiModalFooter"
                       >
                         <button
-                          class="euiButton euiButton--primary euiButton--fill"
+                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                           type="button"
                         >
                           <span
@@ -397,7 +397,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                 class="euiModalFooter"
                               >
                                 <button
-                                  class="euiButton euiButton--primary euiButton--fill"
+                                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                   type="button"
                                 >
                                   <span
@@ -560,7 +560,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                   class="euiModalFooter"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                     type="button"
                                   >
                                     <span
@@ -723,7 +723,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                     class="euiModalFooter"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       type="button"
                                     >
                                       <span
@@ -874,7 +874,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                       class="euiModalFooter"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         type="button"
                                       >
                                         <span
@@ -1135,52 +1135,59 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                               <div
                                 className="euiModalFooter"
                               >
-                                <EuiButton
+                                <EuiSmallButton
                                   fill={true}
                                   onClick={[MockFunction]}
                                 >
-                                  <EuiButtonDisplay
-                                    baseClassName="euiButton"
-                                    disabled={false}
-                                    element="button"
+                                  <EuiButton
                                     fill={true}
-                                    isDisabled={false}
                                     onClick={[MockFunction]}
-                                    type="button"
+                                    size="s"
                                   >
-                                    <button
-                                      className="euiButton euiButton--primary euiButton--fill"
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       disabled={false}
+                                      element="button"
+                                      fill={true}
+                                      isDisabled={false}
                                       onClick={[MockFunction]}
-                                      style={
-                                        Object {
-                                          "minWidth": undefined,
-                                        }
-                                      }
+                                      size="s"
                                       type="button"
                                     >
-                                      <EuiButtonContent
-                                        className="euiButton__content"
-                                        iconSide="left"
-                                        textProps={
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                        disabled={false}
+                                        onClick={[MockFunction]}
+                                        style={
                                           Object {
-                                            "className": "euiButton__text",
+                                            "minWidth": undefined,
                                           }
                                         }
+                                        type="button"
                                       >
-                                        <span
-                                          className="euiButtonContent euiButton__content"
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButton__text"
+                                            className="euiButtonContent euiButton__content"
                                           >
-                                            Close
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Close
+                                            </span>
                                           </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonDisplay>
-                                </EuiButton>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </EuiSmallButton>
                               </div>
                             </EuiModalFooter>
                           </div>
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
index e5773bb0..5ce7588b 100644
--- a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
@@ -230,7 +230,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                         class="euiModalFooter"
                       >
                         <button
-                          class="euiButton euiButton--primary euiButton--fill"
+                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                           type="button"
                         >
                           <span
@@ -525,7 +525,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                 class="euiModalFooter"
                               >
                                 <button
-                                  class="euiButton euiButton--primary euiButton--fill"
+                                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                   type="button"
                                 >
                                   <span
@@ -752,7 +752,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                   class="euiModalFooter"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                     type="button"
                                   >
                                     <span
@@ -979,7 +979,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                     class="euiModalFooter"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       type="button"
                                     >
                                       <span
@@ -1194,7 +1194,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                       class="euiModalFooter"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         type="button"
                                       >
                                         <span
@@ -1715,52 +1715,59 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                               <div
                                 className="euiModalFooter"
                               >
-                                <EuiButton
+                                <EuiSmallButton
                                   fill={true}
                                   onClick={[MockFunction]}
                                 >
-                                  <EuiButtonDisplay
-                                    baseClassName="euiButton"
-                                    disabled={false}
-                                    element="button"
+                                  <EuiButton
                                     fill={true}
-                                    isDisabled={false}
                                     onClick={[MockFunction]}
-                                    type="button"
+                                    size="s"
                                   >
-                                    <button
-                                      className="euiButton euiButton--primary euiButton--fill"
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       disabled={false}
+                                      element="button"
+                                      fill={true}
+                                      isDisabled={false}
                                       onClick={[MockFunction]}
-                                      style={
-                                        Object {
-                                          "minWidth": undefined,
-                                        }
-                                      }
+                                      size="s"
                                       type="button"
                                     >
-                                      <EuiButtonContent
-                                        className="euiButton__content"
-                                        iconSide="left"
-                                        textProps={
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                        disabled={false}
+                                        onClick={[MockFunction]}
+                                        style={
                                           Object {
-                                            "className": "euiButton__text",
+                                            "minWidth": undefined,
                                           }
                                         }
+                                        type="button"
                                       >
-                                        <span
-                                          className="euiButtonContent euiButton__content"
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButton__text"
+                                            className="euiButtonContent euiButton__content"
                                           >
-                                            Close
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Close
+                                            </span>
                                           </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonDisplay>
-                                </EuiButton>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </EuiSmallButton>
                               </div>
                             </EuiModalFooter>
                           </div>
@@ -2075,7 +2082,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                         class="euiModalFooter"
                       >
                         <button
-                          class="euiButton euiButton--primary euiButton--fill"
+                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                           type="button"
                         >
                           <span
@@ -2370,7 +2377,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                 class="euiModalFooter"
                               >
                                 <button
-                                  class="euiButton euiButton--primary euiButton--fill"
+                                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                   type="button"
                                 >
                                   <span
@@ -2597,7 +2604,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                   class="euiModalFooter"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                     type="button"
                                   >
                                     <span
@@ -2824,7 +2831,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                     class="euiModalFooter"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       type="button"
                                     >
                                       <span
@@ -3039,7 +3046,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                       class="euiModalFooter"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         type="button"
                                       >
                                         <span
@@ -3560,52 +3567,59 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                               <div
                                 className="euiModalFooter"
                               >
-                                <EuiButton
+                                <EuiSmallButton
                                   fill={true}
                                   onClick={[MockFunction]}
                                 >
-                                  <EuiButtonDisplay
-                                    baseClassName="euiButton"
-                                    disabled={false}
-                                    element="button"
+                                  <EuiButton
                                     fill={true}
-                                    isDisabled={false}
                                     onClick={[MockFunction]}
-                                    type="button"
+                                    size="s"
                                   >
-                                    <button
-                                      className="euiButton euiButton--primary euiButton--fill"
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       disabled={false}
+                                      element="button"
+                                      fill={true}
+                                      isDisabled={false}
                                       onClick={[MockFunction]}
-                                      style={
-                                        Object {
-                                          "minWidth": undefined,
-                                        }
-                                      }
+                                      size="s"
                                       type="button"
                                     >
-                                      <EuiButtonContent
-                                        className="euiButton__content"
-                                        iconSide="left"
-                                        textProps={
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                        disabled={false}
+                                        onClick={[MockFunction]}
+                                        style={
                                           Object {
-                                            "className": "euiButton__text",
+                                            "minWidth": undefined,
                                           }
                                         }
+                                        type="button"
                                       >
-                                        <span
-                                          className="euiButtonContent euiButton__content"
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
                                         >
                                           <span
-                                            className="euiButton__text"
+                                            className="euiButtonContent euiButton__content"
                                           >
-                                            Close
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Close
+                                            </span>
                                           </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonDisplay>
-                                </EuiButton>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </EuiSmallButton>
                               </div>
                             </EuiModalFooter>
                           </div>
diff --git a/public/pages/Channels/components/ChannelActions.tsx b/public/pages/Channels/components/ChannelActions.tsx
index f74e74b8..b809e537 100644
--- a/public/pages/Channels/components/ChannelActions.tsx
+++ b/public/pages/Channels/components/ChannelActions.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { EuiSmallButton, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { SERVER_DELAY } from '../../../../common';
 import { ChannelItemType } from '../../../../models/interfaces';
@@ -83,14 +83,14 @@ export function ChannelActions(props: ChannelActionsProps) {
         <EuiPopover
           panelPaddingSize="none"
           button={
-            <EuiButton
+            <EuiSmallButton
               iconType="arrowDown"
               iconSide="right"
               disabled={props.selected.length === 0}
               onClick={() => setIsPopoverOpen(!isPopoverOpen)}
             >
               Actions
-            </EuiButton>
+            </EuiSmallButton>
           }
           isOpen={isPopoverOpen}
           closePopover={() => setIsPopoverOpen(false)}
diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx
index 1405a3a6..8024a88f 100644
--- a/public/pages/Channels/components/ChannelControls.tsx
+++ b/public/pages/Channels/components/ChannelControls.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiFieldSearch,
-  EuiFilterButton,
+  EuiCompressedFieldSearch,
+  EuiSmallFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
   EuiFlexGroup,
@@ -98,7 +98,7 @@ export const ChannelControls = (props: ChannelControlsProps) => {
   return (
     <EuiFlexGroup>
       <EuiFlexItem>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           fullWidth={true}
           placeholder="Search"
           onSearch={props.onSearchChange}
@@ -109,13 +109,13 @@ export const ChannelControls = (props: ChannelControlsProps) => {
         <EuiFilterGroup>
           <EuiPopover
             button={
-              <EuiFilterButton
+              <EuiSmallFilterButton
                 iconType="arrowDown"
                 grow={false}
                 onClick={() => setIsStatePopoverOpen(!isStatePopoverOpen)}
               >
                 {isItemSelected(stateItems) ? <b>Status</b> : 'Status'}
-              </EuiFilterButton>
+              </EuiSmallFilterButton>
             }
             isOpen={isStatePopoverOpen}
             closePopover={() => setIsStatePopoverOpen(false)}
@@ -138,13 +138,13 @@ export const ChannelControls = (props: ChannelControlsProps) => {
           </EuiPopover>
           <EuiPopover
             button={
-              <EuiFilterButton
+              <EuiSmallFilterButton
                 iconType="arrowDown"
                 grow={false}
                 onClick={() => setIsTypePopoverOpen(!isTypePopoverOpen)}
               >
                 {isItemSelected(typeItems) ? <b>Type</b> : 'Type'}
-              </EuiFilterButton>
+              </EuiSmallFilterButton>
             }
             isOpen={isTypePopoverOpen}
             closePopover={() => setIsTypePopoverOpen(false)}
diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx
index e238cec0..27bab75b 100644
--- a/public/pages/Channels/components/details/ChannelDetails.tsx
+++ b/public/pages/Channels/components/details/ChannelDetails.tsx
@@ -5,6 +5,7 @@
 
 import {
   EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiGlobalToastList,
@@ -164,7 +165,7 @@ export function ChannelDetails(props: ChannelDetailsProps) {
           {channel && (
             <ModalConsumer>
               {({ onShow }) => (
-                <EuiButton
+                <EuiSmallButton
                   data-test-subj="channel-details-mute-button"
                   iconType={channel?.is_enabled ? 'bellSlash' : 'bell'}
                   onClick={() => {
@@ -189,7 +190,7 @@ export function ChannelDetails(props: ChannelDetailsProps) {
                   }}
                 >
                   {channel?.is_enabled ? 'Mute channel' : 'Unmute channel'}
-                </EuiButton>
+                </EuiSmallButton>
               )}
             </ModalConsumer>
           )}
diff --git a/public/pages/Channels/components/details/ChannelDetailsActions.tsx b/public/pages/Channels/components/details/ChannelDetailsActions.tsx
index e7bb7d1e..dcbf94e2 100644
--- a/public/pages/Channels/components/details/ChannelDetailsActions.tsx
+++ b/public/pages/Channels/components/details/ChannelDetailsActions.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiPopover,
   EuiTextColor,
@@ -81,13 +81,13 @@ export function ChannelDetailsActions(props: ChannelDetailsActionsProps) {
         <EuiPopover
           panelPaddingSize="none"
           button={
-            <EuiButton
+            <EuiSmallButton
               iconType="arrowDown"
               iconSide="right"
               onClick={() => setIsPopoverOpen(!isPopoverOpen)}
             >
               Actions
-            </EuiButton>
+            </EuiSmallButton>
           }
           isOpen={isPopoverOpen}
           closePopover={() => setIsPopoverOpen(false)}
diff --git a/public/pages/Channels/components/modals/DeleteChannelModal.tsx b/public/pages/Channels/components/modals/DeleteChannelModal.tsx
index 1ab66e7e..636ed1f4 100644
--- a/public/pages/Channels/components/modals/DeleteChannelModal.tsx
+++ b/public/pages/Channels/components/modals/DeleteChannelModal.tsx
@@ -4,9 +4,9 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -69,7 +69,7 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
           <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="delete"
             value={input}
             onChange={(e) => setInput(e.target.value)}
@@ -78,10 +78,10 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
+              <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 fill
                 data-test-subj="delete-channel-modal-delete-button"
                 color="danger"
@@ -117,7 +117,7 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
                 disabled={input !== 'delete'}
               >
                 Delete
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/pages/Channels/components/modals/DetailsListModal.tsx b/public/pages/Channels/components/modals/DetailsListModal.tsx
index fc590001..9a84ca0f 100644
--- a/public/pages/Channels/components/modals/DetailsListModal.tsx
+++ b/public/pages/Channels/components/modals/DetailsListModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiHorizontalRule,
   EuiModal,
   EuiModalBody,
@@ -46,9 +46,9 @@ export function DetailsListModal(props: DetailsListModalProps) {
             })}
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButton fill onClick={props.onClose}>
+            <EuiSmallButton fill onClick={props.onClose}>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/Channels/components/modals/DetailsTableModal.tsx b/public/pages/Channels/components/modals/DetailsTableModal.tsx
index 11ee09ac..773fe1f3 100644
--- a/public/pages/Channels/components/modals/DetailsTableModal.tsx
+++ b/public/pages/Channels/components/modals/DetailsTableModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiModal,
   EuiModalBody,
@@ -55,9 +55,9 @@ export function DetailsTableModal(props: DetailsTableModalProps) {
             <EuiInMemoryTable items={props.items} columns={columns} />
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButton fill onClick={props.onClose}>
+            <EuiSmallButton fill onClick={props.onClose}>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/Channels/components/modals/MuteChannelModal.tsx b/public/pages/Channels/components/modals/MuteChannelModal.tsx
index 3a0d7fce..b1b807f6 100644
--- a/public/pages/Channels/components/modals/MuteChannelModal.tsx
+++ b/public/pages/Channels/components/modals/MuteChannelModal.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -48,10 +48,10 @@ export const MuteChannelModal = (props: MuteChannelModalProps) => {
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
+              <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 fill
                 data-test-subj="mute-channel-modal-mute-button"
                 onClick={async () => {
@@ -75,7 +75,7 @@ export const MuteChannelModal = (props: MuteChannelModalProps) => {
                 }}
               >
                 Mute
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx
index f814794c..c6c30e52 100644
--- a/public/pages/CreateChannel/CreateChannel.tsx
+++ b/public/pages/CreateChannel/CreateChannel.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiSuperSelectOption,
   EuiText,
   EuiTitle,
@@ -383,7 +383,7 @@ export function CreateChannel(props: CreateChannelsProps) {
           title="Configurations"
           titleSize="s"
         >
-          <EuiFormRow label="Channel type">
+          <EuiCompressedFormRow label="Channel type">
             {props.edit ? (
               <EuiText size="s">{CHANNEL_TYPE[channelType]}</EuiText>
             ) : (
@@ -391,7 +391,7 @@ export function CreateChannel(props: CreateChannelsProps) {
                 <EuiText size="xs" color="subdued">
                   Channel type cannot be changed after the channel is created.
                 </EuiText>
-                <EuiSuperSelect
+                <EuiCompressedSuperSelect
                   options={channelTypeOptions}
                   valueOfSelected={channelType}
                   onChange={setChannelType}
@@ -399,7 +399,7 @@ export function CreateChannel(props: CreateChannelsProps) {
                 />
               </>
             )}
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           {channelType === BACKEND_CHANNEL_TYPE.SLACK ? (
             <SlackSettings
               slackWebhook={slackWebhook}
@@ -462,10 +462,10 @@ export function CreateChannel(props: CreateChannelsProps) {
         <EuiSpacer />
         <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty href={prevURL}>Cancel</EuiButtonEmpty>
+            <EuiSmallButtonEmpty href={prevURL}>Cancel</EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="create-channel-send-test-message-button"
               onClick={() => {
                 if (!isInputValid()) {
@@ -478,10 +478,10 @@ export function CreateChannel(props: CreateChannelsProps) {
               }}
             >
               Send test message
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill
               data-test-subj="create-channel-create-button"
               isLoading={loading}
@@ -523,7 +523,7 @@ export function CreateChannel(props: CreateChannelsProps) {
               }}
             >
               {props.edit ? 'Save' : 'Create'}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </CreateChannelContext.Provider>
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
index e1315e05..0e4b7f41 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -43,14 +43,14 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
               aria-describedby="random_html_id-error-0"
-              class="euiFieldText"
+              class="euiFieldText euiFieldText--compressed"
               data-test-subj="create-channel-name-input"
               id="random_html_id"
               placeholder="Enter channel name"
@@ -69,7 +69,7 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
       </div>
     </div>
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -93,10 +93,10 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <textarea
-          class="euiTextArea euiTextArea--resizeVertical"
+          class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
           data-test-subj="create-channel-description-input"
           placeholder="What is the purpose of this channel?"
-          rows="6"
+          rows="3"
           style="height: 4.1rem;"
         >
           test description
@@ -132,7 +132,7 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -150,13 +150,13 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldText"
+              class="euiFieldText euiFieldText--compressed"
               data-test-subj="create-channel-name-input"
               id="random_html_id"
               placeholder="Enter channel name"
@@ -168,7 +168,7 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
       </div>
     </div>
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -192,10 +192,10 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <textarea
-          class="euiTextArea euiTextArea--resizeVertical"
+          class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
           data-test-subj="create-channel-description-input"
           placeholder="What is the purpose of this channel?"
-          rows="6"
+          rows="3"
           style="height: 4.1rem;"
         >
           test description
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChimeSettings.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChimeSettings.test.tsx.snap
index 9f285690..e0150ca7 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/ChimeSettings.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChimeSettings.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ChimeSettings /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -21,13 +21,13 @@ exports[`<ChimeSettings /> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-chime-webhook-input"
           id="random_html_id"
           placeholder="https://hooks.chime.aws/incomingwebhooks/XXXXX..."
@@ -42,7 +42,7 @@ exports[`<ChimeSettings /> spec renders the component 1`] = `
 
 exports[`<ChimeSettings /> spec renders the component with error 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -61,14 +61,14 @@ exports[`<ChimeSettings /> spec renders the component with error 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-chime-webhook-input"
           id="random_html_id"
           placeholder="https://hooks.chime.aws/incomingwebhooks/XXXXX..."
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/CustomWebhookSettings.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/CustomWebhookSettings.test.tsx.snap
index 0182bb90..2a1ff0ec 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/CustomWebhookSettings.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/CustomWebhookSettings.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<CustomWebhookSettings /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -32,7 +32,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 1`] = `
             value=""
           />
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
@@ -46,7 +46,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 1`] = `
               <button
                 aria-haspopup="true"
                 aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
+                class="euiSuperSelectControl euiSuperSelectControl--compressed"
                 type="button"
               />
               <div
@@ -57,7 +57,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -82,7 +82,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 1`] = `
 
 exports[`<CustomWebhookSettings /> spec renders the component 2`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -112,7 +112,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 2`] = `
             value=""
           />
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
@@ -126,7 +126,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 2`] = `
               <button
                 aria-haspopup="true"
                 aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
+                class="euiSuperSelectControl euiSuperSelectControl--compressed"
                 type="button"
               />
               <div
@@ -137,7 +137,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 2`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -162,7 +162,7 @@ exports[`<CustomWebhookSettings /> spec renders the component 2`] = `
 
 exports[`<CustomWebhookSettings /> spec renders the component with errors 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -192,7 +192,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 1`] =
             value=""
           />
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
@@ -206,7 +206,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 1`] =
               <button
                 aria-haspopup="true"
                 aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
+                class="euiSuperSelectControl euiSuperSelectControl--compressed"
                 type="button"
               />
               <div
@@ -217,7 +217,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 1`] =
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                    class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -243,7 +243,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 1`] =
 
 exports[`<CustomWebhookSettings /> spec renders the component with errors 2`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -273,7 +273,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 2`] =
             value=""
           />
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
@@ -287,7 +287,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 2`] =
               <button
                 aria-haspopup="true"
                 aria-labelledby="random_html_id random_html_id"
-                class="euiSuperSelectControl"
+                class="euiSuperSelectControl euiSuperSelectControl--compressed"
                 type="button"
               />
               <div
@@ -298,7 +298,7 @@ exports[`<CustomWebhookSettings /> spec renders the component with errors 2`] =
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                    class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                     focusable="false"
                     height="16"
                     role="img"
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/MicrosoftTeamsSettings.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/MicrosoftTeamsSettings.test.tsx.snap
index daeb6639..5d6cbbd2 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/MicrosoftTeamsSettings.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/MicrosoftTeamsSettings.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<MicrosoftTeamsSettings /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -21,13 +21,13 @@ exports[`<MicrosoftTeamsSettings /> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-microsoftTeams-webhook-input"
           id="random_html_id"
           placeholder="https://xxxxx.webhook.office.com/webhookb2/xxxxx/IncomingWebhook/xxxxx..."
@@ -42,7 +42,7 @@ exports[`<MicrosoftTeamsSettings /> spec renders the component 1`] = `
 
 exports[`<MicrosoftTeamsSettings /> spec renders the component with error 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -61,14 +61,14 @@ exports[`<MicrosoftTeamsSettings /> spec renders the component with error 1`] =
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-microsoftTeams-webhook-input"
           id="random_html_id"
           placeholder="https://xxxxx.webhook.office.com/webhookb2/xxxxx/IncomingWebhook/xxxxx..."
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/SlackSettings.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/SlackSettings.test.tsx.snap
index 9db96e1e..9843ce59 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/SlackSettings.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/SlackSettings.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<SlackSettings /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -21,13 +21,13 @@ exports[`<SlackSettings /> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-slack-webhook-input"
           id="random_html_id"
           placeholder="https://hooks.slack.com/services/XXXXX/XXXXX/XXXXX..."
@@ -42,7 +42,7 @@ exports[`<SlackSettings /> spec renders the component 1`] = `
 
 exports[`<SlackSettings /> spec renders the component with error 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 700px;"
 >
@@ -61,14 +61,14 @@ exports[`<SlackSettings /> spec renders the component with error 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-channel-slack-webhook-input"
           id="random_html_id"
           placeholder="https://hooks.slack.com/services/XXXXX/XXXXX/XXXXX..."
diff --git a/public/pages/CreateChannel/components/ChannelNamePanel.tsx b/public/pages/CreateChannel/components/ChannelNamePanel.tsx
index f2bff44c..ae1af589 100644
--- a/public/pages/CreateChannel/components/ChannelNamePanel.tsx
+++ b/public/pages/CreateChannel/components/ChannelNamePanel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFieldText, EuiFormRow, EuiTextArea } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiCompressedFormRow, EuiCompressedTextArea } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { ContentPanel } from '../../../components/ContentPanel';
 import { CreateChannelContext } from '../CreateChannel';
@@ -25,12 +25,12 @@ export function ChannelNamePanel(props: ChannelNamePanelProps) {
         title="Name and description"
         titleSize="s"
       >
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Name"
           error={context.inputErrors.name.join(' ')}
           isInvalid={context.inputErrors.name.length > 0}
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="create-channel-name-input"
             placeholder="Enter channel name"
             value={props.name}
@@ -43,8 +43,8 @@ export function ChannelNamePanel(props: ChannelNamePanelProps) {
               });
             }}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label={
             <span>
               Description - <i style={{ fontWeight: 'normal' }}>optional</i>
@@ -52,7 +52,7 @@ export function ChannelNamePanel(props: ChannelNamePanelProps) {
           }
         >
           <>
-            <EuiTextArea
+            <EuiCompressedTextArea
               data-test-subj="create-channel-description-input"
               placeholder="What is the purpose of this channel?"
               style={{ height: '4.1rem' }}
@@ -60,7 +60,7 @@ export function ChannelNamePanel(props: ChannelNamePanelProps) {
               onChange={(e) => props.setDescription(e.target.value)}
             />
           </>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </ContentPanel>
     </>
   );
diff --git a/public/pages/CreateChannel/components/ChimeSettings.tsx b/public/pages/CreateChannel/components/ChimeSettings.tsx
index edf75305..d2302ec5 100644
--- a/public/pages/CreateChannel/components/ChimeSettings.tsx
+++ b/public/pages/CreateChannel/components/ChimeSettings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiCompressedFormRow } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { CreateChannelContext } from '../CreateChannel';
 import { validateWebhookURL } from '../utils/validationHelper';
@@ -17,13 +17,13 @@ export function ChimeSettings(props: ChimeSettingsProps) {
   const context = useContext(CreateChannelContext)!;
 
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       label="Webhook URL"
       style={{ maxWidth: '700px' }}
       error={context.inputErrors.chimeWebhook.join(' ')}
       isInvalid={context.inputErrors.chimeWebhook.length > 0}
     >
-      <EuiFieldText
+      <EuiCompressedFieldText
         fullWidth
         data-test-subj="create-channel-chime-webhook-input"
         placeholder="https://hooks.chime.aws/incomingwebhooks/XXXXX..."
@@ -37,6 +37,6 @@ export function ChimeSettings(props: ChimeSettingsProps) {
           });
         }}
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
diff --git a/public/pages/CreateChannel/components/CustomWebhookSettings.tsx b/public/pages/CreateChannel/components/CustomWebhookSettings.tsx
index d348f5fa..2cb562e0 100644
--- a/public/pages/CreateChannel/components/CustomWebhookSettings.tsx
+++ b/public/pages/CreateChannel/components/CustomWebhookSettings.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiFieldNumber,
-  EuiFieldText,
-  EuiFormRow,
-  EuiRadioGroup,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
+  EuiCompressedRadioGroup,
   EuiRadioGroupOption,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
 } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { CUSTOM_WEBHOOK_ENDPOINT_TYPE } from '../../../utils/constants';
@@ -61,12 +61,12 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
 
   const renderWebhook = () => {
     return (
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Webhook URL"
         error={context.inputErrors.webhookURL.join(' ')}
         isInvalid={context.inputErrors.webhookURL.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           placeholder="https://name.example.com/XXXXX..."
           data-test-subj="custom-webhook-url-input"
           value={props.webhookURL}
@@ -79,15 +79,15 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   };
 
   const renderCustomURL = () => {
     return (
       <>
-        <EuiFormRow label="Type">
-          <EuiSuperSelect
+        <EuiCompressedFormRow label="Type">
+          <EuiCompressedSuperSelect
             options={[
               { value: 'HTTPS', inputDisplay: 'HTTPS' },
               { value: 'HTTP', inputDisplay: 'HTTP' },
@@ -95,13 +95,13 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
             valueOfSelected={props.customURLType}
             onChange={props.setCustomURLType}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label="Host"
           error={context.inputErrors.customURLHost.join(' ')}
           isInvalid={context.inputErrors.customURLHost.length > 0}
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="name.example.com"
             data-test-subj="custom-webhook-host-input"
             value={props.customURLHost}
@@ -114,8 +114,8 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
               });
             }}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label={
             <span>
               Port - <i style={{ fontWeight: 'normal' }}>optional</i>
@@ -124,7 +124,7 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
           error={context.inputErrors.customURLPort.join(' ')}
           isInvalid={context.inputErrors.customURLPort.length > 0}
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             placeholder="Enter port"
             data-test-subj="custom-webhook-port-input"
             value={props.customURLPort}
@@ -137,21 +137,21 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
               });
             }}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label={
             <span>
               Path - <i style={{ fontWeight: 'normal' }}>optional</i>
             </span>
           }
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="Enter path"
             data-test-subj="custom-webhook-path-input"
             value={props.customURLPath}
             onChange={(e) => props.setCustomURLPath(e.target.value)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         <EuiSpacer />
         <WebhookHeaders
@@ -165,8 +165,8 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
 
   return (
     <>
-      <EuiFormRow label="Method" style={{ maxWidth: '700px' }}>
-        <EuiSuperSelect
+      <EuiCompressedFormRow label="Method" style={{ maxWidth: '700px' }}>
+        <EuiCompressedSuperSelect
           options={[
             { value: 'POST', inputDisplay: 'POST' },
             { value: 'PUT', inputDisplay: 'PUT' },
@@ -175,10 +175,10 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
           valueOfSelected={props.webhookMethod}
           onChange={props.setWebhookMethod}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
-      <EuiFormRow label="Define endpoints by" style={{ maxWidth: '700px' }}>
-        <EuiRadioGroup
+      <EuiCompressedFormRow label="Define endpoints by" style={{ maxWidth: '700px' }}>
+        <EuiCompressedRadioGroup
           options={webhookTypeOptions}
           idSelected={props.webhookTypeIdSelected}
           onChange={(id: string) =>
@@ -187,7 +187,7 @@ export function CustomWebhookSettings(props: CustomWebhookSettingsProps) {
             )
           }
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {props.webhookTypeIdSelected === 'WEBHOOK_URL'
         ? renderWebhook()
         : renderCustomURL()}
diff --git a/public/pages/CreateChannel/components/EmailSettings.tsx b/public/pages/CreateChannel/components/EmailSettings.tsx
index 9565b68d..726922b9 100644
--- a/public/pages/CreateChannel/components/EmailSettings.tsx
+++ b/public/pages/CreateChannel/components/EmailSettings.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiButton,
-  EuiComboBox,
+  EuiSmallButton,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiRadioGroup,
+  EuiCompressedFormRow,
+  EuiCompressedRadioGroup,
   EuiSpacer,
   SortDirection,
 } from '@elastic/eui';
@@ -134,8 +134,8 @@ export function EmailSettings(props: EmailSettingsProps) {
   return (
     <>
       {smtpAvailable && (
-        <EuiFormRow label="Sender type">
-          <EuiRadioGroup
+        <EuiCompressedFormRow label="Sender type">
+          <EuiCompressedRadioGroup
             options={[
               {
                 id: 'smtp_account',
@@ -150,20 +150,20 @@ export function EmailSettings(props: EmailSettingsProps) {
             onChange={(id) => props.setSenderType(id as SenderType)}
             name="sender type radio group"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
       {props.senderType === 'ses_account' ? (
         <>
           <EuiSpacer size="m" />
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: 400 }}>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 label="SES sender"
                 helpText={`A destination only allows one SES sender. Use "Create SES sender" to create a sender with its email address, IAM role, AWS region.`}
                 error={context.inputErrors.sesSender.join(' ')}
                 isInvalid={context.inputErrors.sesSender.length > 0}
               >
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder="Sender name"
                   fullWidth
                   singleSelection
@@ -181,13 +181,13 @@ export function EmailSettings(props: EmailSettingsProps) {
                     });
                   }}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiFormRow hasEmptyLabelSpace>
+              <EuiCompressedFormRow hasEmptyLabelSpace>
                 <ModalConsumer>
                   {({ onShow }) => (
-                    <EuiButton
+                    <EuiSmallButton
                       onClick={() =>
                         onShow(CreateSESSenderModal, {
                           addSenderOptionAndSelect: (
@@ -207,10 +207,10 @@ export function EmailSettings(props: EmailSettingsProps) {
                       }
                     >
                       Create SES sender
-                    </EuiButton>
+                    </EuiSmallButton>
                   )}
                 </ModalConsumer>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
@@ -219,13 +219,13 @@ export function EmailSettings(props: EmailSettingsProps) {
           <EuiSpacer size="m" />
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: 400 }}>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 label="SMTP sender"
                 helpText={`A destination only allows one SMTP sender. Use "Create SMTP sender" to create a sender with its email address, host, port, encryption method.`}
                 error={context.inputErrors.smtpSender.join(' ')}
                 isInvalid={context.inputErrors.smtpSender.length > 0}
               >
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder="Sender name"
                   fullWidth
                   singleSelection
@@ -243,13 +243,13 @@ export function EmailSettings(props: EmailSettingsProps) {
                     });
                   }}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiFormRow hasEmptyLabelSpace>
+              <EuiCompressedFormRow hasEmptyLabelSpace>
                 <ModalConsumer>
                   {({ onShow }) => (
-                    <EuiButton
+                    <EuiSmallButton
                       onClick={() =>
                         onShow(CreateSenderModal, {
                           addSenderOptionAndSelect: (
@@ -269,10 +269,10 @@ export function EmailSettings(props: EmailSettingsProps) {
                       }
                     >
                       Create SMTP sender
-                    </EuiButton>
+                    </EuiSmallButton>
                   )}
                 </ModalConsumer>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
@@ -280,13 +280,13 @@ export function EmailSettings(props: EmailSettingsProps) {
 
       <EuiFlexGroup>
         <EuiFlexItem style={{ maxWidth: 400 }}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Default recipients"
             helpText={`Add recipient(s) using an email address or pre-created email group. Use "Create email group" to create an email group.`}
             error={context.inputErrors.recipients.join(' ')}
             isInvalid={context.inputErrors.recipients.length > 0}
           >
-            <EuiComboBox
+            <EuiCompressedComboBox
               placeholder="Email address, recipient group name"
               fullWidth
               options={recipientGroupOptions}
@@ -319,13 +319,13 @@ export function EmailSettings(props: EmailSettingsProps) {
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow hasEmptyLabelSpace>
+          <EuiCompressedFormRow hasEmptyLabelSpace>
             <ModalConsumer>
               {({ onShow }) => (
-                <EuiButton
+                <EuiSmallButton
                   onClick={() =>
                     onShow(CreateRecipientGroupModal, {
                       addRecipientGroupOptionAndSelect: (
@@ -348,10 +348,10 @@ export function EmailSettings(props: EmailSettingsProps) {
                   }
                 >
                   Create recipient group
-                </EuiButton>
+                </EuiSmallButton>
               )}
             </ModalConsumer>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/pages/CreateChannel/components/MicrosoftTeamsSettings.tsx b/public/pages/CreateChannel/components/MicrosoftTeamsSettings.tsx
index 016b78a6..7fa525c3 100644
--- a/public/pages/CreateChannel/components/MicrosoftTeamsSettings.tsx
+++ b/public/pages/CreateChannel/components/MicrosoftTeamsSettings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiCompressedFormRow } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { CreateChannelContext } from '../CreateChannel';
 import { validateWebhookURL } from '../utils/validationHelper';
@@ -17,13 +17,13 @@ export function MicrosoftTeamsSettings(props: MicrosoftTeamsSettingsProps) {
   const context = useContext(CreateChannelContext)!;
 
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       label="Webhook URL"
       style={{ maxWidth: '700px' }}
       error={context.inputErrors.microsoftTeamsWebhook.join(' ')}
       isInvalid={context.inputErrors.microsoftTeamsWebhook.length > 0}
     >
-      <EuiFieldText
+      <EuiCompressedFieldText
         fullWidth
         data-test-subj="create-channel-microsoftTeams-webhook-input"
         placeholder="https://xxxxx.webhook.office.com/webhookb2/xxxxx/IncomingWebhook/xxxxx..."
@@ -37,6 +37,6 @@ export function MicrosoftTeamsSettings(props: MicrosoftTeamsSettingsProps) {
           });
         }}
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
diff --git a/public/pages/CreateChannel/components/SNSSettings.tsx b/public/pages/CreateChannel/components/SNSSettings.tsx
index 870c9468..04324ae2 100644
--- a/public/pages/CreateChannel/components/SNSSettings.tsx
+++ b/public/pages/CreateChannel/components/SNSSettings.tsx
@@ -5,8 +5,8 @@
 
 import {
   EuiCallOut,
-  EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
   EuiLink,
   EuiSpacer,
   EuiText,
@@ -30,12 +30,12 @@ export function SNSSettings(props: SNSSettingsProps) {
   return (
     <>
       <EuiSpacer />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="SNS topic ARN"
         error={context.inputErrors.topicArn.join(' ')}
         isInvalid={context.inputErrors.topicArn.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           placeholder="ARN key"
           data-test-subj="sns-settings-topic-arn-input"
           value={props.topicArn}
@@ -48,11 +48,11 @@ export function SNSSettings(props: SNSSettingsProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       {mainStateContext.tooltipSupport ? (
         <>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={
               <span>
                 IAM role ARN - <i style={{ fontWeight: 'normal' }}>optional</i>
@@ -65,14 +65,14 @@ export function SNSSettings(props: SNSSettingsProps) {
                 network.
               </EuiText>
               <EuiSpacer size="s" />
-              <EuiFieldText
+              <EuiCompressedFieldText
                 data-test-subj="sns-settings-role-arn-input"
                 placeholder="ARN key"
                 value={props.roleArn}
                 onChange={(e) => props.setRoleArn(e.target.value)}
               />
             </>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
           <EuiCallOut
             title="Using Amazon SNS outside of AWS"
@@ -88,12 +88,12 @@ export function SNSSettings(props: SNSSettingsProps) {
           </EuiCallOut>
         </>
       ) : (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="IAM role ARN"
           error={context.inputErrors.roleArn.join(' ')}
           isInvalid={context.inputErrors.roleArn.length > 0}
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="ARN key"
             data-test-subj="sns-settings-role-arn-input"
             value={props.roleArn}
@@ -106,7 +106,7 @@ export function SNSSettings(props: SNSSettingsProps) {
               });
             }}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </>
   );
diff --git a/public/pages/CreateChannel/components/SlackSettings.tsx b/public/pages/CreateChannel/components/SlackSettings.tsx
index 9ca0c961..8c11c9f5 100644
--- a/public/pages/CreateChannel/components/SlackSettings.tsx
+++ b/public/pages/CreateChannel/components/SlackSettings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiCompressedFormRow } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { CreateChannelContext } from '../CreateChannel';
 import { validateWebhookURL } from '../utils/validationHelper';
@@ -17,13 +17,13 @@ export function SlackSettings(props: SlackSettingsProps) {
   const context = useContext(CreateChannelContext)!;
 
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       label="Slack webhook URL"
       style={{ maxWidth: '700px' }}
       error={context.inputErrors.slackWebhook.join(' ')}
       isInvalid={context.inputErrors.slackWebhook.length > 0}
     >
-      <EuiFieldText
+      <EuiCompressedFieldText
         fullWidth
         data-test-subj="create-channel-slack-webhook-input"
         placeholder="https://hooks.slack.com/services/XXXXX/XXXXX/XXXXX..."
@@ -37,6 +37,6 @@ export function SlackSettings(props: SlackSettingsProps) {
           });
         }}
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
diff --git a/public/pages/CreateChannel/components/WebhookHeaders.tsx b/public/pages/CreateChannel/components/WebhookHeaders.tsx
index a7616d40..f4c02edb 100644
--- a/public/pages/CreateChannel/components/WebhookHeaders.tsx
+++ b/public/pages/CreateChannel/components/WebhookHeaders.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -57,8 +57,8 @@ export function WebhookHeaders(props: WebhookHeadersProps) {
             <EuiSpacer size="s" />
             <EuiFlexGroup style={{ maxWidth: 639 }}>
               <EuiFlexItem>
-                <EuiFormRow label="Key">
-                  <EuiFieldText
+                <EuiCompressedFormRow label="Key">
+                  <EuiCompressedFieldText
                     placeholder=""
                     value={header.key}
                     onChange={(e) => setHeader(e.target.value, null, i)}
@@ -68,20 +68,20 @@ export function WebhookHeaders(props: WebhookHeadersProps) {
                       header.key === 'Content-Type'
                     } // first header needs to be Content-Type
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFormRow label="Value">
-                  <EuiFieldText
+                <EuiCompressedFormRow label="Value">
+                  <EuiCompressedFieldText
                     placeholder=""
                     value={header.value}
                     onChange={(e) => setHeader(null, e.target.value, i)}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFormRow hasEmptyLabelSpace>
-                  <EuiButton
+                <EuiCompressedFormRow hasEmptyLabelSpace>
+                  <EuiSmallButton
                     onClick={() => {
                       const newHeaders = [...props.headers];
                       newHeaders.splice(i, 1);
@@ -94,8 +94,8 @@ export function WebhookHeaders(props: WebhookHeadersProps) {
                     }
                   >
                     {`Remove ${props.type}`}
-                  </EuiButton>
-                </EuiFormRow>
+                  </EuiSmallButton>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
             </EuiFlexGroup>
           </div>
@@ -103,13 +103,13 @@ export function WebhookHeaders(props: WebhookHeadersProps) {
       })}
 
       <EuiSpacer size="m" />
-      <EuiButton
+      <EuiSmallButton
         onClick={() => {
           props.setHeaders([...props.headers, { key: '', value: '' }]);
         }}
       >
         {`Add ${props.type}`}
-      </EuiButton>
+      </EuiSmallButton>
     </>
   );
 }
diff --git a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
index 716ee0d6..5d7225ec 100644
--- a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
@@ -85,8 +85,8 @@ export function CreateRecipientGroupModal(
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
-          <EuiButton
+          <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
+          <EuiSmallButton
             data-test-subj="create-recipient-group-modal-create-button"
             fill
             onClick={async () => {
@@ -121,7 +121,7 @@ export function CreateRecipientGroupModal(
             }}
           >
             Create
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
index cc33cf66..a674111a 100644
--- a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
@@ -89,8 +89,8 @@ export function CreateSESSenderModal(props: CreateSESSenderModalProps) {
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
-          <EuiButton
+          <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
+          <EuiSmallButton
             data-test-subj="create-ses-sender-modal-create-button"
             fill
             onClick={async () => {
@@ -126,7 +126,7 @@ export function CreateSESSenderModal(props: CreateSESSenderModalProps) {
             }}
           >
             Create
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
index 35580205..9fe19221 100644
--- a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
@@ -89,8 +89,8 @@ export function CreateSenderModal(props: CreateSenderModalProps) {
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
-          <EuiButton
+          <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
+          <EuiSmallButton
             data-test-subj="create-sender-modal-create-button"
             fill
             onClick={async () => {
@@ -127,7 +127,7 @@ export function CreateSenderModal(props: CreateSenderModalProps) {
             }}
           >
             Create
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx
index cf8386bf..d8c49302 100644
--- a/public/pages/Emails/CreateRecipientGroup.tsx
+++ b/public/pages/Emails/CreateRecipientGroup.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -130,12 +130,12 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
       <EuiSpacer />
       <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty href={`#${ROUTES.EMAIL_GROUPS}`}>
+          <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_GROUPS}`}>
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             isLoading={loading}
             onClick={async () => {
@@ -183,7 +183,7 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
             }}
           >
             {props.edit ? 'Save' : 'Create'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/pages/Emails/CreateSESSender.tsx b/public/pages/Emails/CreateSESSender.tsx
index 61603309..b64eafde 100644
--- a/public/pages/Emails/CreateSESSender.tsx
+++ b/public/pages/Emails/CreateSESSender.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -129,12 +129,12 @@ export function CreateSESSender(props: CreateSESSenderProps) {
       <EuiSpacer />
       <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
+          <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             isLoading={loading}
             onClick={async () => {
@@ -180,7 +180,7 @@ export function CreateSESSender(props: CreateSESSenderProps) {
             }}
           >
             {props.edit ? 'Save' : 'Create'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/pages/Emails/CreateSender.tsx b/public/pages/Emails/CreateSender.tsx
index 08053c1b..7f8b96f2 100644
--- a/public/pages/Emails/CreateSender.tsx
+++ b/public/pages/Emails/CreateSender.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -128,12 +128,12 @@ export function CreateSender(props: CreateSenderProps) {
       <EuiSpacer />
       <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
+          <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             isLoading={loading}
             onClick={async () => {
@@ -180,7 +180,7 @@ export function CreateSender(props: CreateSenderProps) {
             }}
           >
             {props.edit ? 'Save' : 'Create'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroupForm.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroupForm.test.tsx.snap
index c8a53cbd..b274ab34 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroupForm.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroupForm.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<CreateRecipientGroupForm/> spec render errors 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -21,14 +21,14 @@ exports[`<CreateRecipientGroupForm/> spec render errors 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0 random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-recipient-group-form-name-input"
           id="random_html_id"
           placeholder="Enter recipient group name"
@@ -56,7 +56,7 @@ exports[`<CreateRecipientGroupForm/> spec render errors 1`] = `
 
 exports[`<CreateRecipientGroupForm/> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -75,14 +75,14 @@ exports[`<CreateRecipientGroupForm/> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-recipient-group-form-name-input"
           id="random_html_id"
           placeholder="Enter recipient group name"
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSESSenderForm.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSESSenderForm.test.tsx.snap
index 641096f3..85b8b003 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateSESSenderForm.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateSESSenderForm.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<CreateSESSenderForm/> spec renders errors 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -21,14 +21,14 @@ exports[`<CreateSESSenderForm/> spec renders errors 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0 random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-ses-sender-form-name-input"
           id="random_html_id"
           placeholder="Enter sender name"
@@ -56,7 +56,7 @@ exports[`<CreateSESSenderForm/> spec renders errors 1`] = `
 
 exports[`<CreateSESSenderForm/> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -75,14 +75,14 @@ exports[`<CreateSESSenderForm/> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-ses-sender-form-name-input"
           id="random_html_id"
           placeholder="Enter sender name"
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSenderForm.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSenderForm.test.tsx.snap
index 86be3349..b64fec34 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateSenderForm.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateSenderForm.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<CreateSenderForm/> spec renders errors 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -21,14 +21,14 @@ exports[`<CreateSenderForm/> spec renders errors 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0 random_html_id-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-sender-form-name-input"
           id="random_html_id"
           placeholder="Enter sender name"
@@ -56,7 +56,7 @@ exports[`<CreateSenderForm/> spec renders errors 1`] = `
 
 exports[`<CreateSenderForm/> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="random_html_id-row"
   style="max-width: 650px;"
 >
@@ -75,14 +75,14 @@ exports[`<CreateSenderForm/> spec renders the component 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
           aria-describedby="random_html_id-help-0"
-          class="euiFieldText euiFieldText--fullWidth"
+          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
           data-test-subj="create-sender-form-name-input"
           id="random_html_id"
           placeholder="Enter sender name"
diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
index ec523bf5..ebb37281 100644
--- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="recipient-groups-table-delete-button"
                 disabled=""
                 type="button"
@@ -58,7 +58,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="recipient-groups-table-edit-button"
                 disabled=""
                 type="button"
@@ -78,7 +78,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <a
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 href="#/create-recipient-group"
                 rel="noreferrer"
               >
@@ -105,13 +105,13 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
           data-test-subj="recipient-groups-table-search-input"
           placeholder="Search"
           type="search"
@@ -124,7 +124,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+              class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
               focusable="false"
               height="16"
               role="img"
@@ -389,7 +389,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
                         class="euiSpacer euiSpacer--l"
                       />
                       <a
-                        class="euiButton euiButton--primary"
+                        class="euiButton euiButton--primary euiButton--small"
                         href="#/create-recipient-group"
                         rel="noreferrer"
                       >
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
index c944d057..8a9c87cd 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="senders-table-delete-button"
                 disabled=""
                 type="button"
@@ -58,7 +58,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="senders-table-edit-button"
                 disabled=""
                 type="button"
@@ -78,7 +78,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <a
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 href="#/create-smtp-sender"
                 rel="noreferrer"
               >
@@ -111,13 +111,13 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldSearch euiFieldSearch--fullWidth"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
               data-test-subj="senders-table-search-input"
               placeholder="Search"
               type="search"
@@ -130,7 +130,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -160,7 +160,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                 type="button"
               >
                 <span
@@ -491,7 +491,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                         class="euiSpacer euiSpacer--l"
                       />
                       <a
-                        class="euiButton euiButton--primary"
+                        class="euiButton euiButton--primary euiButton--small"
                         href="#/create-smtp-sender"
                         rel="noreferrer"
                       >
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
index 6b0c79f2..00bfecc5 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
@@ -8,13 +8,13 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
           data-test-subj="senders-table-search-input"
           placeholder="Search"
           type="search"
@@ -27,7 +27,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+              class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
               focusable="false"
               height="16"
               role="img"
@@ -57,7 +57,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
             type="button"
           >
             <span
diff --git a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
index c6ec50e3..71eada79 100644
--- a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
+++ b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiText,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 import React from 'react';
 import { onComboBoxCreateOption } from '../../utils/helper';
@@ -37,14 +37,14 @@ interface CreateRecipientGroupFormProps {
 export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Name"
         style={{ maxWidth: '650px' }}
         helpText="The name must contain 2 to 50 characters. Valid characters are A-Z, a-z, 0-9, (_) underscore, (-) hyphen and unicode characters."
         error={props.inputErrors.name.join(' ')}
         isInvalid={props.inputErrors.name.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           fullWidth
           data-test-subj="create-recipient-group-form-name-input"
           placeholder="Enter recipient group name"
@@ -58,10 +58,10 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label={
           <span>
             Description - <i style={{ fontWeight: 'normal' }}>optional</i>
@@ -73,7 +73,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
           <EuiText size="xs" color="subdued">
             Describe the purpose of the channel.
           </EuiText>
-          <EuiTextArea
+          <EuiCompressedTextArea
             fullWidth
             data-test-subj="create-recipient-group-form-description-input"
             placeholder="What is the purpose of this recipient group?"
@@ -82,10 +82,10 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
             onChange={(e) => props.setDescription(e.target.value)}
           />
         </>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Emails"
         style={{ maxWidth: '650px' }}
         error={props.inputErrors.emailOptions.join(' ')}
@@ -95,7 +95,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
           <EuiText size="xs" color="subdued">
             Select or type in one or more email addresses.
           </EuiText>
-          <EuiComboBox
+          <EuiCompressedComboBox
             placeholder="Email addresses"
             data-test-subj="create-recipient-group-form-emails-input"
             fullWidth
@@ -130,7 +130,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
             }}
           />
         </>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
     </>
diff --git a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
index 8a56ba1a..c9ef703d 100644
--- a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
@@ -4,10 +4,10 @@
  */
 
 import {
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useContext } from 'react';
@@ -36,14 +36,14 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
   const mainStateContext = useContext(MainContext)!;
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Sender name"
         style={{ maxWidth: '650px' }}
         helpText="Use a unique, descriptive name. The sender name must contain from 2 to 50 characters. Valid characters are lowercase a-z, 0-9, - (hyphen) and _ (underscore)."
         error={props.inputErrors.senderName.join(' ')}
         isInvalid={props.inputErrors.senderName.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           fullWidth
           placeholder="Enter sender name"
           data-test-subj="create-ses-sender-form-name-input"
@@ -57,16 +57,16 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Email address"
         style={{ maxWidth: '650px' }}
         error={props.inputErrors.email.join(' ')}
         isInvalid={props.inputErrors.email.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           fullWidth
           placeholder="name@example.com"
           data-test-subj="create-ses-sender-form-email-input"
@@ -80,12 +80,12 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={6}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={
               mainStateContext.tooltipSupport ? (
                 <span>
@@ -99,7 +99,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
             error={props.inputErrors.roleArn.join(' ')}
             isInvalid={props.inputErrors.roleArn.length > 0}
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               placeholder="ARN key"
               data-test-subj="create-ses-sender-form-role-arn-input"
               value={props.roleArn}
@@ -114,15 +114,15 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
                 }
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={4}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="AWS region"
             error={props.inputErrors.awsRegion.join(' ')}
             isInvalid={props.inputErrors.awsRegion.length > 0}
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               placeholder="us-east-1"
               data-test-subj="create-ses-sender-form-aws-region-input"
               value={props.awsRegion}
@@ -135,7 +135,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
 
diff --git a/public/pages/Emails/components/forms/CreateSenderForm.tsx b/public/pages/Emails/components/forms/CreateSenderForm.tsx
index df373d4f..d51d355b 100644
--- a/public/pages/Emails/components/forms/CreateSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSenderForm.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiFieldNumber,
-  EuiFieldText,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiSuperSelectOption,
 } from '@elastic/eui';
 import React from 'react';
@@ -51,14 +51,14 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
 
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Sender name"
         style={{ maxWidth: '650px' }}
         helpText="Use a unique, descriptive name. The sender name must contain from 2 to 50 characters. Valid characters are lowercase a-z, 0-9, - (hyphen) and _ (underscore)."
         error={props.inputErrors.senderName.join(' ')}
         isInvalid={props.inputErrors.senderName.length > 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           fullWidth
           placeholder="Enter sender name"
           data-test-subj="create-sender-form-name-input"
@@ -72,17 +72,17 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
             });
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={4}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Email address"
             error={props.inputErrors.email.join(' ')}
             isInvalid={props.inputErrors.email.length > 0}
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               placeholder="name@example.com"
               data-test-subj="create-sender-form-email-input"
               value={props.email}
@@ -95,15 +95,15 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={4}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Host"
             error={props.inputErrors.host.join(' ')}
             isInvalid={props.inputErrors.host.length > 0}
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               placeholder="smtp.example.com"
               data-test-subj="create-sender-form-host-input"
               value={props.host}
@@ -116,15 +116,15 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={2}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Port"
             error={props.inputErrors.port.join(' ')}
             isInvalid={props.inputErrors.port.length > 0}
           >
-            <EuiFieldNumber
+            <EuiCompressedFieldNumber
               placeholder="465"
               data-test-subj="create-sender-form-port-input"
               value={props.port}
@@ -137,12 +137,12 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Encryption method"
         style={{ maxWidth: '650px' }}
         helpText={
@@ -160,14 +160,14 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
           </div>
         }
       >
-        <EuiSuperSelect
+        <EuiCompressedSuperSelect
           fullWidth
           data-test-subj="create-sender-form-encryption-input"
           options={encryptionOptions}
           valueOfSelected={props.encryption}
           onChange={props.setEncryption}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
     </>
diff --git a/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx b/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
index 3ecaf1e9..7066348c 100644
--- a/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
+++ b/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
@@ -5,9 +5,9 @@
 
 import { SERVER_DELAY } from '../../../../../common';
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -71,7 +71,7 @@ export const DeleteRecipientGroupModal = (
           <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="delete"
             value={input}
             onChange={(e) => setInput(e.target.value)}
@@ -80,10 +80,10 @@ export const DeleteRecipientGroupModal = (
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
+              <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="delete-recipient-group-modal-delete-button"
                 fill
                 color="danger"
@@ -112,7 +112,7 @@ export const DeleteRecipientGroupModal = (
                 disabled={input !== 'delete'}
               >
                 Delete
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/pages/Emails/components/modals/DeleteSenderModal.tsx b/public/pages/Emails/components/modals/DeleteSenderModal.tsx
index 5ed2899a..be7f47a8 100644
--- a/public/pages/Emails/components/modals/DeleteSenderModal.tsx
+++ b/public/pages/Emails/components/modals/DeleteSenderModal.tsx
@@ -4,9 +4,9 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -68,7 +68,7 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
           <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="delete"
             value={input}
             onChange={(e) => setInput(e.target.value)}
@@ -77,10 +77,10 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={props.onClose}>Cancel</EuiButtonEmpty>
+              <EuiSmallButtonEmpty onClick={props.onClose}>Cancel</EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="delete-sender-modal-delete-button"
                 fill
                 color="danger"
@@ -110,7 +110,7 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
                 disabled={input !== 'delete'}
               >
                 Delete
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
index 50205e04..fd145686 100644
--- a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
+++ b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
@@ -5,9 +5,9 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiHorizontalRule,
   EuiLink,
   EuiTableFieldDataColumnType,
@@ -228,7 +228,7 @@ export class RecipientGroupsTable extends Component<
                   component: (
                     <ModalConsumer>
                       {({ onShow }) => (
-                        <EuiButton
+                        <EuiSmallButton
                           data-test-subj="recipient-groups-table-delete-button"
                           disabled={this.state.selectedItems.length === 0}
                           onClick={() =>
@@ -239,14 +239,14 @@ export class RecipientGroupsTable extends Component<
                           }
                         >
                           Delete
-                        </EuiButton>
+                        </EuiSmallButton>
                       )}
                     </ModalConsumer>
                   ),
                 },
                 {
                   component: (
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="recipient-groups-table-edit-button"
                       disabled={this.state.selectedItems.length !== 1}
                       onClick={() =>
@@ -256,14 +256,14 @@ export class RecipientGroupsTable extends Component<
                       }
                     >
                       Edit
-                    </EuiButton>
+                    </EuiSmallButton>
                   ),
                 },
                 {
                   component: (
-                    <EuiButton fill href={`#${ROUTES.CREATE_RECIPIENT_GROUP}`}>
+                    <EuiSmallButton fill href={`#${ROUTES.CREATE_RECIPIENT_GROUP}`}>
                       Create recipient group
-                    </EuiButton>
+                    </EuiSmallButton>
                   ),
                 },
               ]}
@@ -274,7 +274,7 @@ export class RecipientGroupsTable extends Component<
           titleSize="m"
           total={this.state.total}
         >
-          <EuiFieldSearch
+          <EuiCompressedFieldSearch
             data-test-subj="recipient-groups-table-search-input"
             fullWidth={true}
             placeholder="Search"
@@ -293,9 +293,9 @@ export class RecipientGroupsTable extends Component<
                 title={<h2>No recipient groups to display</h2>}
                 body="Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels."
                 actions={
-                  <EuiButton href={`#${ROUTES.CREATE_RECIPIENT_GROUP}`}>
+                  <EuiSmallButton href={`#${ROUTES.CREATE_RECIPIENT_GROUP}`}>
                     Create recipient group
-                  </EuiButton>
+                  </EuiSmallButton>
                 }
               />
             }
diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx
index bf749009..6ea48987 100644
--- a/public/pages/Emails/components/tables/SESSendersTable.tsx
+++ b/public/pages/Emails/components/tables/SESSendersTable.tsx
@@ -5,9 +5,9 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiHorizontalRule,
   EuiTableFieldDataColumnType,
   EuiTableSortingType,
@@ -191,7 +191,7 @@ export class SESSendersTable extends Component<
                 component: (
                   <ModalConsumer>
                     {({ onShow }) => (
-                      <EuiButton
+                      <EuiSmallButton
                         data-test-subj="ses-senders-table-delete-button"
                         disabled={this.state.selectedItems.length === 0}
                         onClick={() =>
@@ -202,14 +202,14 @@ export class SESSendersTable extends Component<
                         }
                       >
                         Delete
-                      </EuiButton>
+                      </EuiSmallButton>
                     )}
                   </ModalConsumer>
                 ),
               },
               {
                 component: (
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="ses-senders-table-edit-button"
                     disabled={this.state.selectedItems.length !== 1}
                     onClick={() =>
@@ -219,14 +219,14 @@ export class SESSendersTable extends Component<
                     }
                   >
                     Edit
-                  </EuiButton>
+                  </EuiSmallButton>
                 ),
               },
               {
                 component: (
-                  <EuiButton fill href={`#${ROUTES.CREATE_SES_SENDER}`}>
+                  <EuiSmallButton fill href={`#${ROUTES.CREATE_SES_SENDER}`}>
                     Create SES sender
-                  </EuiButton>
+                  </EuiSmallButton>
                 ),
               },
             ]}
@@ -237,7 +237,7 @@ export class SESSendersTable extends Component<
         titleSize="m"
         total={this.state.total}
       >
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           data-test-subj="ses-senders-table-search-input"
           fullWidth={true}
           placeholder="Search"
@@ -256,9 +256,9 @@ export class SESSendersTable extends Component<
               title={<h2>No SES senders to display</h2>}
               body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels."
               actions={
-                <EuiButton href={`#${ROUTES.CREATE_SES_SENDER}`}>
+                <EuiSmallButton href={`#${ROUTES.CREATE_SES_SENDER}`}>
                   Create SES sender
-                </EuiButton>
+                </EuiSmallButton>
               }
             />
           }
diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx
index ebbf5d9d..663126bd 100644
--- a/public/pages/Emails/components/tables/SendersTable.tsx
+++ b/public/pages/Emails/components/tables/SendersTable.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiHorizontalRule,
   EuiTableFieldDataColumnType,
@@ -212,7 +212,7 @@ export class SendersTable extends Component<
                 component: (
                   <ModalConsumer>
                     {({ onShow }) => (
-                      <EuiButton
+                      <EuiSmallButton
                         data-test-subj="senders-table-delete-button"
                         disabled={this.state.selectedItems.length === 0}
                         onClick={() =>
@@ -223,14 +223,14 @@ export class SendersTable extends Component<
                         }
                       >
                         Delete
-                      </EuiButton>
+                      </EuiSmallButton>
                     )}
                   </ModalConsumer>
                 ),
               },
               {
                 component: (
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="senders-table-edit-button"
                     disabled={this.state.selectedItems.length !== 1}
                     onClick={() =>
@@ -240,14 +240,14 @@ export class SendersTable extends Component<
                     }
                   >
                     Edit
-                  </EuiButton>
+                  </EuiSmallButton>
                 ),
               },
               {
                 component: (
-                  <EuiButton fill href={`#${ROUTES.CREATE_SENDER}`}>
+                  <EuiSmallButton fill href={`#${ROUTES.CREATE_SENDER}`}>
                     Create SMTP sender
-                  </EuiButton>
+                  </EuiSmallButton>
                 ),
               },
             ]}
@@ -276,9 +276,9 @@ export class SendersTable extends Component<
               title={<h2>No SMTP senders to display</h2>}
               body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels."
               actions={
-                <EuiButton href={`#${ROUTES.CREATE_SENDER}`}>
+                <EuiSmallButton href={`#${ROUTES.CREATE_SENDER}`}>
                   Create SMTP sender
-                </EuiButton>
+                </EuiSmallButton>
               }
             />
           }
diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx
index 15e6d995..5bb879d9 100644
--- a/public/pages/Emails/components/tables/SendersTableControls.tsx
+++ b/public/pages/Emails/components/tables/SendersTableControls.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiFieldSearch,
-  EuiFilterButton,
+  EuiCompressedFieldSearch,
+  EuiSmallFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
   EuiFlexGroup,
@@ -65,7 +65,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
   return (
     <EuiFlexGroup>
       <EuiFlexItem>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           data-test-subj="senders-table-search-input"
           fullWidth={true}
           placeholder="Search"
@@ -77,7 +77,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
         <EuiFilterGroup>
           <EuiPopover
             button={
-              <EuiFilterButton
+              <EuiSmallFilterButton
                 iconType="arrowDown"
                 grow={false}
                 onClick={() =>
@@ -89,7 +89,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
                 ) : (
                   'Encryption method'
                 )}
-              </EuiFilterButton>
+              </EuiSmallFilterButton>
             }
             isOpen={isEncryptionPopoverOpen}
             closePopover={() => setIsEncryptionPopoverOpen(false)}
diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
index f765c1ba..9f5714fe 100644
--- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
+++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`<Main /> spec renders the component 1`] = `
                       class="euiPopover__anchor"
                     >
                       <button
-                        class="euiButton euiButton--primary euiButton-isDisabled"
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                         disabled=""
                         type="button"
                       >
@@ -184,7 +184,7 @@ exports[`<Main /> spec renders the component 1`] = `
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <a
-                    class="euiButton euiButton--primary euiButton--fill"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                     href="#/create-channel"
                     rel="noreferrer"
                   >
@@ -217,13 +217,13 @@ exports[`<Main /> spec renders the component 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldSearch euiFieldSearch--fullWidth"
+                  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                   placeholder="Search"
                   type="search"
                 />
@@ -235,7 +235,7 @@ exports[`<Main /> spec renders the component 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height="16"
                       role="img"
@@ -265,7 +265,7 @@ exports[`<Main /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                     type="button"
                   >
                     <span
@@ -307,7 +307,7 @@ exports[`<Main /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                     type="button"
                   >
                     <span
@@ -616,7 +616,7 @@ exports[`<Main /> spec renders the component 1`] = `
                             class="euiSpacer euiSpacer--l"
                           />
                           <a
-                            class="euiButton euiButton--primary"
+                            class="euiButton euiButton--primary euiButton--small"
                             href="#/create-channel"
                             rel="noreferrer"
                           >