Convert superset-frontend/src/views/CRUD/data/database/DatabaseModal/…

…DatabaseConnectionForm/TableCatalog.tsx
apache · Jan 23, 2023 · 9e0902c · 9e0902c
1 parent ca811e4
commit 9e0902c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/...ontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx b/...ontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { css, SupersetTheme, t } from '@superset-ui/core';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
 import FormLabel from 'src/components/Form/FormLabel';
-import { CloseOutlined } from '@ant-design/icons';
+import Icons from 'src/components/Icons';
 import { FieldPropTypes } from '.';
 import { StyledFooterButton, StyledCatalogTable } from '../styles';
 import { CatalogObject } from '../../types';
@@ -64,8 +64,17 @@ export const TableCatalog = ({
                 value={sheet.name}
               />
               {tableCatalog?.length > 1 && (
-                <CloseOutlined
-                  className="catalog-delete"
+                <Icons.CloseOutlined
+                  css={(theme: SupersetTheme) => css`
+                    align-self: center;
+                    background: ${theme.colors.grayscale.light4};
+                    margin: 5px 5px 8px 5px;
+
+                    &.anticon > * {
+                      line-height: 0;
+                    }
+                  `}
+                  iconSize="m"
                   onClick={() => changeMethods.onRemoveTableCatalog(idx)}
                 />
               )}

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -605,12 +605,6 @@ export const StyledCatalogTable = styled.div`
     width: 95%;
   }
 
-  .catalog-delete {
-    align-self: center;
-    background: ${({ theme }) => theme.colors.grayscale.light4};
-    margin: 5px 5px 8px 5px;
-  }
-
   .catalog-add-btn {
     width: 95%;
   }