Adjust highlights (#4354)

packages/react-components/src/Badge.tsx

@@ -36,7 +36,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
       className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''}${color === 'counterInvert' ? ' highlight--bg-contrast highlight--color' : ''} ${color}Color ${className}`}
       onClick={onClick}
     >
-      {info || (icon && <Icon icon={icon} />)}
+      <div className={isHighlight ? 'highlight--color-contrast' : ''}>{info || (icon && <Icon icon={icon} />)}</div>
       {hover && (
         <Tooltip
           text={hover}

packages/react-components/src/Table/Head.tsx

@@ -6,6 +6,8 @@ import type { ThemeProps } from '../types';
 import React from 'react';
 import styled from 'styled-components';
 
+import Icon from '../Icon';
+
 type HeaderDef = [React.ReactNode?, string?, number?, (() => void)?];
 
 interface Props {
@@ -36,7 +38,15 @@ function Head ({ className = '', filter, header, isEmpty }: Props): React.ReactE
             onClick={onClick}
           >
             {index === 0
-              ? <h1 className='highlight--color'>{label}</h1>
+              ? (
+                <h1>
+                  <Icon
+                    className='highlight--color'
+                    icon='dot-circle'
+                  />
+                  {label}
+                </h1>
+              )
               : isEmpty
                 ? ''
                 : label
@@ -64,6 +74,14 @@ export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
       font-size: 1.75rem;
     }
 
+    h1 {
+      .ui--Icon {
+        font-size: 1rem;
+        margin-right: 0.5rem;
+        vertical-align: middle;
+      }
+    }
+
     &:first-child {
       border-left: 1px solid ${theme.borderTable};
     }