🪟 🎨 Update page bottom margins to be consistent (#21673)

* Fix bottom of Sources and destinations settings page * Remove unused components * Remove H3 from titles * Fix layouts to have consistent page bottom margin * Set default spacing to 20px / xl * Remove extraneous padding from pages and let containers handle it * Check if running cloud app to add extra bottom spacing * Fix layout issues with connection Edit controls, move line rendering to the transformation cards * Set "saving" state in create controls to use the create button instead of having a different UI * Fix padding in DbtTransformationsCard
airbytehq · Jan 23, 2023 · 6595409 · 6595409
1 parent b8d5471
commit 6595409
Show file tree

Hide file tree

Showing 27 changed files with 119 additions and 173 deletions.
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss
@@ -2,7 +2,11 @@
 
 .container {
   margin: 13px auto 0;
-  padding-bottom: variables.$spacing-page-bottom;
+  padding-bottom: variables.$spacing-xl;
+
+  &.cloud {
+    padding-bottom: variables.$spacing-page-bottom-cloud;
+  }
 
   &:not(.big) {
     width: 80%;

diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx
@@ -1,14 +1,23 @@
 import classNames from "classnames";
 import { PropsWithChildren } from "react";
 
+import { isCloudApp } from "utils/app";
+
 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>
+  <div
+    className={classNames(styles.container, {
+      [styles.big]: big,
+      [styles.cloud]: isCloudApp(),
+    })}
+  >
+    {children}
+  </div>
 );
 
 export default FormPageContent;
diff --git a/airbyte-webapp/src/components/base/Titles/Titles.tsx b/airbyte-webapp/src/components/base/Titles/Titles.tsx
@@ -19,12 +19,6 @@ const H1 = styled.h1<IProps>`
   margin: 0;
 `;
 
-/** @deprecated Use `<Heading as="h1 | h2 | h3 | h4 | h5" size="md" />` */
-export const H3 = styled(H1).attrs({ as: "h3" })`
-  font-size: 20px;
-  line-height: 24px;
-`;
-
 /** @deprecated Use `<Heading as="h1 | h2 | h3 | h4 | h5" size="sm" />` */
 export const H5 = styled(H1).attrs({ as: "h5" })`
   font-size: ${({ theme }) => theme.h5?.fontSize || "16px"};

diff --git a/airbyte-webapp/src/components/base/Titles/index.tsx b/airbyte-webapp/src/components/base/Titles/index.tsx
@@ -1 +1 @@
-export { H3, H5 } from "./Titles";
+export { H5 } from "./Titles";
diff --git a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss
@@ -9,6 +9,7 @@
 }
 
 .contentContainer {
+  flex: 1;
   max-width: 100%;
   overflow-x: auto;
   padding-top: variables.$spacing-lg;
@@ -17,6 +18,10 @@
 .content {
   overflow-y: auto;
   height: 100%;
-  padding: 0 variables.$spacing-xl variables.$spacing-page-bottom;
+  padding: 0 variables.$spacing-xl variables.$spacing-xl;
   min-width: variables.$main-page-content-min-width;
+
+  &.cloud {
+    padding-bottom: variables.$spacing-page-bottom-cloud;
+  }
 }
diff --git a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx
@@ -1,5 +1,8 @@
+import classNames from "classnames";
 import React from "react";
 
+import { isCloudApp } from "utils/app";
+
 import styles from "./MainPageWithScroll.module.scss";
 
 /**
@@ -20,7 +23,7 @@ export const MainPageWithScroll: React.FC<MainPageWithScrollProps> = ({ headTitl
         {pageTitle}
       </div>
       <div className={styles.contentContainer}>
-        <div className={styles.content}>{children}</div>
+        <div className={classNames(styles.content, { [styles.cloud]: isCloudApp() })}>{children}</div>
       </div>
     </div>
   );

diff --git a/...ebapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss b/...ebapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss
@@ -1,5 +1,12 @@
+@use "scss/colors";
 @use "scss/variables";
 
 .formCard {
-  padding: 22px 27px variables.$spacing-xl 24px;
+  padding: variables.$spacing-xl;
+}
+
+.editControls {
+  border-top: variables.$border-thin solid colors.$grey-100;
+  margin: 0 -#{variables.$spacing-xl};
+  padding: variables.$spacing-xl variables.$spacing-xl 0;
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx
@@ -13,15 +13,13 @@ import EditControls from "../ConnectionForm/EditControls";
 import styles from "./ConnectionEditFormCard.module.scss";
 
 interface FormCardProps<T> extends CollapsibleCardProps {
-  bottomSeparator?: boolean;
   form: FormikConfig<T>;
   submitDisabled?: boolean;
 }
 
 export const ConnectionEditFormCard = <T extends object>({
   children,
   form,
-  bottomSeparator = true,
   submitDisabled,
   ...props
 }: React.PropsWithChildren<FormCardProps<T>>) => {
@@ -45,10 +43,9 @@ export const ConnectionEditFormCard = <T extends object>({
           <Form className={styles.formCard}>
             <FormChangeTracker changed={dirty} />
             {children}
-            <div>
+            <div className={styles.editControls}>
               {mode !== "readonly" && (
                 <EditControls
-                  withLine={bottomSeparator}
                   isSubmitting={isSubmitting}
                   dirty={dirty}
                   submitDisabled={!isValid || submitDisabled}

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/CreateControls.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/CreateControls.module.scss
@@ -0,0 +1,5 @@
+@use "scss/variables";
+
+.container {
+  margin-top: variables.$spacing-md;
+}
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/CreateControls.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/CreateControls.tsx
@@ -3,34 +3,17 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
-import { Spinner } from "components/ui/Spinner";
+import { FlexContainer } from "components/ui/Flex";
 import { StatusIcon } from "components/ui/StatusIcon";
 
+import styles from "./CreateControls.module.scss";
+
 interface CreateControlsProps {
   isSubmitting: boolean;
   isValid: boolean;
   errorMessage?: React.ReactNode;
 }
 
-const ButtonContainer = styled.div`
-  padding: 15px 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const LoadingContainer = styled(ButtonContainer)`
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 17px;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  justify-content: center;
-`;
-
-const Loader = styled.div`
-  margin-right: 10px;
-`;
-
 const Success = styled(StatusIcon)`
   width: 26px;
   min-width: 26px;
@@ -61,19 +44,8 @@ const ErrorText = styled.div`
 `;
 
 const CreateControls: React.FC<CreateControlsProps> = ({ isSubmitting, errorMessage, isValid }) => {
-  if (isSubmitting) {
-    return (
-      <LoadingContainer>
-        <Loader>
-          <Spinner />
-        </Loader>
-        <FormattedMessage id="form.testingConnection" />
-      </LoadingContainer>
-    );
-  }
-
   return (
-    <ButtonContainer>
+    <FlexContainer alignItems="center" justifyContent="space-between" className={styles.container}>
       {errorMessage ? (
         <ErrorBlock>
           <Error />
@@ -86,11 +58,11 @@ const CreateControls: React.FC<CreateControlsProps> = ({ isSubmitting, errorMess
         <div />
       )}
       <div>
-        <Button type="submit" disabled={isSubmitting || !isValid}>
+        <Button type="submit" isLoading={isSubmitting} disabled={isSubmitting || !isValid}>
           <FormattedMessage id="onboarding.setUpConnection" />
         </Button>
       </div>
-    </ButtonContainer>
+    </FlexContainer>
   );
 };
 

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss
@@ -1,29 +1,5 @@
-@use "scss/colors";
 @use "scss/variables";
 
-.content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex-direction: row;
-  margin-top: variables.$spacing-lg;
-  gap: variables.$spacing-lg;
-  padding: variables.$spacing-sm;
-}
-
-.controlButton {
-  margin-left: variables.$spacing-md;
-}
-
-// 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: variables.$border-thin;
-  background: colors.$grey-100;
-  margin: variables.$spacing-lg -27px 0 -24px;
-}
-
-.buttonsContainer {
-  display: flex;
+.container {
+  margin-top: variables.$spacing-md;
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
 
 import styles from "./EditControls.module.scss";
 import { ResponseMessage } from "./ResponseMessage";
@@ -14,7 +15,6 @@ interface EditControlProps {
   successMessage?: React.ReactNode;
   errorMessage?: React.ReactNode;
   enableControls?: boolean;
-  withLine?: boolean;
 }
 
 const EditControls: React.FC<EditControlProps> = ({
@@ -25,33 +25,28 @@ const EditControls: React.FC<EditControlProps> = ({
   successMessage,
   errorMessage,
   enableControls,
-  withLine,
 }) => {
   return (
-    <>
-      {withLine && <div className={styles.line} />}
-      <div className={styles.content}>
-        <ResponseMessage dirty={dirty} successMessage={successMessage} errorMessage={errorMessage} />
-        <div className={styles.buttonsContainer}>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={isSubmitting || (!dirty && !enableControls)}
-            onClick={resetForm}
-          >
-            <FormattedMessage id="form.cancel" />
-          </Button>
-          <Button
-            className={styles.controlButton}
-            type="submit"
-            isLoading={isSubmitting}
-            disabled={submitDisabled || isSubmitting || (!dirty && !enableControls)}
-          >
-            <FormattedMessage id="form.saveChanges" />
-          </Button>
-        </div>
-      </div>
-    </>
+    <FlexContainer justifyContent="flex-end" alignItems="center" direction="row" gap="lg" className={styles.container}>
+      <ResponseMessage dirty={dirty} successMessage={successMessage} errorMessage={errorMessage} />
+      <FlexContainer gap="md">
+        <Button
+          type="button"
+          variant="secondary"
+          disabled={isSubmitting || (!dirty && !enableControls)}
+          onClick={resetForm}
+        >
+          <FormattedMessage id="form.cancel" />
+        </Button>
+        <Button
+          type="submit"
+          isLoading={isSubmitting}
+          disabled={submitDisabled || isSubmitting || (!dirty && !enableControls)}
+        >
+          <FormattedMessage id="form.saveChanges" />
+        </Button>
+      </FlexContainer>
+    </FlexContainer>
   );
 };
 

diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss
diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx
@@ -1,14 +1,11 @@
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import classNames from "classnames";
 import React from "react";
 import { useToggle } from "react-use";
 import styled from "styled-components";
 
 import { Card } from "components/ui/Card";
 
-import styles from "./CollapsibleCard.module.scss";
-
 const CardHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -40,7 +37,6 @@ export const CollapsibleCard: React.FC<CollapsibleCardProps> = ({
 
   return (
     <Card
-      className={classNames(styles.collapsibleCard)}
       title={
         <CardHeader>
           {title}

diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss
@@ -3,7 +3,6 @@
 .content {
   display: flex;
   flex-direction: row;
-  padding-bottom: variables.$spacing-lg;
 }
 
 .mainView {

diff --git a/...-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/...-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss