From 0008e8581fcfdc9778f26b05c42c79ef36dc7088 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 15 Jan 2024 13:48:33 +0200
Subject: [PATCH] [ES|QL][Discover] Adds a box-shadow to suggested metric vis
 (#174821)

## Summary

This PR https://github.com/elastic/kibana/pull/168651 broke (from the UI
perspective) the suggested metric.

How it looks in main
<img width="1886" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/cc8a244c-e1af-4fa7-9550-f72c16bd8ca2">

How it looks in this PR
<img width="1984" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/c0d4ea9d-59e2-4f49-bb24-5ba8dfffe634">

It follows the same logic as the PR which broke it and adds a box-shadow
to distinguish the chart from the background
---
 src/plugins/unified_histogram/public/chart/histogram.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/plugins/unified_histogram/public/chart/histogram.tsx b/src/plugins/unified_histogram/public/chart/histogram.tsx
index a4071b4ac8cfa..29940af44193c 100644
--- a/src/plugins/unified_histogram/public/chart/histogram.tsx
+++ b/src/plugins/unified_histogram/public/chart/histogram.tsx
@@ -181,6 +181,8 @@ export function Histogram({
   });
 
   const { euiTheme } = useEuiTheme();
+  const boxShadow = `0 2px 2px -1px ${euiTheme.colors.mediumShade},
+  0 1px 5px -2px ${euiTheme.colors.mediumShade}`;
   const chartCss = css`
     position: relative;
     flex-grow: 1;
@@ -195,6 +197,7 @@ export function Histogram({
     & .lnsExpressionRenderer {
       width: ${chartSize};
       margin: auto;
+      box-shadow: ${attributes.visualizationType === 'lnsMetric' ? boxShadow : 'none'};
     }
 
     & .echLegend .echLegendList {