Update create connection page to full width, and fix trivial UI issues (

#21352) * Update big prop in FormPageContent to expand to full width * Fix Normalization & Tranformation heading size * Update FormPageContent to scss and add bottom padding * Remove max-width from ConnectionReplicationPage
airbytehq · Jan 13, 2023 · 2256412 · 2256412
1 parent 218b42a
commit 2256412
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss
@@ -0,0 +1,11 @@
+@use "scss/variables";
+
+.container {
+  margin: 13px auto 0;
+  padding-bottom: variables.$spacing-page-bottom;
+
+  &:not(.big) {
+    width: 80%;
+    max-width: 813px;
+  }
+}
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx
@@ -1,9 +1,14 @@
-import styled from "styled-components";
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
 
-const FormPageContent = styled.div<{ big?: boolean }>`
-  width: 80%;
-  max-width: ${({ big }) => (big ? 1279 : 813)}px;
-  margin: 13px auto;
-`;
+import styles from "./FormPageContent.module.scss";
+
+interface FormPageContentProps {
+  big?: boolean;
+}
+
+const FormPageContent: React.FC<PropsWithChildren<FormPageContentProps>> = ({ big, children }) => (
+  <div className={classNames(styles.container, { [styles.big]: big })}>{children}</div>
+);
 
 export default FormPageContent;
diff --git a/...app/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss b/...app/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
@@ -1,8 +1,6 @@
 @use "scss/variables";
 
 .content {
-  max-width: calc(100% - 2 * (#{variables.$spacing-xl}));
-  margin: 0 variables.$spacing-xl;
   padding-bottom: variables.$spacing-md;
 
   > form {

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
@@ -38,7 +38,7 @@ export const OperationsSection: React.FC<OperationsSectionProps> = ({
     <Card>
       <Section>
         {supportsNormalization || supportsTransformations ? (
-          <Heading as="h5">
+          <Heading as="h2" size="sm">
             {[
               supportsNormalization && formatMessage({ id: "connectionForm.normalization.title" }),
               supportsTransformations && formatMessage({ id: "connectionForm.transformation.title" }),