From ff29da4fd1a9a7ad72bdbe410bde4948b39c1686 Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Tue, 13 Sep 2022 10:54:06 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=A7=B9=20Clean=20up=20moda?=
 =?UTF-8?q?l=20and=20onboarding=20video=20components=20(#16466)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove unneeded closeOnBackground property

* rename variable for clarity

* here too
---
 airbyte-webapp/src/components/Modal/Modal.tsx              | 7 +++----
 airbyte-webapp/src/components/Modal/index.stories.tsx      | 2 +-
 .../components/VideoItem/components/ShowVideo.tsx          | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp/src/components/Modal/Modal.tsx b/airbyte-webapp/src/components/Modal/Modal.tsx
index 299043a1a69c..81ffe13d7b9c 100644
--- a/airbyte-webapp/src/components/Modal/Modal.tsx
+++ b/airbyte-webapp/src/components/Modal/Modal.tsx
@@ -9,8 +9,7 @@ import styles from "./Modal.module.scss";
 export interface ModalProps {
   title?: string | React.ReactNode;
   onClose?: () => void;
-  clear?: boolean;
-  closeOnBackground?: boolean;
+  cardless?: boolean;
   size?: "sm" | "md" | "lg" | "xl";
   testId?: string;
 }
@@ -22,7 +21,7 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, clear, testId }) => {
+const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, cardless, testId }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {
@@ -35,7 +34,7 @@ const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, clear, te
       <div className={styles.backdrop} />
       <div className={styles.modalContainer}>
         <Dialog.Panel className={styles.modalPanel}>
-          {clear ? (
+          {cardless ? (
             children
           ) : (
             <ContentCard title={title} className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>
diff --git a/airbyte-webapp/src/components/Modal/index.stories.tsx b/airbyte-webapp/src/components/Modal/index.stories.tsx
index 2e1c7fc2d197..27be1dcd1d4a 100644
--- a/airbyte-webapp/src/components/Modal/index.stories.tsx
+++ b/airbyte-webapp/src/components/Modal/index.stories.tsx
@@ -11,7 +11,7 @@ export default {
 } as ComponentMeta<typeof Modal>;
 
 const Template: ComponentStory<typeof Modal> = (args) => {
-  if (args.clear) {
+  if (args.cardless) {
     return <Modal {...args} />;
   }
 
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
index edd39454b057..75cd12c0e2c5 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
@@ -25,7 +25,7 @@ const CloseButton = styled(Button)`
 
 const ShowVideo: React.FC<ShowVideoProps> = ({ videoId, onClose }) => {
   return (
-    <Modal onClose={onClose} clear closeOnBackground>
+    <Modal onClose={onClose} cardless>
       <CloseButton onClick={onClose} iconOnly>
         <FontAwesomeIcon icon={faTimes} />
       </CloseButton>