From 8caf85b99ae020f9deb4ac83455ae0f6744699c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 12 Sep 2023 17:46:24 +0200
Subject: [PATCH] BarChart: Fixes barchart tooltip styling (#74506)

---
 .../data-hover/DataHoverView.tsx              | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/public/app/features/visualization/data-hover/DataHoverView.tsx b/public/app/features/visualization/data-hover/DataHoverView.tsx
index 5683bddfb17..2acc2146941 100644
--- a/public/app/features/visualization/data-hover/DataHoverView.tsx
+++ b/public/app/features/visualization/data-hover/DataHoverView.tsx
@@ -117,8 +117,8 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
       <table className={styles.infoWrap}>
         <tbody>
           {displayValues.map((displayValue, i) => (
-            <tr key={`${i}/${rowIndex}`} className={displayValue.highlight ? styles.highlight : ''}>
-              <th>{displayValue.name}:</th>
+            <tr key={`${i}/${rowIndex}`}>
+              <th>{displayValue.name}</th>
               <td>{renderValue(displayValue.valueString)}</td>
             </tr>
           ))}
@@ -128,26 +128,21 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
     </div>
   );
 };
-
 const getStyles = (theme: GrafanaTheme2) => {
-  const bg = theme.isDark ? theme.v1.palette.dark2 : theme.v1.palette.white;
-  const headerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
-  const tableBgOdd = theme.isDark ? theme.v1.palette.dark3 : theme.v1.palette.gray6;
-
   return {
     wrapper: css`
-      background: ${bg};
-      border: 1px solid ${headerBg};
+      background: ${theme.components.tooltip.background};
       border-radius: ${theme.shape.borderRadius(2)};
     `,
     header: css`
-      background: ${headerBg};
-      padding: 6px 10px;
+      background: ${theme.colors.background.secondary};
+      align-items: center;
+      align-content: center;
       display: flex;
+      padding-bottom: ${theme.spacing(1)};
     `,
     title: css`
       font-weight: ${theme.typography.fontWeightMedium};
-      padding-right: ${theme.spacing(2)};
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
@@ -155,24 +150,24 @@ const getStyles = (theme: GrafanaTheme2) => {
       flex-grow: 1;
     `,
     infoWrap: css`
-      padding: 8px;
+      padding: ${theme.spacing(1)};
+      background: transparent;
+      border: none;
       th {
         font-weight: ${theme.typography.fontWeightMedium};
-        padding: ${theme.spacing(0.25, 2)};
+        padding: ${theme.spacing(0.25, 2, 0.25, 0)};
       }
+
       tr {
-        background-color: ${theme.colors.background.primary};
-        &:nth-child(even) {
-          background-color: ${tableBgOdd};
+        border-bottom: 1px solid ${theme.colors.border.weak};
+        &:last-child {
+          border-bottom: none;
         }
       }
     `,
-    highlight: css`
-      /* !important is required to overwrite default table styles */
-      background: ${theme.colors.action.hover} !important;
-    `,
+    highlight: css``,
     link: css`
-      color: #6e9fff;
+      color: ${theme.colors.text.link};
     `,
   };
 };