remove redundant style for "Cancel" button

airbytehq · Jan 4, 2023 · c8375ce · c8375ce
1 parent 45f5d76
commit c8375ce
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 13 deletions.
diff --git a/...-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss b/...-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
@@ -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>