diff --git a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
index dee8cf500232..2e86bfd12f94 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, useEffect, useState } from "react";
import styled from "styled-components";
import { useResource } from "rest-hooks";
+import { Button } from "components";
import HeadTitle from "components/HeadTitle";
import useSource, { useSourceList } from "hooks/services/useSourceHook";
import useDestination, {
@@ -28,6 +29,7 @@ import LoadingPage from "components/LoadingPage";
import useWorkspace from "hooks/services/useWorkspace";
import useRouterHook from "hooks/useRouter";
import { Routes } from "pages/routes";
+import { FormattedMessage } from "react-intl";
const Content = styled.div<{ big?: boolean; medium?: boolean }>`
width: 100%;
@@ -41,6 +43,17 @@ const Content = styled.div<{ big?: boolean; medium?: boolean }>`
position: relative;
z-index: 2;
`;
+
+const Footer = styled.div`
+ width: 100%;
+ height: 100px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 20px 0;
+`;
+
const ScreenContent = styled.div`
width: 100%;
position: relative;
@@ -96,6 +109,11 @@ const OnboardingPage: React.FC = () => {
const getDestinationDefinitionById = (id: string) =>
destinationDefinitions.find((item) => item.destinationDefinitionId === id);
+ const handleFinishOnboarding = () => {
+ finishOnboarding();
+ push(Routes.Connections);
+ };
+
const renderStep = () => {
if (currentStep === StepType.INSTRUCTION) {
const onStart = () => setCurrentStep(StepType.CREATE_SOURCE);
@@ -204,17 +222,9 @@ const OnboardingPage: React.FC = () => {
}
const onSync = () => syncConnection(connections[0]);
- const onCloseOnboarding = () => {
- finishOnboarding();
- push(Routes.Connections);
- };
return (
-
+
);
};
@@ -235,6 +245,15 @@ const OnboardingPage: React.FC = () => {
}>{renderStep()}
+
);
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
index 0261bde007df..b78904a27b88 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
@@ -6,7 +6,7 @@ import { useResource, useSubscription } from "rest-hooks";
import VideoItem from "./VideoItem";
import ProgressBlock from "./ProgressBlock";
import HighlightedText from "./HighlightedText";
-import { H1, Button } from "components/base";
+import { H1 } from "components/base";
import UseCaseBlock from "./UseCaseBlock";
import ConnectionResource from "core/resources/Connection";
import SyncCompletedModal from "views/Feedback/SyncCompletedModal";
@@ -17,7 +17,6 @@ import useWorkspace from "hooks/services/useWorkspace";
type FinalStepProps = {
connectionId: string;
onSync: () => void;
- onFinishOnboarding: () => void;
};
const Title = styled(H1)`
@@ -35,15 +34,7 @@ const Videos = styled.div`
padding: 0 27px;
`;
-const CloseButton = styled(Button)`
- margin-top: 30px;
-`;
-
-const FinalStep: React.FC = ({
- connectionId,
- onSync,
- onFinishOnboarding,
-}) => {
+const FinalStep: React.FC = ({ connectionId, onSync }) => {
const { sendFeedback } = useWorkspace();
const {
feedbackPassed,
@@ -119,10 +110,6 @@ const FinalStep: React.FC = ({
/>
))}
-
-
-
-
{isOpen ? (
setIsOpen(false)}