From ee8b1ed15a91589b78b2b513aa0d5fcef16e1c8b Mon Sep 17 00:00:00 2001
From: Andrew Bastian <50464395+andrewbastian@users.noreply.github.com>
Date: Fri, 9 Jul 2021 07:33:25 -0700
Subject: [PATCH] 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
---
 superset-frontend/src/CRUD/CollectionTable.tsx   |  1 -
 .../src/datasource/DatasourceEditor.jsx          | 16 ++++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/CRUD/CollectionTable.tsx b/superset-frontend/src/CRUD/CollectionTable.tsx
index 772dda4c4a..78054fd12d 100644
--- a/superset-frontend/src/CRUD/CollectionTable.tsx
+++ b/superset-frontend/src/CRUD/CollectionTable.tsx
@@ -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)}
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 255d853cc3..ba298cb361 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -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>
   );
 }