🪟 Migrate styles for Connection-related Components (#17339)

* renames for connection form refactor

* connection form, namespace definition, section

* operations section

* cleanup for text sizes

* updated connection name to use Text

* use variables and text component

* cleanup from rebase

* remove bad card

* make the form a form

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss

@@ -20,6 +20,8 @@
   display: none;
   position: absolute;
   right: variables.$spacing-xl;
+
+  // used to control svg size, not text size
   font-size: 18px;
   color: colors.$blue;
 }
@@ -35,11 +37,7 @@
     width: 100%;
 
     h2 {
-      font-weight: 700;
-      font-size: 24px;
-      line-height: 29px;
       text-align: center;
-      color: colors.$dark-blue-900;
       margin: variables.$spacing-md;
       word-wrap: break-word;
     }

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useState } from "react";
 
 import { Input } from "components";
+import { Text } from "components/ui/Text";
 
 import { buildConnectionUpdate } from "core/domain/connection";
 import { WebBackendConnectionRead } from "core/request/AirbyteClient";
@@ -85,7 +86,9 @@ export const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) =>
       ) : (
         <button className={styles.nameContainer} onClick={() => setEditingState(true)}>
           <div>
-            <h2>{name}</h2>
+            <Text as="h2" size="lg">
+              {name}
+            </Text>
           </div>
           <FontAwesomeIcon className={styles.icon} icon={faPenToSquare} />
         </button>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss

@@ -0,0 +1,14 @@
+@use "../../../../scss/variables";
+
+.tryArrow {
+  margin: 0 variables.$spacing-md -1px 0;
+
+  // used to control svg size
+  font-size: 14px;
+}
+
+.content {
+  max-width: 1279px;
+  margin: 0 auto;
+  padding-bottom: variables.$spacing-md;
+}

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
-import styled from "styled-components";
 
 import { LabeledSwitch } from "components/LabeledSwitch";
 import LoadingSchema from "components/LoadingSchema";
@@ -27,6 +26,8 @@ import { equal, naturalComparatorBy } from "utils/objects";
 import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal";
 import { ConnectionForm } from "views/Connection/ConnectionForm";
 
+import styles from "./ConnectionReplicationTab.module.scss";
+
 interface ConnectionReplicationTabProps {
   onAfterSaveSchema: () => void;
   connectionId: string;
@@ -74,17 +75,6 @@ const ResetWarningModal: React.FC<ResetWarningModalProps> = ({ onCancel, onClose
   );
 };
 
-const Content = styled.div`
-  max-width: 1279px;
-  margin: 0 auto;
-  padding-bottom: 10px;
-`;
-
-const TryArrow = styled(FontAwesomeIcon)`
-  margin: 0 10px -1px 0;
-  font-size: 14px;
-`;
-
 export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> = ({
   onAfterSaveSchema,
   connectionId,
@@ -221,7 +211,7 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
   };
 
   return (
-    <Content>
+    <div className={styles.content}>
       {!isRefreshingCatalog && connection ? (
         <ConnectionFormServiceProvider
           connection={connection}
@@ -239,7 +229,7 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
                 onClick={onRefreshSourceSchema}
                 type="button"
                 variant="secondary"
-                icon={<TryArrow icon={faSyncAlt} />}
+                icon={<FontAwesomeIcon className={styles.tryArrow} icon={faSyncAlt} />}
               >
                 <FormattedMessage id="connection.updateSchema" />
               </Button>
@@ -249,6 +239,6 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
       ) : (
         <LoadingSchema />
       )}
-    </Content>
+    </div>
   );
 };

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss

@@ -0,0 +1,30 @@
+@use "../../../scss/variables";
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+}
+
+.readonly {
+  pointer-events: none;
+}
+
+.flexRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: variables.$spacing-md;
+}
+
+.leftFieldCol {
+  flex: 1;
+  max-width: 640px;
+  padding-right: variables.$spacing-xl;
+}
+
+.rightFieldCol {
+  flex: 1;
+  max-width: 300px;
+}