From 9acf45cd1b3e9c055121feee3fcd82a716502bd3 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <aniketkatkar97@gmail.com>
Date: Thu, 20 Apr 2023 23:10:12 +0530
Subject: [PATCH] Changed the remove tier button (#11159)

---
 .../resources/ui/src/assets/svg/ic-remove.svg | 11 +++++-
 .../CardListItem/CardWithListItem.tsx         | 36 +++++++++----------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-remove.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-remove.svg
index 2955099650a..0d872c626f8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-remove.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-remove.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="none"><path fill="#37352F" d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8ZM8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7Zm4 7a.5.5 0 0 0-.5-.5h-7a.5.5 0 1 0 0 1h7A.5.5 0 0 0 12 8Z"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13240_20739)">
+<path d="M8 16C3.58887 16 0 12.4111 0 8C0 3.58887 3.58887 0 8 0C12.4111 0 16 3.58887 16 8C16 12.4111 12.4111 16 8 16ZM8 1C4.14013 1 1 4.14013 1 8C1 11.8599 4.14013 15 8 15C11.8599 15 15 11.8599 15 8C15 4.14013 11.8599 1 8 1ZM12 8C12 7.72363 11.7764 7.5 11.5 7.5H4.5C4.22363 7.5 4 7.72363 4 8C4 8.27637 4.22363 8.5 4.5 8.5H11.5C11.7764 8.5 12 8.27637 12 8Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_13240_20739">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx b/openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx
index e95b194b572..e15d252ed83 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx
@@ -11,15 +11,13 @@
  *  limitations under the License.
  */
 
-import {
-  CheckCircleOutlined,
-  DownOutlined,
-  RightOutlined,
-} from '@ant-design/icons';
-import { Button, Space } from 'antd';
+import { DownOutlined, RightOutlined } from '@ant-design/icons';
+import Icon from '@ant-design/icons/lib/components/Icon';
+import { Button } from 'antd';
 import classNames from 'classnames';
 import { t } from 'i18next';
 import React, { FunctionComponent } from 'react';
+import { ReactComponent as IconRemove } from '../../../assets/svg/ic-remove.svg';
 import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
 import Loader from '../../Loader/Loader';
 import { Props } from './CardWithListItem.interface';
@@ -63,7 +61,14 @@ const CardListItem: FunctionComponent<Props> = ({
         );
 
       case 'success':
-        return <CheckCircleOutlined className="tw-text-h4" />;
+        return (
+          <Icon
+            className="text-xl"
+            component={IconRemove}
+            data-testid="remove-tier"
+            onClick={onRemove}
+          />
+        );
 
       default:
         return (
@@ -81,17 +86,12 @@ const CardListItem: FunctionComponent<Props> = ({
   const getCardIcon = (cardId: string) => {
     if (isSelected || (isSelected && isActive)) {
       return (
-        <Space align="center">
-          <Button
-            danger
-            data-testid="remove-tier"
-            size="small"
-            type="primary"
-            onClick={onRemove}>
-            {t('label.remove')}
-          </Button>
-          <CheckCircleOutlined className="tw-text-h4" />
-        </Space>
+        <Icon
+          className="text-xl"
+          component={IconRemove}
+          data-testid="remove-tier"
+          onClick={onRemove}
+        />
       );
     } else if (isActive) {
       return getTierSelectButton(cardId);