From 9954acbf6c7782068b9c0e25c4beb988af7df909 Mon Sep 17 00:00:00 2001
From: Joey Marshment-Howell <josephkmh@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:40:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=94=A7=20Remove=20styled=20co?=
 =?UTF-8?q?mponents=20(round=201)=20(#18766)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor EditorHeader (untested)

* refactor BaseClearView

* delete unused Subtitle

* refactor ConfirmationModal

* refactor Arrow

* refactor BulkHeader

* refactor CatalogTreeSearch

* refactor StreamFieldTable

* refactor StreamHeader

* refactor ConnectorIcon

* refactor TreeRowWrapper

* refactor DeleteBlock

* refactor EmptyResourceBlock

* revert unintended element change
---
 .../components/EditorHeader.module.scss       | 13 +++++++
 .../components/EditorHeader.tsx               | 17 ++------
 .../ConfirmationModal.module.scss             | 13 +++++++
 .../ConfirmationModal/ConfirmationModal.tsx   | 22 ++---------
 .../ConnectorIcon/ConnectorIcon.module.scss   |  5 +++
 .../common/ConnectorIcon/ConnectorIcon.tsx    | 15 +++----
 .../DeleteBlock/DeleteBlock.module.scss       | 16 ++++++++
 .../common/DeleteBlock/DeleteBlock.tsx        | 27 +++----------
 .../EmptyResourceBlock.module.scss            | 27 +++++++++++++
 .../EmptyResourceBlock/EmptyResourceBlock.tsx | 39 ++++---------------
 .../BaseClearView.module.scss                 | 22 +++++++++++
 .../PageViewContainer/BaseClearView.tsx       | 35 +++--------------
 .../connection/CatalogTree/Arrow.module.scss  | 19 +++++++++
 .../connection/CatalogTree/Arrow.tsx          | 31 ++++++---------
 .../CatalogTree/BulkHeader.module.scss        | 13 +++++++
 .../connection/CatalogTree/BulkHeader.tsx     | 20 ++--------
 .../CatalogTree/CatalogTreeSearch.module.scss | 12 ++++++
 .../CatalogTree/CatalogTreeSearch.tsx         | 23 +++--------
 .../CatalogTree/StreamFieldTable.module.scss  |  7 ++++
 .../CatalogTree/StreamFieldTable.tsx          | 12 ++----
 .../CatalogTree/StreamHeader.module.scss      |  4 ++
 .../connection/CatalogTree/StreamHeader.tsx   |  9 +----
 .../CatalogTree/TreeRowWrapper.module.scss    | 20 ++++++++++
 .../connection/CatalogTree/TreeRowWrapper.tsx | 28 +++++--------
 24 files changed, 239 insertions(+), 210 deletions(-)
 create mode 100644 airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss
 create mode 100644 airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.module.scss
 create mode 100644 airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.module.scss
 create mode 100644 airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss
 create mode 100644 airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.module.scss
 create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss
 create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss
 create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss
 create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.module.scss

diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss
new file mode 100644
index 000000000000..834c58a237ea
--- /dev/null
+++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss
@@ -0,0 +1,13 @@
+@use "scss/colors";
+
+.editorHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  color: colors.$dark-blue-900;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  margin: 5px 0 10px;
+}
diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx
index 55a49eb0c42c..f6990cd45702 100644
--- a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx
+++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx
@@ -1,22 +1,11 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
 
 import { ConnectionFormMode } from "hooks/services/ConnectionForm/ConnectionFormService";
 
