From 36314188ec60021818af8995108117f06b5c56ee Mon Sep 17 00:00:00 2001
From: Vladimir <volodymyr.s.petrov@globallogic.com>
Date: Wed, 4 Jan 2023 19:59:50 +0200
Subject: [PATCH] remove redundant style for "Cancel" button (#20752)

---
 .../ConnectionStatusTab.module.scss                   | 11 -----------
 .../pages/ConnectionItemPage/ConnectionStatusTab.tsx  |  4 ++--
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
index aa7c2f7a8086c..48419e552f164 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
@@ -12,7 +12,6 @@
   display: flex;
 
   .resetButton,
-  .cancelButton,
   .syncButton {
     display: flex;
     align-items: center;
@@ -23,16 +22,6 @@
     margin-right: variables.$spacing-md;
   }
 
-  .cancelButton {
-    border-color: transparent;
-    background-color: colors.$red;
-
-    .iconXmark {
-      margin-right: 12px;
-      font-size: 18px;
-    }
-  }
-
   .syncButton {
     .iconRotate {
       display: flex;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
index 4b42755a4f336..2a8c65b41e940 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
@@ -147,10 +147,10 @@ export const ConnectionStatusTab: React.FC = () => {
 
   const cancelJobBtn = (
     <Button
-      className={styles.cancelButton}
+      variant="danger"
       disabled={!activeJob?.id || activeJob.isCanceling}
       onClick={onCancelJob}
-      icon={<FontAwesomeIcon className={styles.iconXmark} icon={faXmark} />}
+      icon={<FontAwesomeIcon icon={faXmark} />}
     >
       {label}
     </Button>