💄 Fix stylistic issue

elastic · Apr 20, 2023 · 10fe021 · 10fe021
1 parent 00cae94
commit 10fe021
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/x-pack/plugins/lens/public/datasources/form_based/info_badges.tsx b/x-pack/plugins/lens/public/datasources/form_based/info_badges.tsx
@@ -53,16 +53,39 @@ export function ReducedSamplingSectionEntries({
               {layerPalette ? (
                 <EuiFlexItem grow={false}>
                   {layerPalette.length === 1 ? (
-                    <EuiIcon color={layerPalette[0]} type="stopFilled" />
+                    <EuiIcon
+                      color={layerPalette[0]}
+                      type="stopFilled"
+                      css={css`
+                        margin-top: 2px;
+                      `}
+                    />
                   ) : (
-                    <EuiIcon type="color" />
+                    <EuiIcon
+                      type="color"
+                      css={css`
+                        margin-top: 2px;
+                      `}
+                    />
                   )}
                 </EuiFlexItem>
               ) : null}
-              <EuiFlexItem grow={Boolean(layerPalette)}>
+              <EuiFlexItem
+                grow={Boolean(layerPalette)}
+                css={css`
+                  width: 150px;
+                `}
+              >
                 <EuiText size="s">{layerTitle}</EuiText>
                 {layerPalette && layerPalette.length > 1 ? (
-                  <EuiColorPaletteDisplay size="xs" palette={layerPalette} />
+                  <EuiColorPaletteDisplay
+                    size="xs"
+                    palette={layerPalette}
+                    css={css`
+                      margin-top: 4px;
+                      width: 150px;
+                    `}
+                  />
                 ) : null}
               </EuiFlexItem>
               <EuiFlexItem

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx
@@ -77,19 +77,21 @@ export const EmbeddableFeatureBadge = ({ messages }: { messages: UserMessage[] }
             bottomPadding = euiTheme.size.base;
           }
           return (
-            <aside
-              key={`${shortMessage}-${index}`}
-              css={css`
-                padding: ${!isFirstItem ? 0 : euiTheme.size.base} ${euiTheme.size.base}
-                  ${bottomPadding};
-              `}
-            >
+            <>
               {index ? <EuiHorizontalRule margin="s" /> : null}
-              <EuiTitle size="xxs" css={css`color=${euiTheme.colors.title}`}>
-                <h3>{shortMessage}</h3>
-              </EuiTitle>
-              <ul className="lnsEmbeddablePanelFeatureList">{longMessage}</ul>
-            </aside>
+              <aside
+                key={`${shortMessage}-${index}`}
+                css={css`
+                  padding: ${!isFirstItem ? 0 : euiTheme.size.base} ${euiTheme.size.base}
+                    ${bottomPadding};
+                `}
+              >
+                <EuiTitle size="xxs" css={css`color=${euiTheme.colors.title}`}>
+                  <h3>{shortMessage}</h3>
+                </EuiTitle>
+                <ul className="lnsEmbeddablePanelFeatureList">{longMessage}</ul>
+              </aside>
+            </>
           );
         })}
       </div>

diff --git a/x-pack/plugins/lens/public/visualizations/xy/info_badges.tsx b/x-pack/plugins/lens/public/visualizations/xy/info_badges.tsx
@@ -52,16 +52,39 @@ export function IgnoredGlobalFiltersEntries({
               {layerPalette ? (
                 <EuiFlexItem grow={false}>
                   {layerPalette.length === 1 ? (
-                    <EuiIcon color={layerPalette[0]} type="stopFilled" />
+                    <EuiIcon
+                      color={layerPalette[0]}
+                      type="stopFilled"
+                      css={css`
+                        margin-top: 2px;
+                      `}
+                    />
                   ) : (
-                    <EuiIcon type="color" />
+                    <EuiIcon
+                      type="color"
+                      css={css`
+                        margin-top: 2px;
+                      `}
+                    />
                   )}
                 </EuiFlexItem>
               ) : null}
-              <EuiFlexItem grow={Boolean(layerPalette)}>
+              <EuiFlexItem
+                grow={Boolean(layerPalette)}
+                css={css`
+                  width: 150px;
+                `}
+              >
                 <EuiText size="s">{layerTitle}</EuiText>
                 {layerPalette && layerPalette.length > 1 ? (
-                  <EuiColorPaletteDisplay size="xs" palette={layerPalette} />
+                  <EuiColorPaletteDisplay
+                    size="xs"
+                    palette={layerPalette}
+                    css={css`
+                      margin-top: 4px;
+                      width: 150px;
+                    `}
+                  />
                 ) : null}
               </EuiFlexItem>
             </EuiFlexGroup>