-const Content = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  color: ${({ theme }) => theme.textColor};
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 17px;
-  margin: 5px 0 10px;
-`;
+import styles from "./EditorHeader.module.scss";
 
 interface EditorHeaderProps {
   mainTitle?: React.ReactNode;
@@ -36,14 +25,14 @@ const EditorHeader: React.FC<EditorHeaderProps> = ({
   disabled,
 }) => {
   return (
-    <Content>
+    <div className={styles.editorHeader}>
       {mainTitle || <FormattedMessage id="form.items" values={{ count: itemsCount }} />}
       {mode !== "readonly" && (
         <Button variant="secondary" type="button" onClick={onAddItem} data-testid="addItemButton" disabled={disabled}>
           {addButtonText || <FormattedMessage id="form.addItems" />}
         </Button>
       )}
-    </Content>
+    </div>
   );
 };
 
diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
index 86081ff47b39..4f7c81dcc15d 100644
--- a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
+++ b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
@@ -1,3 +1,16 @@
 .buttonWithMargin {
   margin-right: 12px;
 }
+
+.content {
+  width: 585px;
+  font-size: 14px;
+  padding: 25px;
+  white-space: pre-line;
+}
+
+.buttonContent {
+  margin-top: 26px;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
index 4f09c55badda..2b45d4333b88 100644
--- a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
+++ b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
@@ -8,19 +7,6 @@ import { Modal } from "components/ui/Modal";
 import useLoadingState from "../../../hooks/useLoadingState";
 import styles from "./ConfirmationModal.module.scss";
 
-const Content = styled.div`
-  width: 585px;
-  font-size: 14px;
-  padding: 25px;
-  white-space: pre-line;
-`;
-
-const ButtonContent = styled.div`
-  margin-top: 26px;
-  display: flex;
-  justify-content: flex-end;
-`;
-
 export interface ConfirmationModalProps {
   onClose: () => void;
   title: string;
@@ -45,9 +31,9 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 
   return (
     <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
-      <Content>
+      <div className={styles.content}>
         <FormattedMessage id={text} />
-        <ButtonContent>
+        <div className={styles.buttonContent}>
           <Button
             className={styles.buttonWithMargin}
             onClick={onClose}
@@ -60,8 +46,8 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           <Button variant="danger" onClick={onSubmitBtnClick} data-id={submitButtonDataId} isLoading={isLoading}>
             <FormattedMessage id={submitButtonText} />
           </Button>
-        </ButtonContent>
-      </Content>
+        </div>
+      </div>
     </Modal>
   );
 };
diff --git a/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.module.scss b/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.module.scss
new file mode 100644
index 000000000000..7e0592687e48
--- /dev/null
+++ b/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.module.scss
@@ -0,0 +1,5 @@
+.content {
+  height: 25px;
+  width: 25px;
+  overflow: hidden;
+}
diff --git a/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.tsx b/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.tsx
index a62a90c7cdbf..9f4012e48522 100644
--- a/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.tsx
+++ b/airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.tsx
@@ -1,22 +1,17 @@
 import React from "react";
-import styled from "styled-components";
 
 import { getIcon } from "utils/imageUtils";
 
+import styles from "./ConnectorIcon.module.scss";
+
 interface Props {
   icon?: string;
   className?: string;
   small?: boolean;
 }
 
-export const Content = styled.div`
-  height: 25px;
-  width: 25px;
-  overflow: hidden;
-`;
-
-export const ConnectorIcon: React.FC<Props> = ({ icon, className }) => (
-  <Content className={className} aria-hidden="true">
+export const ConnectorIcon: React.FC<Props> = ({ icon }) => (
+  <div className={styles.content} aria-hidden="true">
     {getIcon(icon)}
-  </Content>
+  </div>
 );
diff --git a/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.module.scss b/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.module.scss
new file mode 100644
index 000000000000..bf0084c28678
--- /dev/null
+++ b/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.module.scss
@@ -0,0 +1,16 @@
+@use "scss/colors";
+
+.deleteBlock {
+  margin-top: 12px;
+  padding: 19px 20px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.text {
+  font-size: 11px;
+  line-height: 13px;
+  color: colors.$grey-300;
+  white-space: pre-line;
+}
diff --git a/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx
index 7758c8d2f13a..548ad268ffae 100644
--- a/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx
+++ b/airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
 
 import { H5 } from "components/base/Titles";
 import { Button } from "components/ui/Button";
@@ -9,27 +8,13 @@ import { Card } from "components/ui/Card";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 
+import styles from "./DeleteBlock.module.scss";
+
 interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;
 }
 
-const DeleteBlockComponent = styled(Card)`
-  margin-top: 12px;
-  padding: 19px 20px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const Text = styled.div`
-  margin-left: 20px;
-  font-size: 11px;
-  line-height: 13px;
-  color: ${({ theme }) => theme.greyColor40};
-  white-space: pre-line;
-`;
-
 export const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const navigate = useNavigate();
