From 01ffb3852ccf61b236db7d0fbd3f53662f14948d Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 19 Oct 2021 08:26:06 +0100
Subject: [PATCH] Table: Tweak to type icon styles (#40596) (#40598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit d179c2a4e9896a574b9f5f5eb8cf9a98bbb4a7c9)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 packages/grafana-ui/src/components/Table/HeaderRow.tsx | 2 +-
 packages/grafana-ui/src/components/Table/styles.ts     | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Table/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
index 1b513d5baf9..434852eec4c 100644
--- a/packages/grafana-ui/src/components/Table/HeaderRow.tsx
+++ b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
@@ -61,7 +61,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
             title={column.render('Header')}
           >
             {showTypeIcons && (
-              <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" style={{ marginRight: '8px' }} />
+              <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
             )}
             <div>{column.render('Header')}</div>
             <div>
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index e11fa50dd83..9182ec63bd1 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -170,6 +170,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       cursor: pointer;
       padding: 0 ${theme.spacing(0.025)};
     `,
+    typeIcon: css`
+      margin-right: ${theme.spacing(1)};
+      color: ${theme.colors.text.secondary};
+    `,
     noData: css`
       align-items: center;
       display: flex;