commit 671ff6c053270601e36b25be650f37145d377293
author Erik Ritter <erik.ritter@airbnb.com> Sun Nov 29 20:08:47 2020 -0800
committer GitHub <noreply@github.com> Sun Nov 29 20:08:47 2020 -0800
tree 8f7dbad54373ffba00c3f8a3cc5cdfd8a1477d4d
parent ec01691e2228a29029cace08706f52bc4ea1d8e4

fix: improve Avatar text size consistency (#11837)

superset-frontend/src/components/FacePile/index.tsx

diff --git a/superset-frontend/src/components/FacePile/index.tsx b/superset-frontend/src/components/FacePile/index.tsx
index 3b5d419..025c8e8 100644
--- a/superset-frontend/src/components/FacePile/index.tsx
+++ b/superset-frontend/src/components/FacePile/index.tsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { getCategoricalSchemeRegistry, styled } from '@superset-ui/core';
+import {
+  getCategoricalSchemeRegistry,
+  styled,
+  SupersetTheme,
+} from '@superset-ui/core';
 import { Tooltip } from 'src/common/components/Tooltip';
 import { Avatar } from 'src/common/components';
 import { getRandomColor } from './utils';
@@ -29,20 +33,21 @@
 
 const colorList = getCategoricalSchemeRegistry().get()?.colors ?? [];
 
+const customAvatarStyler = (theme: SupersetTheme) => `
+  width: ${theme.gridUnit * 6}px;
+  height: ${theme.gridUnit * 6}px;
+  line-height: ${theme.gridUnit * 6}px;
+  font-size: ${theme.typography.sizes.m}px;
+`;
+
 const StyledAvatar = styled(Avatar)`
-  width: ${({ theme }) => theme.gridUnit * 6}px;
-  height: ${({ theme }) => theme.gridUnit * 6}px;
-  line-height: ${({ theme }) => theme.gridUnit * 6}px;
-  font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+  ${({ theme }) => customAvatarStyler(theme)}
 `;
 
 // to apply styling to the maxCount avatar
 const StyledGroup = styled(Avatar.Group)`
   .ant-avatar {
-    width: ${({ theme }) => theme.gridUnit * 6}px;
-    height: ${({ theme }) => theme.gridUnit * 6}px;
-    line-height: ${({ theme }) => theme.gridUnit * 6}px;
-    font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+    ${({ theme }) => customAvatarStyler(theme)}
   }
 `;