Add success sync modal

airbyte-webapp/src/views/Feedback/SyncCompletedModal/SyncCompletedModal.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+// import styled from "styled-components";
+
+import Modal from "components/Modal";
+import ModalHeader from "./components/ModalHeader";
+import ModalBody from "./components/ModalBody";
+
+// const Content = styled.div`
+//   display: flex;
+//   flex-direction: row;
+// `;
+
+const SyncCompletedModal: React.FC = () => {
+  return (
+    <Modal>
+      <ModalHeader />
+      <ModalBody />
+    </Modal>
+  );
+};
+
+export default SyncCompletedModal;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/BadIcon.tsx

@@ -0,0 +1,14 @@
+const BadIcon = ({
+  color = "currentColor",
+}: {
+  color?: string;
+}): JSX.Element => (
+  <svg width="66" height="62" viewBox="0 0 66 62" fill="none">
+    <path
+      d="M25.2 39H6C4.4087 39 2.88258 38.3679 1.75736 37.2426C0.632144 36.1174 3.19289e-06 34.5913 3.19289e-06 33V26.688C-0.000805669 25.9039 0.152076 25.1273 0.450003 24.402L9.738 1.86C9.96385 1.31026 10.3479 0.839985 10.8414 0.508837C11.3349 0.177688 11.9157 0.000586411 12.51 0H63C63.7957 0 64.5587 0.31607 65.1213 0.87868C65.6839 1.44129 66 2.20435 66 3V33C66 33.7957 65.6839 34.5587 65.1213 35.1213C64.5587 35.6839 63.7957 36 63 36H52.554C52.0737 35.9999 51.6004 36.1151 51.1739 36.3359C50.7474 36.5567 50.3801 36.8767 50.103 37.269L33.744 60.447C33.5372 60.7401 33.2322 60.9493 32.8844 61.0368C32.5365 61.1243 32.1689 61.0843 31.848 60.924L26.406 58.2C24.8745 57.4345 23.651 56.1681 22.9388 54.6111C22.2266 53.054 22.0686 51.3002 22.491 49.641L25.2 39ZM48 31.236V6H14.52L6 26.688V33H25.2C26.1138 33.0001 27.0155 33.209 27.8363 33.6106C28.6571 34.0123 29.3753 34.5961 29.9362 35.3175C30.497 36.039 30.8857 36.879 31.0725 37.7735C31.2592 38.668 31.2393 39.5934 31.014 40.479L28.305 51.123C28.2202 51.455 28.2517 51.8061 28.3941 52.1177C28.5366 52.4294 28.7815 52.6829 29.088 52.836L31.071 53.826L45.201 33.81C45.951 32.748 46.911 31.878 48 31.236ZM54 30H60V6H54V30Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default BadIcon;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/FeedbackButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+import BadIcon from "./BadIcon";
+import GoodIcon from "./GoodIcon";
+
+type FeedbackButtonProps = {
+  isBad?: boolean;
+};
+
+const ButtonView = styled.div<FeedbackButtonProps>`
+  color: ${({ theme, isBad }) => (isBad ? theme.redColor : theme.primaryColor)};
+  height: 133px;
+  width: 133px;
+  background: ${({ theme }) => theme.whiteColor};
+  margin: 0 10px;
+  box-shadow: 0 19px 15px -15px #d1d1db;
+  border-radius: 24px;
+  cursor: pointer;
+  text-align: center;
+  padding-top: ${({ isBad }) => (isBad ? 40 : 32)}px;
+`;
+
+const FeedbackButton: React.FC<FeedbackButtonProps> = ({ isBad }) => {
+  return (
+    <ButtonView isBad={isBad}>{isBad ? <BadIcon /> : <GoodIcon />}</ButtonView>
+  );
+};
+
+export default FeedbackButton;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/GoodIcon.tsx

@@ -0,0 +1,14 @@
+const GoodIcon = ({
+  color = "currentColor",
+}: {
+  color?: string;
+}): JSX.Element => (
+  <svg width="66" height="63" viewBox="0 0 66 63" fill="none">
+    <path
+      d="M40.8 23.0012H60C61.5913 23.0012 63.1174 23.6333 64.2426 24.7585C65.3679 25.8838 66 27.4099 66 29.0012V35.3132C66.0008 36.0973 65.8479 36.8739 65.55 37.5992L56.265 60.1442C56.0385 60.6938 55.6538 61.1638 55.1597 61.4944C54.6657 61.8251 54.0845 62.0014 53.49 62.0012H3C2.20435 62.0012 1.44129 61.6851 0.87868 61.1225C0.31607 60.5599 0 59.7968 0 59.0012V29.0012C0 28.2055 0.31607 27.4425 0.87868 26.8799C1.44129 26.3172 2.20435 26.0012 3 26.0012H13.446C13.9263 26.0013 14.3996 25.8861 14.8261 25.6653C15.2526 25.4445 15.6199 25.1244 15.897 24.7322L32.256 1.55118C32.4628 1.25811 32.7678 1.04886 33.1156 0.961347C33.4635 0.873836 33.8311 0.913865 34.152 1.07418L39.594 3.79518C41.1255 4.56066 42.349 5.82712 43.0612 7.38412C43.7734 8.94113 43.9314 10.6949 43.509 12.3542L40.8 23.0012ZM18 30.7652V56.0012H51.48L60 35.3132V29.0012H40.8C39.8862 29.001 38.9845 28.7922 38.1637 28.3906C37.3429 27.9889 36.6247 27.4051 36.0638 26.6836C35.503 25.9622 35.1143 25.1222 34.9275 24.2276C34.7408 23.3331 34.7607 22.4078 34.986 21.5222L37.695 10.8782C37.7798 10.5462 37.7483 10.1951 37.6059 9.88346C37.4634 9.57181 37.2185 9.31832 36.912 9.16518L34.929 8.17518L20.799 28.1912C20.049 29.2532 19.089 30.1232 18 30.7652ZM12 32.0012H6V56.0012H12V32.0012Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default GoodIcon;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalBody.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+
+import { H3, Button } from "components/base";
+import FeedbackButton from "./FeedbackButton";
+
+const Body = styled.div`
+  color: ${({ theme }) => theme.textColor};
+  padding: 22px 48px 23px 46px;
+  background: ${({ theme }) => theme.beigeColor};
+  max-width: 492px;
+  border-radius: 0 0 10px 10px;
+  text-align: center;
+`;
+
+const FeedbackButtons = styled.div`
+  padding: 15px 0 29px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalBody: React.FC = () => {
+  return (
+    <Body>
+      <H3 center bold parentColor>
+        <FormattedMessage id="onboarding.checkData" />
+      </H3>
+      <FeedbackButtons>
+        <FeedbackButton isBad />
+        <FeedbackButton />
+      </FeedbackButtons>
+      <Button secondary>
+        <FormattedMessage id="onboarding.skipNow" />
+      </Button>
+    </Body>
+  );
+};
+
+export default ModalBody;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalHeader.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+import { H3 } from "components/base";
+
+const Header = styled.div`
+  color: ${({ theme }) => theme.whiteColor};
+  padding: 59px 78px 39px;
+  background: ${({ theme }) => theme.textColor};
+  max-width: 492px;
+  border-radius: 10px 10px 0 0;
+  position: relative;
+`;
+
+const Rocket = styled.img`
+  position: absolute;
+  width: 218px;
+  transform: matrix(0.99, 0.12, -0.12, 0.99, 0, 0) rotate(-4.78deg);
+  top: -54px;
+  left: calc(50% - 261px / 2 + 24px);
+  transition: 0.8s;
+`;
+
+const ModalHeader: React.FC = () => {
+  return (
+    <Header>
+      <H3 center bold parentColor>
+        <FormattedMessage id="onboarding.syncCompleted" />
+      </H3>
+      <Rocket src="/rocket.png" />
+    </Header>
+  );
+};
+
+export default ModalHeader;

airbyte-webapp/src/views/Feedback/SyncCompletedModal/index.tsx

@@ -0,0 +1,3 @@
+import SyncCompletedModal from "./SyncCompletedModal";
+
+export default SyncCompletedModal;

airbyte-webapp/src/views/layout/SideBar/components/OnboardingIcon.tsx

@@ -0,0 +1,14 @@
+const OnboardingIcon = ({
+  color = "currentColor",
+}: {
+  color?: string;
+}): JSX.Element => (
+  <svg width="21" height="17" viewBox="0 0 21 17" fill="none">
+    <path
+      d="M18.001 4.99951V11.4995C18.001 12.693 17.5269 13.8376 16.683 14.6815C15.839 15.5254 14.6945 15.9995 13.501 15.9995C12.3075 15.9995 11.1629 15.5254 10.319 14.6815C9.47508 13.8376 9.00098 12.693 9.00098 11.4995V4.49951C9.00098 3.83647 8.73758 3.20059 8.26874 2.73174C7.7999 2.2629 7.16402 1.99951 6.50098 1.99951C5.83794 1.99951 5.20205 2.2629 4.73321 2.73174C4.26437 3.20059 4.00098 3.83647 4.00098 4.49951V11.1695C4.66847 11.4054 5.23107 11.8697 5.58934 12.4803C5.9476 13.0909 6.07846 13.8085 5.95879 14.5063C5.83911 15.2041 5.47661 15.8371 4.93535 16.2934C4.39409 16.7497 3.70893 17 3.00098 17C2.29302 17 1.60786 16.7497 1.0666 16.2934C0.525345 15.8371 0.16284 15.2041 0.0431652 14.5063C-0.0765095 13.8085 0.0543518 13.0909 0.412617 12.4803C0.770882 11.8697 1.33348 11.4054 2.00098 11.1695V4.49951C2.00098 3.30604 2.47508 2.16145 3.319 1.31753C4.16291 0.473618 5.3075 -0.000488281 6.50098 -0.000488281C7.69445 -0.000488281 8.83904 0.473618 9.68296 1.31753C10.5269 2.16145 11.001 3.30604 11.001 4.49951V11.4995C11.001 12.1626 11.2644 12.7984 11.7332 13.2673C12.2021 13.7361 12.8379 13.9995 13.501 13.9995C14.164 13.9995 14.7999 13.7361 15.2687 13.2673C15.7376 12.7984 16.001 12.1626 16.001 11.4995V4.99951H13.001L17.001 -0.000488281L21.001 4.99951H18.001ZM3.00098 12.9995C2.73576 12.9995 2.48141 13.1049 2.29387 13.2924C2.10633 13.4799 2.00098 13.7343 2.00098 13.9995C2.00098 14.2647 2.10633 14.5191 2.29387 14.7066C2.48141 14.8942 2.73576 14.9995 3.00098 14.9995C3.26619 14.9995 3.52055 14.8942 3.70808 14.7066C3.89562 14.5191 4.00098 14.2647 4.00098 13.9995C4.00098 13.7343 3.89562 13.4799 3.70808 13.2924C3.52055 13.1049 3.26619 12.9995 3.00098 12.9995Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default OnboardingIcon;