From 0fcfa2321f4432ea73db0eed5546a6b79f5aa931 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Tue, 16 Jul 2024 13:48:42 +0200
Subject: [PATCH] [SLO] Fix card icon alignment !! (#188416)

## Summary

Fix card icon alignment !!

### After
<img width="957" alt="image"
src="https://github.com/user-attachments/assets/25d68bea-f497-495b-9137-add25c9dd67d">


### Before
<img width="826" alt="image"
src="https://github.com/user-attachments/assets/8d466950-5306-40da-a5e0-d25b01a8c850">
---
 .../components/card_view/slo_card_item.tsx     | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx
index 0808298b24a8b..fe274cdabd6a7 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx
@@ -5,14 +5,7 @@
  * 2.0.
  */
 
-import {
-  Chart,
-  isMetricElementEvent,
-  LEGACY_DARK_THEME,
-  Metric,
-  MetricTrendShape,
-  Settings,
-} from '@elastic/charts';
+import { Chart, isMetricElementEvent, Metric, MetricTrendShape, Settings } from '@elastic/charts';
 import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -229,6 +222,7 @@ export function SloCardChart({
 }) {
   const {
     application: { navigateToUrl },
+    charts,
   } = useKibana().services;
 
   const { cardColor } = useSloCardColor(slo.summary.status);
@@ -238,8 +232,12 @@ export function SloCardChart({
   return (
     <Chart>
       <Settings
-        // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-        baseTheme={LEGACY_DARK_THEME}
+        baseTheme={charts.theme.useChartsBaseTheme()}
+        theme={{
+          metric: {
+            iconAlign: 'right',
+          },
+        }}
         onElementClick={([d]) => {
           if (onClick) {
             onClick();