🪟 🧹 Use custom arrow icon in the new Streams Table (#20678)

* update icon used in streams table and its headers * wrap in arrowCell div
airbytehq · Jan 3, 2023 · 9384c59 · 9384c59
1 parent a5fcbaa
commit 9384c59
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
@@ -1,9 +1,8 @@
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
 import { Cell, Row } from "components/SimpleTableComponents";
 import { CheckBox } from "components/ui/CheckBox";
 import { Switch } from "components/ui/Switch";
@@ -119,7 +118,9 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           />
         )}
       </Cell>
-      <FontAwesomeIcon icon={faArrowRight} className={styles.arrowCell} />
+      <div className={styles.arrowCell}>
+        <ArrowRightIcon />
+      </div>
       <Cell flex={1} title={destNamespace}>
         <Text size="md" className={styles.cellText}>
           {destNamespace}

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx
@@ -1,8 +1,7 @@
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import { FormattedMessage } from "react-intl";
 
+import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
 import { Heading } from "components/ui/Heading";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
@@ -31,7 +30,7 @@ export const StreamConnectionHeader: React.FC = () => {
         </Heading>
       </div>
       <div className={styles.arrowContainer}>
-        <FontAwesomeIcon icon={faArrowRight} />
+        <ArrowRightIcon />
       </div>
       <div className={destinationStyles}>
         {renderIcon(destinationDefinition.icon)}{" "}