fix: improve Avatar text size consistency (#11837)

This commit is contained in:
Erik Ritter 2020-11-29 20:08:47 -08:00 committed by GitHub
parent ec01691e22
commit 671ff6c053
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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)}
}
`;