Fit and Finish UX Fixes (#263) (#267)

* fill send test message button



* extend content to full width of page



* fix spacing across buttons (8px)



* add vertical spacing



* fix header and content 16px



* remove extra 10px padding



* align active indicator



* wrap h2 in Eui Title with size s prop



* fix padding for elements from search bar 8px



* remove bottom border in empty state



* wip



* fix original view monitors page



* fix original spacing



* run yarn test:jest -u



* upgrade to v4



---------


(cherry picked from commit 7dd95ec)

Signed-off-by: Joanne Wang <jowg@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

public/components/ContentPanel/ContentPanel.tsx

@@ -8,7 +8,7 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 
@@ -40,7 +40,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       alignItems="center"
     >
       <EuiFlexItem>
-        <EuiText size={titleSize}>
+        <EuiTitle size={titleSize}>
           <h2>
             {title}
             {total !== undefined ? (
@@ -49,7 +49,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
               >{` (${total})`}</span>
             ) : null}
           </h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexItem>
       {actions ? (
         <EuiFlexItem grow={false}>
@@ -70,7 +70,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
 
     <EuiHorizontalRule margin="s" className={horizontalRuleClassName} />
 
-    <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
+    <div style={{ padding: '0px', ...bodyStyles }}>{children}</div>
   </EuiPanel>
 );
 

public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap

@@ -11,13 +11,11 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -39,7 +37,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel
@@ -59,20 +57,18 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel

public/pages/Channels/Channels.tsx

@@ -277,11 +277,11 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
             appRightControls={headerControls}
             appLeftControls={[{ renderComponent: totalChannels }]}
           />
-          <ContentPanel>
+          <ContentPanel panelStyles={{ padding: this.state.total < 1? '16px 16px 0px' : '16px' }}>
             <div style={{ marginBottom: '10px' }}>
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 {channelControlsComponent}
-                <div style={{ marginLeft: '10px' }}>
+                <div style={{ marginLeft: '16px' }}>
                   {channelActionsComponent}
                 </div>
               </div>

public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ChannelControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"

public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap

@@ -4,13 +4,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -25,12 +25,12 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -48,7 +48,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -57,13 +56,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -148,7 +145,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -157,13 +153,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -180,13 +174,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -201,12 +195,12 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -224,7 +218,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -233,13 +226,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -324,7 +315,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -333,13 +323,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -355,13 +343,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 exports[`<ChannelDetails/> spec renders the component 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="max-width: 1316px;"
+  style="padding: 0px 8px 0px 0px;"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -376,12 +364,12 @@ exports[`<ChannelDetails/> spec renders the component 1`] = `
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-bottom: 5px;"
+        style="padding-top: 5px;"
       />
     </div>
   </div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"

public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap

@@ -11,18 +11,16 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Channels
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        Channels
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -108,7 +106,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"

public/pages/Channels/components/ChannelControls.tsx

@@ -96,7 +96,7 @@ export const ChannelControls = (props: ChannelControlsProps) => {
   }
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup gutterSize={'m'}>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           fullWidth={true}