@@ -49,16 +34,16 @@ export const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
   }, [closeConfirmationModal, onDelete, openConfirmationModal, navigate, type]);
 
   return (
-    <DeleteBlockComponent>
-      <Text>
+    <Card className={styles.deleteBlock}>
+      <div className={styles.text}>
         <H5 bold>
           <FormattedMessage id={`tables.${type}Delete.title`} />
         </H5>
         <FormattedMessage id={`tables.${type}DataDelete`} />
-      </Text>
+      </div>
       <Button variant="danger" onClick={onDeleteButtonClick} data-id="open-delete-modal">
         <FormattedMessage id={`tables.${type}Delete`} />
       </Button>
-    </DeleteBlockComponent>
+    </Card>
   );
 };
diff --git a/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss b/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss
new file mode 100644
index 000000000000..92fbc8929d0f
--- /dev/null
+++ b/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss
@@ -0,0 +1,27 @@
+@use "scss/colors";
+
+.content {
+  padding: 74px 0 111px;
+  text-align: center;
+  font-size: 20px;
+  line-height: 27px;
+  color: colors.$dark-blue-900;
+}
+
+.imgBlock {
+  height: 80px;
+  width: 80px;
+  border-radius: 50%;
+  background: colors.$grey-100;
+  margin: 0 auto 10px;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.description {
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 19px;
+  color: colors.$grey-500;
+  margin-top: 5px;
+}
diff --git a/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.tsx b/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.tsx
index 9e08f217359c..3bfdaa4459df 100644
--- a/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.tsx
+++ b/airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.tsx
@@ -1,43 +1,18 @@
 import React from "react";
-import styled from "styled-components";
+
+import styles from "./EmptyResourceBlock.module.scss";
 
 interface EmptyResourceBlockProps {
   text: React.ReactNode;
   description?: React.ReactNode;
 }
 
-const Content = styled.div`
-  padding: 74px 0 111px;
-  text-align: center;
-  font-size: 20px;
-  line-height: 27px;
-  color: ${({ theme }) => theme.textColor};
-`;
-
-const ImgBlock = styled.div`
-  height: 80px;
-  width: 80px;
-  border-radius: 50%;
-  background: ${({ theme }) => theme.greyColor20};
-  margin: 0 auto 10px;
-  text-align: center;
-  padding: 20px 0;
-`;
-
-const Description = styled.div`
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 19px;
-  color: ${({ theme }) => theme.greyColor60};
-  margin-top: 5px;
-`;
-
 export const EmptyResourceBlock: React.FC<EmptyResourceBlockProps> = ({ text, description }) => (
-  <Content>
-    <ImgBlock>
+  <div className={styles.content}>
+    <div className={styles.imgBlock}>
       <img src="/cactus.png" height={40} alt="cactus" />
-    </ImgBlock>
+    </div>
     {text}
-    <Description>{description}</Description>
-  </Content>
+    <div className={styles.description}>{description}</div>
+  </div>
 );
diff --git a/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.module.scss b/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.module.scss
new file mode 100644
index 000000000000..c37d8a07643a
--- /dev/null
+++ b/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.module.scss
@@ -0,0 +1,22 @@
+.content {
+  height: 100%;
+  width: 100%;
+  padding: 34px 0 13px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.logoImg {
+  width: 90px;
+  height: 94px;
+  margin-bottom: 20px;
+}
+
+.mainInfo {
+  min-width: 550px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.tsx b/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.tsx
index 0fde4c190fb3..132a0906c762 100644
--- a/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.tsx
+++ b/airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.tsx
@@ -1,44 +1,21 @@
 import React from "react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 
 import { Version } from "../Version";
-
-const Content = styled.div`
-  height: 100%;
-  width: 100%;
-  padding: 34px 0 13px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const LogoImg = styled.img`
-  width: 90px;
-  height: 94px;
-  margin-bottom: 20px;
-`;
-
-const MainInfo = styled.div`
-  min-width: 550px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
+import styles from "./BaseClearView.module.scss";
 
 export const BaseClearView: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { formatMessage } = useIntl();
   return (
-    <Content>
-      <MainInfo>
+    <div className={styles.content}>
+      <div className={styles.mainInfo}>
         <Link to="..">
-          <LogoImg src="/logo.png" alt={formatMessage({ id: "ui.goBack" })} />
+          <img className={styles.logoImg} src="/logo.png" alt={formatMessage({ id: "ui.goBack" })} />
         </Link>
         {children}
-      </MainInfo>
+      </div>
       <Version />
-    </Content>
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss
new file mode 100644
index 000000000000..4384e196f585
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss
@@ -0,0 +1,19 @@
+@use "scss/colors";
+
+.container {
+  padding: 0 12px;
+  width: 30px;
+  display: inline-block;
+}
+
+.arrow {
+  font-size: 16px;
+  line-height: 16px;
+  color: colors.$dark-blue-900;
+  transition: 0.3s;
+  cursor: pointer;
+
+  &--rotated {
+    transform: rotate(90deg);
+  }
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
index 779961a793d5..39b0d21f28e1 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
@@ -1,7 +1,9 @@
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 import React from "react";
-import styled from "styled-components";
+
+import styles from "./Arrow.module.scss";
 
 interface ArrowProps {
   isItemHasChildren?: boolean;
@@ -10,26 +12,17 @@ interface ArrowProps {
   onExpand?: () => void;
 }
 
-const ArrowContainer = styled.span`
-  padding: 0 12px;
-  width: 30px;
-  display: inline-block;
-`;
-
-const ArrowView = styled(FontAwesomeIcon)<{ $isOpen?: boolean }>`
-  font-size: 16px;
-  line-height: 16px;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  transform: ${({ $isOpen }) => $isOpen && "rotate(90deg)"};
-  transition: 0.3s;
-  cursor: pointer;
-`;
-
 const Arrow: React.FC<ArrowProps> = ({ isItemHasChildren, isItemOpen, onExpand }) => {
   return (
-    <ArrowContainer>
-      {(isItemHasChildren || !onExpand) && <ArrowView icon={faChevronRight} onClick={onExpand} $isOpen={isItemOpen} />}
-    </ArrowContainer>
+    <span className={styles.container}>
+      {(isItemHasChildren || !onExpand) && (
+        <FontAwesomeIcon
+          icon={faChevronRight}
+          onClick={onExpand}
+          className={classNames(styles.arrow, { [styles["arrow--rotated"]]: isItemOpen })}
+        />
+      )}
+    </span>
   );
 };
 
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
index 39cc67ce52d8..e5d290ce2c3d 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
@@ -1,3 +1,16 @@
+@use "scss/colors";
+
+.schemaHeader {
+  min-height: 41px;
+  height: 41px;
+  background: colors.$blue-400;
+  border-radius: 8px 8px 0 0;
+}
+
 .actionButton {
   white-space: nowrap;
 }
+
+.actionCell {
+  display: flex;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
index 9788a0da07f8..4cbf1ad836d2 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
@@ -1,7 +1,6 @@
 import intersection from "lodash/intersection";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Cell, Header } from "components";
 import { Button } from "components/ui/Button";
@@ -19,17 +18,6 @@ import { ArrowCell, CheckboxCell, HeaderCell } from "./styles";
 import { SyncSettingsDropdown } from "./SyncSettingsDropdown";
 import { flatten, getPathType } from "./utils";
 
-const ActionCell = styled.div`
-  display: flex;
-`;
-
-const SchemaHeader = styled(Header)`
-  min-height: 41px;
-  height: 41px;
-  background: ${({ theme }) => theme.primaryColor};
-  border-radius: 8px 8px 0 0;
-`;
-
 function calculateSharedFields(selectedBatchNodes: SyncSchemaStream[]) {
   const primitiveFieldsByStream = selectedBatchNodes.map(({ stream }) => {
     const traversedFields = traverseSchemaToField(stream?.jsonSchema, stream?.name);
@@ -90,7 +78,7 @@ export const BulkHeader: React.FC = () => {
   const paths = primitiveFields.map((f) => f.path);
 
   return (
-    <SchemaHeader>
+    <Header className={styles.schemaHeader}>
       <CheckboxCell />
       <ArrowCell />
       <HeaderCell flex={0.4}>
@@ -132,15 +120,15 @@ export const BulkHeader: React.FC = () => {
       </HeaderCell>
       <HeaderCell />
       <HeaderCell>
-        <ActionCell>
+        <div className={styles.actionCell}>
           <Button className={styles.actionButton} onClick={onCancel}>
             <FormattedMessage id="connectionForm.bulkEdit.cancel" />
           </Button>
           <Button className={styles.actionButton} onClick={onApply}>
             <FormattedMessage id="connectionForm.bulkEdit.apply" />
           </Button>
-        </ActionCell>
+        </div>
       </HeaderCell>
-    </SchemaHeader>
+    </Header>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss
new file mode 100644
index 000000000000..769dd3277747
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss
@@ -0,0 +1,12 @@
+.searchInput {
+  padding: 10px 8px 9px;
+}
+
+.searchContent {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    content: attr(data-content);
+  }
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
index 9194a870fbe3..2c416ac94a9c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
@@ -1,37 +1,26 @@
 import React from "react";
 import { useIntl } from "react-intl";
-import styled from "styled-components";
 
 import { Input } from "components/ui/Input";
 
+import styles from "./CatalogTreeSearch.module.scss";
+
 interface CatalogTreeSearchProps {
   onSearch: (value: string) => void;
 }
 
-const SearchInput = styled(Input)`
-  padding: 10px 8px 9px;
-`;
-
-const SearchContent = styled.div`
-  position: relative;
-  width: 100%;
-
-  &:before {
-    content: attr(data-content);
-  }
-`;
-
 export const CatalogTreeSearch: React.FC<CatalogTreeSearchProps> = ({ onSearch }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <SearchContent>
-      <SearchInput
+    <div className={styles.searchContent}>
+      <Input
+        className={styles.searchInput}
         placeholder={formatMessage({
           id: `form.nameSearch`,
         })}
         onChange={(e) => onSearch(e.target.value)}
       />
-    </SearchContent>
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss
new file mode 100644
index 000000000000..c47665eda94a
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss
@@ -0,0 +1,7 @@
+@use "scss/colors";
+
+.rowsContainer {
+  background: colors.$white;
+  border-radius: 8px;
+  margin: 0 10px 5px;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
index 538e1b5b8210..023bc03b2ade 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styled from "styled-components";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
@@ -7,14 +6,9 @@ import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { FieldHeader } from "./FieldHeader";
 import { FieldRow } from "./FieldRow";
 import { pathDisplayName } from "./PathPopout";
+import styles from "./StreamFieldTable.module.scss";
 import { TreeRowWrapper } from "./TreeRowWrapper";
 
-const RowsContainer = styled.div`
-  background: ${({ theme }) => theme.whiteColor};
-  border-radius: 8px;
-  margin: 0 10px 5px 10px;
-`;
-
 interface StreamFieldTableProps {
   syncSchemaFields: SyncSchemaField[];
   config: AirbyteStreamConfiguration | undefined;
@@ -30,7 +24,7 @@ export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
       <TreeRowWrapper noBorder>
         <FieldHeader />
       </TreeRowWrapper>
-      <RowsContainer>
+      <div className={styles.rowsContainer}>
         {props.syncSchemaFields.map((field) => (
           <TreeRowWrapper depth={1} key={pathDisplayName(field.path)}>
             <FieldRow
@@ -43,7 +37,7 @@ export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
             />
           </TreeRowWrapper>
         ))}
-      </RowsContainer>
+      </div>
     </>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
index f7a7b2fed34a..967241b4ad12 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -60,3 +60,7 @@
 .purpleBackground {
   background-color: colors.$blue-transparent;
 }
+
+.noHeader {
+  color: colors.$grey-300;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index eacb3024d886..a3b0d542bf36 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Cell, Row } from "components";
 import { CheckBox } from "components/ui/CheckBox";
@@ -20,10 +19,6 @@ import styles from "./StreamHeader.module.scss";
 import { ArrowCell, HeaderCell } from "./styles";
 import { SyncSettingsDropdown } from "./SyncSettingsDropdown";
 
-const EmptyField = styled.span`
-  color: ${({ theme }) => theme.greyColor40};
-`;
-
 interface SyncSchema {
   syncMode: SyncMode;
   destinationSyncMode: DestinationSyncMode;
@@ -126,9 +121,9 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
         </HeaderCell>
         <HeaderCell ellipsis title={stream.stream?.namespace || ""}>
           {stream.stream?.namespace || (
-            <EmptyField>
+            <span className={styles.noHeader}>
               <FormattedMessage id="form.noNamespace" />
-            </EmptyField>
+            </span>
           )}
         </HeaderCell>
         <HeaderCell ellipsis title={stream.stream?.name || ""}>
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.module.scss
new file mode 100644
index 000000000000..3f8529f2bd45
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.module.scss
@@ -0,0 +1,20 @@
+@use "scss/colors";
+
+.rowWrapper {
+  height: 40px;
+  border-bottom: 1px solid colors.$grey-50;
+
+  &--noBorder {
+    border-bottom: none;
+  }
+
+  &--hasDepth:last-child {
+    border: none;
+  }
+}
+
+.rowContent {
+  height: 100%;
+  white-space: nowrap;
+  font-size: 12px;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx b/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx
index c74647f7a5d8..a728047bd3da 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx
@@ -1,31 +1,23 @@
+import classNames from "classnames";
 import React from "react";
-import styled from "styled-components";
 
 import { Row } from "components/SimpleTableComponents";
 
-const RowWrapper = styled.div<{ depth?: number; noBorder?: boolean }>`
-  height: 40px;
-  border-bottom: ${({ theme, noBorder }) => (noBorder ? "none" : `1px solid ${theme.greyColor0}`)};
-
-  &:last-child {
-    border: ${({ depth = 0 }) => depth > 0 && "none"};
-  }
-`;
-
-const RowContent = styled(Row)`
-  height: 100%;
-  white-space: nowrap;
-  font-size: 12px;
-`;
+import styles from "./TreeRowWrapper.module.scss";
 
 const TreeRowWrapper: React.FC<React.PropsWithChildren<{ depth?: number; noBorder?: boolean }>> = ({
   depth,
   children,
   noBorder,
 }) => (
-  <RowWrapper depth={depth} noBorder={noBorder}>
-    <RowContent>{children}</RowContent>
-  </RowWrapper>
+  <div
+    className={classNames(styles.rowWrapper, {
+      [styles["rowWrapper--hasDepth"]]: depth && depth > 0,
+      [styles["rowWrapper--noBorder"]]: noBorder,
+    })}
+  >
+    <Row className={styles.rowContent}>{children}</Row>
+  </div>
 );
 
 export { TreeRowWrapper };