WIP

Author: jcobis

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

@@ -70,28 +70,7 @@ describe('AIOptInModal Component', function () {
       </PreferencesProvider>
     );
     const button = screen.getByText('Use AI Features').closest('button');
-    expect(button?.getAttribute('aria-disabled')).to.equal('false');
-  });
-
-  it('should disable the opt in button if project AI setting is disabled', async function () {
-    await mockPreferences.savePreferences({
-      enableGenAIFeaturesAtlasProject: false,
-    });
-    render(
-      <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
-      </PreferencesProvider>
-    );
-    const button = screen.getByText('Use AI Features').closest('button');
-    expect(button?.style.cursor).to.equal('not-allowed');
+    expect(button?.style.cursor).to.not.equal('not-allowed');
   });
 
   describe('conditional banner messages', function () {

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

@@ -62,34 +62,38 @@ const focusBoxShadow = (color: string) => `
 `;
 const disabledButtonStyles: Record<Theme, string> = {
   [Theme.Light]: css`
-    &,
-    ${hoverSelector}, ${activeSelector} {
-      background-color: ${palette.gray.light2};
-      border-color: ${palette.gray.light1};
-      color: ${palette.gray.base};
-      box-shadow: none;
-      cursor: not-allowed;
-    }
+    button {
+      &,
+      ${hoverSelector}, ${activeSelector} {
+        background-color: ${palette.gray.light2};
+        border-color: ${palette.gray.light1};
+        color: ${palette.gray.base};
+        box-shadow: none;
+        cursor: not-allowed;
+      }
 
-    ${focusSelector} {
-      color: ${palette.gray.base};
-      box-shadow: ${focusBoxShadow(palette.white)};
+      ${focusSelector} {
+        color: ${palette.gray.base};
+        box-shadow: ${focusBoxShadow(palette.white)};
+      }
     }
   `,
 
   [Theme.Dark]: css`
-    &,
-    ${hoverSelector}, ${activeSelector} {
-      background-color: ${palette.gray.dark3};
-      border-color: ${palette.gray.dark2};
-      color: ${palette.gray.dark1};
-      box-shadow: none;
-      cursor: not-allowed;
-    }
+    button {
+      &,
+      ${hoverSelector}, ${activeSelector} {
+        background-color: ${palette.gray.dark3};
+        border-color: ${palette.gray.dark2};
+        color: ${palette.gray.dark1};
+        box-shadow: none;
+        cursor: not-allowed;
+      }
 
-    ${focusSelector} {
-      color: ${palette.gray.dark1};
-      box-shadow: ${focusBoxShadow(palette.black)};
+      ${focusSelector} {
+        color: ${palette.gray.dark1};
+        box-shadow: ${focusBoxShadow(palette.black)};
+      }
     }
   `,
 };