Remove workaround for MarketingModal button disabling

Author: kraenhansen

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

@@ -72,53 +72,6 @@ const bannerStyles = css({
   textAlign: 'left',
 });
 
-// TODO: The LG MarketingModal does not provide a way to disable the button
-// so this is a temporary workaround to make the button look disabled.
-const leafyGreenButtonSelector =
-  'button[data-lgid="lg-button"]:not([aria-label="Close modal"])';
-const focusSelector = `&:focus-visible, &[data-focus="true"]`;
-const hoverSelector = `&:hover, &[data-hover="true"]`;
-const activeSelector = `&:active, &[data-active="true"]`;
-const focusBoxShadow = (color: string) => `
-    0 0 0 2px ${color}, 
-    0 0 0 4px ${palette.blue.light1};
-`;
-const disabledButtonStyles: Record<Theme, string> = {
-  [Theme.Light]: css({
-    [leafyGreenButtonSelector]: {
-      [`&, ${hoverSelector}, ${activeSelector}`]: {
-        backgroundColor: palette.gray.light2,
-        borderColor: palette.gray.light1,
-        color: palette.gray.base,
-        boxShadow: 'none',
-        cursor: 'not-allowed',
-      },
-
-      [focusSelector]: {
-        color: palette.gray.base,
-        boxShadow: focusBoxShadow(palette.white),
-      },
-    },
-  }),
-
-  [Theme.Dark]: css({
-    [leafyGreenButtonSelector]: {
-      [`&, ${hoverSelector}, ${activeSelector}`]: {
-        backgroundColor: palette.gray.dark3,
-        borderColor: palette.gray.dark2,
-        color: palette.gray.dark1,
-        boxShadow: 'none',
-        cursor: 'not-allowed',
-      },
-
-      [focusSelector]: {
-        color: palette.gray.dark1,
-        boxShadow: focusBoxShadow(palette.black),
-      },
-    },
-  }),
-};
-
 const CloudAIOptInBannerContent: React.FunctionComponent<{
   isProjectAIEnabled: boolean;
   isSampleDocumentPassingEnabled: boolean;
@@ -178,8 +131,6 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   );
   const track = useTelemetry();
   const darkMode = useDarkMode();
-  const currentDisabledButtonStyles =
-    disabledButtonStyles[darkMode ? Theme.Dark : Theme.Light];
 
   useEffect(() => {
     if (isOptInModalVisible) {
@@ -206,13 +157,10 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
       title={`Use AI Features in ${isCloudOptIn ? 'Data Explorer' : 'Compass'}`}
       open={isOptInModalVisible}
       onClose={handleModalClose}
-      // TODO Button Disabling
-      backdropClassName={
-        !isProjectAIEnabled ? currentDisabledButtonStyles : undefined
-      }
       buttonProps={{
         children: 'Use AI Features',
         onClick: onConfirmClick,
+        disabled: !isProjectAIEnabled,
       }}
       linkText="Not now"
       onLinkClick={onOptInModalClose}