{mode !== "readonly" && (
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 = ({ isSubmitting, errorMessage, isValid }) => {
- if (isSubmitting) {
- return (
-
-
-
-
-
-
- );
- }
-
return (
-
+
{errorMessage ? (
@@ -86,11 +58,11 @@ const CreateControls: React.FC = ({ isSubmitting, errorMess
)}
-
-
+
);
};
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss
index 2afd4f0946a3..1610ff1d8d2c 100644
--- 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
index fc78785d6458..6fa6fe33cd1b 100644
--- 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 = ({
@@ -25,33 +25,28 @@ const EditControls: React.FC = ({
successMessage,
errorMessage,
enableControls,
- withLine,
}) => {
return (
- <>
- {withLine && }
-
- >
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss
deleted file mode 100644
index 87ff85fde155..000000000000
--- a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.collapsibleCard {
- margin-bottom: 10px;
-}
diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx
index 4b0dfdaeec9d..52b12607e2bd 100644
--- 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 = ({
return (
{title}
diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss
index a756f2ddb779..997a2399432e 100644
--- 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/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
deleted file mode 100644
index 17d92ee1b1e6..000000000000
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.buttonsContainer {
- display: flex;
-}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
index 21030a199977..fa40c8a3aedb 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -3,6 +3,8 @@ import { FormattedMessage } from "react-intl";
import { CellProps } from "react-table";
import { HeadTitle } from "components/common/HeadTitle";
+import { FlexContainer } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
import { Table } from "components/ui/Table";
import { Connector, ConnectorDefinition } from "core/domain/connector";
@@ -12,10 +14,9 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
import { useCurrentWorkspace } from "hooks/services/useWorkspace";
import ConnectorCell from "./ConnectorCell";
-import styles from "./ConnectorsView.module.scss";
import CreateConnector from "./CreateConnector";
import ImageCell from "./ImageCell";
-import { Block, FormContentTitle, Title } from "./PageComponents";
+import { FormContentTitle } from "./PageComponents";
import UpgradeAllButton from "./UpgradeAllButton";
import VersionCell from "./VersionCell";
@@ -125,7 +126,7 @@ const ConnectorsView: React.FC = ({
const renderHeaderControls = (section: "used" | "available") =>
((section === "used" && usedConnectorsDefinitions.length > 0) ||
(section === "available" && usedConnectorsDefinitions.length === 0)) && (
-
+
{allowUploadCustomImage && }
{(hasNewConnectorVersion || isUpdateSuccess) && allowUpdateConnectors && (
= ({
onUpdate={onUpdate}
/>
)}
-
+
);
return (
@@ -143,31 +144,37 @@ const ConnectorsView: React.FC = ({
- {usedConnectorsDefinitions.length > 0 && (
-
-
-
- {renderHeaderControls("used")}
-
+
+ {usedConnectorsDefinitions.length > 0 && (
+
+
+
+
+
+ {renderHeaderControls("used")}
+
+
+
+ )}
+
+
+
+
+
+
+ {renderHeaderControls("available")}
+
-
- )}
-
-
-
-
- {renderHeaderControls("available")}
-
-
-
+
+
>
);
};
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
index 31a9eaff246d..ef7827175dd4 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
@@ -1,27 +1,11 @@
import styled from "styled-components";
-import { H5 } from "components/base/Titles";
-
-const Title = styled(H5)`
- color: ${({ theme }) => theme.darkPrimaryColor};
- margin-bottom: 19px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-`;
-
-const Block = styled.div`
- margin-bottom: 56px;
-`;
-
-const FormContent = styled.div`
+export const FormContent = styled.div`
width: 253px;
margin: -10px 0 -10px 200px;
position: relative;
`;
-const FormContentTitle = styled(FormContent)`
+export const FormContentTitle = styled(FormContent)`
margin: 0 0 0 200px;
`;
-
-export { Title, Block, FormContent, FormContentTitle };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
index fc965f61fed9..1bba26e32786 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
@@ -1,8 +1,6 @@
@use "scss/variables";
.content {
- padding-bottom: variables.$spacing-md;
-
> form {
display: flex;
flex-direction: column;
diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
index 48419e552f16..8badacf0e855 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
+++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
@@ -31,10 +31,6 @@
}
}
-.contentCard {
- margin-bottom: variables.$spacing-xl;
-}
-
.footer {
width: 100%;
display: flex;
diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
index 29bcdb7986bb..c5f87cbf6a4b 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
@@ -159,7 +159,6 @@ export const ConnectionStatusPage: React.FC = () => {
return (
<>
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss
index 6903e64a247b..681bc32cc405 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss
@@ -1,7 +1,17 @@
+@use "scss/variables";
+
.content {
max-width: 1073px;
margin: 0 auto;
- padding-bottom: 10px;
+
+ & > fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ display: flex;
+ flex-direction: column;
+ gap: variables.$spacing-lg;
+ }
}
.customCard {
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
index 17bd026c7c27..40c9ee19e2b9 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
@@ -61,10 +61,7 @@ export const ConnectionTransformationPage: React.FC = () => {
return (
-