fix: improve visibility of waiting indicator in plan connect modals

[kevin-on]

Description

The "Waiting for authorization..." message was hard to see due to muted styling. Replace with a prominent banner featuring a spinner animation, accent border, and clear instructions.

Checklist before requesting a review

• I have reviewed the guidelines for contributing to this repository.
• I have performed a self-review of my code
• I have performed a code linting check and type check (by running npm run lint:check and npm run type:check)
• I have run the test suite (by running npm run test)
• I have tested the functionality manually

Summary by CodeRabbit

• Improvements
  • Enhanced plan connection authorization screens for Gemini and OpenAI integrations with visual loading indicators and clearer instructional messaging.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Enhanced the waiting/authorization UI in two plan connection modals (Gemini and OpenAI) by replacing simple text placeholders with richer components featuring spinners, styled titles, and descriptive messages, accompanied by comprehensive CSS styling for visual presentation.

Changes

Cohort / File(s)	Summary
Modal UI Components src/components/settings/modals/ConnectGeminiPlanModal.tsx, src/components/settings/modals/ConnectOpenAIPlanModal.tsx	Updated the isWaitingForCallback state rendering from a plain text "Waiting for authorization..." to a structured UI block containing a spinner, bold title ("Waiting for authorization"), and descriptive subtitle ("Complete the login in your browser, then return here"). No logic flow changes.
Styling styles.css	Added comprehensive styling for the plan connection waiting state: container with border, padding, and background color; flex-based layout for content and spinner; keyframe animation for spinner rotation; text formatting with strong and span element rules. Replaced minimal margin and font-size rules with full component styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰✨ A waiting state was plain and bare,
Now spinners twirl with courteous care,
Bold titles shine, descriptions flow,
The authorization dance will gently show. 🌀

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: improving the visibility of the waiting indicator in plan connect modals, which matches the primary objective of replacing muted styling with a prominent banner.
Description check	✅ Passed	The description provides a clear summary of changes, includes motivation (visibility improvement), and contains all checked items from the required checklist including code review, linting, testing, and manual testing.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}