Table: Tweak to type icon styles (#40596) (#40598)

(cherry picked from commit d179c2a4e9)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

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>

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;