chore: update dataset count badge and tash icon sizing (#15608)

* update trash icon size

* changed badge icon `height` to `16px` (using `gridUnits` and centered text inside via `line-height`

* changed badge icon `height` to `16px` (using `gridUnits`), centered text inside via `line-height`, alignedItems inside div w/flex
This commit is contained in:
Andrew Bastian 2021-07-09 07:33:25 -07:00 committed by GitHub
parent 367d47bec5
commit ee8b1ed15a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -352,7 +352,6 @@ export default class CRUDCollection extends React.PureComponent<
aria-label="Delete item"
className="pointer"
data-test="crud-delete-icon"
css={{ fontSize: '18px' }}
role="button"
tabIndex={0}
onClick={this.deleteItem.bind(this, record.id)}

View File

@ -87,6 +87,14 @@ const StyledTableTabs = styled(Tabs)`
}
`;
const StyledBadge = styled(Badge)`
.ant-badge-count {
line-height: ${({ theme }) => theme.gridUnit * 4}px;
height: ${({ theme }) => theme.gridUnit * 4}px;
margin-left: ${({ theme }) => theme.gridUnit}px;
}
`;
const EditLockContainer = styled.div`
font-size: ${supersetTheme.typography.sizes.s}px;
display: flex;
@ -117,8 +125,12 @@ DATASOURCE_TYPES_ARR.forEach(o => {
function CollectionTabTitle({ title, collection }) {
return (
<div data-test={`collection-tab-${title}`}>
{title} <Badge count={collection ? collection.length : 0} showZero />
<div
css={{ display: 'flex', alignItems: 'center' }}
data-test={`collection-tab-${title}`}
>
{title}{' '}
<StyledBadge count={collection ? collection.length : 0} showZero />
</div>
);
}