fix: improve Avatar text size consistency (apache#11837)

skion · Nov 30, 2020 · 671ff6c · 671ff6c
1 parent ec01691
commit 671ff6c
Showing 1 changed file with 14 additions and 9 deletions.
diff --git 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 @@ interface FacePileProps {
 
 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)}
   }
 `;