use variables and text component

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

@@ -1,37 +1,40 @@
 @use "../../../../scss/colors";
+@use "../../../../scss/variables";
 
 .content {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   flex-direction: row;
-  margin-top: 16px;
-  gap: 18px;
+  margin-top: variables.$spacing-lg;
+  gap: variables.$spacing-lg;
+  padding: variables.$spacing-sm;
 }
 
 .controlButton {
-  margin-left: 10px;
+  margin-left: variables.$spacing-md;
 }
 
 .message {
-  font-size: 14px;
-  line-height: 17px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
+}
+
+.success {
+  color: colors.$green;
+}
 
-  & .success {
-    color: colors.$green;
-  }
-  & .error {
-    color: colors.$red;
-  }
+.error {
+  color: colors.$red;
 }
 
+// currently only implemented on transformation view form card, margins are specific to that implementation
+// todo: standardize the margin sizes here
 .line {
   min-width: 100%;
-  height: 1px;
+  height: variables.$border-thin;
   background: colors.$grey;
-  margin: 16px -27px 0 -24px;
+  margin: variables.$spacing-lg -27px 0 -24px;
 }

airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button, LoadingButton } from "components";
+import { Text } from "components/base/Text";
 
 import styles from "./EditControls.module.scss";
 
@@ -29,18 +30,22 @@ const EditControls: React.FC<EditControlProps> = ({
 }) => {
   const showStatusMessage = () => {
     const messageStyle = classnames(styles.message, {
-      [styles.success]: !!successMessage,
-      [styles.error]: !!errorMessage,
+      [styles.success]: successMessage,
+      [styles.error]: errorMessage,
     });
     if (errorMessage) {
-      return <div className={messageStyle}>{errorMessage}</div>;
+      return (
+        <Text as="div" size="lg" className={messageStyle}>
+          {errorMessage}
+        </Text>
+      );
     }
 
     if (successMessage && !dirty) {
       return (
-        <div className={messageStyle} data-id="success-result">
+        <Text as="div" size="lg" className={messageStyle}>
           {successMessage}
-        </div>
+        </Text>
       );
     }
     return null;