🪟🔧 Remove styled components (round 1) (#18766)

* 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

Author: Joey Marshment-Howell

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;
+}

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>
   );
 };
 

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;
+}

airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx

@@ -1,26 +1,12 @@
 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";
 
 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>
   );
 };

airbyte-webapp/src/components/common/ConnectorIcon/ConnectorIcon.module.scss

@@ -0,0 +1,5 @@
+.content {
+  height: 25px;
+  width: 25px;
+  overflow: hidden;
+}

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>
 );

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;
+}

airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx

@@ -1,35 +1,20 @@
 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";
 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>
   );
 };

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;
+}

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>
 );

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;
+}

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>
   );
 };