From f9563d251be005bb1a74e0ef168c5da721d3f7b9 Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Wed, 4 Jan 2023 13:15:00 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=90=9B=20Connection=20Name?=
 =?UTF-8?q?=20styles=20match=20other=20fields=20on=20Connection=20create?=
 =?UTF-8?q?=20(#20377)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use our default styles

* update snapshots

* fix from merge conflict

* fix scroll issue on webhook form

* Revert "fix scroll issue on webhook form"

This reverts commit 08a8d95201c34f0b369f51b3a565deee07912f3b.
---
 .../CreateConnectionNameField.module.scss            | 12 ------------
 .../CreateConnection/CreateConnectionNameField.tsx   | 10 ++--------
 .../__snapshots__/CreateConnectionForm.test.tsx.snap | 11 ++++++-----
 3 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.module.scss b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.module.scss
index 3e92797468b9..5ef27259b6ec 100644
--- a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.module.scss
+++ b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.module.scss
@@ -1,13 +1 @@
 @forward "../../views/Connection/ConnectionForm/ConnectionFormFields.module.scss";
-@use "../../scss/variables";
-
-.labelHeading {
-  line-height: 16px;
-  display: inline;
-}
-
-.connectionLabel {
-  max-width: 328px;
-  margin-right: variables.$spacing-xl;
-  vertical-align: top;
-}
diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx
index f1f9fb8f4b5b..5948738b5090 100644
--- a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx
+++ b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx
@@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { ControlLabels } from "components/LabeledControl";
 import { FlexContainer } from "components/ui/Flex";
-import { Heading } from "components/ui/Heading";
 import { Input } from "components/ui/Input";
 
 import { Section } from "views/Connection/ConnectionForm/components/Section";
@@ -14,20 +13,15 @@ export const CreateConnectionNameField = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <Section>
+    <Section title={<FormattedMessage id="connection.title" />}>
       <Field name="name">
         {({ field, meta }: FieldProps<string>) => (
           <FlexContainer alignItems="flex-start">
             <div className={styles.leftFieldCol}>
               <ControlLabels
-                className={styles.connectionLabel}
                 nextLine
                 error={!!meta.error && meta.touched}
-                label={
-                  <Heading as="h5" className={styles.labelHeading}>
-                    <FormattedMessage id="form.connectionName" />
-                  </Heading>
-                }
+                label={<FormattedMessage id="form.connectionName" />}
                 message={formatMessage({
                   id: "form.connectionName.message",
                 })}
diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 80ad427dd64c..52063787cf72 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -15,6 +15,11 @@ exports[`CreateConnectionForm should render 1`] = `
           <div
             class="<removed-for-snapshot-test>"
           >
+            <h2
+              class="<removed-for-snapshot-test>"
+            >
+              Connection
+            </h2>
             <div
               class="<removed-for-snapshot-test>"
             >
@@ -27,11 +32,7 @@ exports[`CreateConnectionForm should render 1`] = `
                   <label
                     class="<removed-for-snapshot-test>"
                   >
-                    <h5
-                      class="<removed-for-snapshot-test>"
-                    >
-                      Connection name*
-                    </h5>
+                    Connection name*
                     <span>
                       <br />
                       <span