🪟 🐛 Connection Name styles match other fields on Connection create (#…

…20377)

* 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 08a8d95.

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

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",
                 })}

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