Login Modal Fixes

[saadiqbal-dev]

Resolves #148
Resolves #150
Resolves #151
Resolves #152

Summary by CodeRabbit

• New Features

  • Introduced a reusable layout container for consistent horizontal centering and responsive width across multiple pages.

• Refactor

  • Replaced the dialog component in the NEAR account creation modal with a custom modal for a simpler UI.
  • Updated the login flow to open a modal instead of triggering login directly.
  • Improved layout and responsiveness in leaderboard, feed, and profile pages using the new container.
  • Enhanced the "Top Feeds" column in the leaderboard with expandable lists for multiple submissions.
  • Adjusted modal and login modal spacing for a cleaner, more compact appearance.
  • Standardized Hero component imports and exports for consistency across the app.

• Style

  • Refined modal and content spacing for better visual alignment and responsiveness.

• Bug Fixes

  • Removed a hardcoded, irrelevant title from feed items to prevent display of placeholder content.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
curatedotfun-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 18, 2025 2:17pm

[coderabbitai]

Walkthrough

This update introduces a new Container component for consistent content width and centering, replaces direct login calls with a modal-based login trigger, removes a hardcoded title from submissions, and refactors modal components for improved sizing and layout. Several components are updated to use the new container and modal styles.

Changes

File(s)	Summary
frontend/src/components/Container.tsx	Adds a new Container component for consistent content width and centering.
frontend/src/components/Leaderboard.tsx frontend/src/routes/_layout/index.tsx frontend/src/routes/_layout/submissions/_layout.tsx	Refactors layout to use the new Container component for page content; adjusts widths and centering.
frontend/src/components/BasicInformationForm.tsx frontend/src/routes/_layout/profile/index.tsx	Changes login button behavior to open a login modal via showLoginModal instead of direct login function.
frontend/src/components/FeedItem.tsx	Removes a hardcoded static title from submission items.
frontend/src/components/Hero.tsx frontend/src/routes/_layout/create/feed.tsx	Changes Hero component export to named export; updates imports to use named import.
frontend/src/components/CreateNearAccountModal.tsx	Refactors to use a custom Modal component instead of Dialog from shadcn/ui for NEAR account creation modal.
frontend/src/components/Modal.tsx	Updates modal container and content classes for improved sizing, centering, and padding.
frontend/src/components/LoginModal.tsx	Removes fixed width and excess margin from login modal for better sizing and spacing.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UIComponent
    participant AuthStore

    User->>UIComponent: Clicks "Login" button
    UIComponent->>AuthStore: Calls showLoginModal()
    AuthStore-->>UIComponent: Opens Login Modal
    User->>UIComponent: Completes login in modal
    UIComponent->>AuthStore: Handles login logic

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Fix login modal width and underlying Modal solution (#148)	✅
Nested login button opens modal on /create/feed and /profile (#150)	✅
Page content should have a max width (standard page width, e.g., 1200px) (#151)	✅
Submissions should not have hardcoded titles (#152)	✅

Poem

In a field of code, a rabbit leaps,
No more wide modals—such bounds it keeps!
The login pops with a gentle modal glow,
Submissions lose their titles—off they go!
Containers hug the content tight,
Pages now look just right.
Hippity-hop, the UI feels light! 🐇✨

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.

---

Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 6607554 and 4e4edb6.

📒 Files selected for processing (12)

• frontend/src/components/BasicInformationForm.tsx (3 hunks)
• frontend/src/components/Container.tsx (1 hunks)
• frontend/src/components/CreateNearAccountModal.tsx (2 hunks)
• frontend/src/components/FeedItem.tsx (0 hunks)
• frontend/src/components/Hero.tsx (3 hunks)
• frontend/src/components/Leaderboard.tsx (2 hunks)
• frontend/src/components/LoginModal.tsx (4 hunks)
• frontend/src/components/Modal.tsx (1 hunks)
• frontend/src/routes/_layout/create/feed.tsx (2 hunks)
• frontend/src/routes/_layout/index.tsx (4 hunks)
• frontend/src/routes/_layout/profile/index.tsx (2 hunks)
• frontend/src/routes/_layout/submissions/_layout.tsx (4 hunks)

💤 Files with no reviewable changes (1)

• frontend/src/components/FeedItem.tsx

🧰 Additional context used

🧬 Code Graph Analysis (5)

frontend/src/routes/_layout/create/feed.tsx (1)

frontend/src/components/Hero.tsx (1)

• Hero (16-53)

frontend/src/routes/_layout/profile/index.tsx (5)

frontend/src/hooks/use-web3-auth.ts (1)

• useWeb3Auth (6-12)

frontend/src/store/auth-store.ts (1)

• useAuthStore (15-21)

frontend/src/components/Container.tsx (1)

• Container (1-5)

frontend/src/components/profile/ProfileHeader.tsx (1)

• ProfileHeader (4-110)

frontend/src/components/profile/ProfileTabs.tsx (1)

• ProfileTabs (49-70)

frontend/src/routes/_layout/index.tsx (2)

frontend/src/components/Hero.tsx (1)

• Hero (16-53)

frontend/src/components/Container.tsx (1)

• Container (1-5)

frontend/src/routes/_layout/submissions/_layout.tsx (1)

frontend/src/components/Hero.tsx (1)

• Hero (16-53)

frontend/src/components/Leaderboard.tsx (2)

frontend/src/components/Hero.tsx (1)

• Hero (16-53)

frontend/src/components/Container.tsx (1)

• Container (1-5)

🔇 Additional comments (32)

frontend/src/components/Container.tsx (1)

1-5: Clean, reusable layout component

This new Container component creates a consistent, responsive layout wrapper that can be reused throughout the application. It provides proper horizontal centering, padding, and width constraints for different screen sizes.

frontend/src/routes/_layout/create/feed.tsx (2)

3-3: Import updated to use named export

The import has been correctly updated to use the named export Hero instead of the default export HeroComponent, aligning with the component's actual export pattern.

---

12-16: Component usage updated

The component usage has been properly updated to use the Hero component instead of HeroComponent.

frontend/src/components/BasicInformationForm.tsx (3)

18-18: Auth store imported for modal-based login

Added import for the auth store to use its modal management functionality.

---

32-33: Login flow refactored to use modal approach

The component now uses the auth store's modal approach for login instead of direct login function calls. This change improves consistency across the application's authentication UI.

---

205-205: Login button updated to use modal trigger

The login button now correctly uses the showLoginModal function instead of the direct login call, completing the refactoring to a modal-based authentication flow.

frontend/src/components/Modal.tsx (2)

24-24: Modal container layout improved

The modal container now uses md:max-w-fit and mx-auto to better center and size the modal, addressing previous feedback about the modal appearing too thin.

---

30-30: Modal content width and styling adjusted

The modal content now has a minimum width on medium screens (md:min-w-[425px]) instead of a maximum width constraint, ensuring it doesn't appear too thin. The border has been lightened to gray-300 for a more subtle appearance.

frontend/src/components/Hero.tsx (3)

16-16: Named export added to Hero component.

The component now has a named export, which makes it consistent with best practices and allows for more flexible importing across the application.

---

28-28: Improved text width constraint for better readability.

The addition of md:max-w-[800px] constrains the paragraph width on medium screens and larger, which improves readability by preventing text from stretching too wide.

---

54-55: Added default export while maintaining named export.

This dual export approach provides flexibility in how the component can be imported (either as a named or default import), making the component more adaptable to different coding styles and preferences.

frontend/src/components/LoginModal.tsx (3)

34-35: Removed fixed width constraint from modal container.

The removal of the fixed width constraint addresses the issue where the login modal appeared too thin, as mentioned in the PR comments. This change will allow the modal to adapt better to different screen sizes.

---

153-153: Removed vertical margins from dividers for better spacing.

Removing the vertical margins from the dividers creates a more compact layout in the modal, allowing more content to be visible without scrolling, especially on smaller screens.

Also applies to: 196-196

---

233-233: Adjusted button container spacing.

The spacing adjustment in the button container improves the layout of the modal by reducing unnecessary whitespace, making the modal more compact and usable on mobile devices.

frontend/src/routes/_layout/index.tsx (3)

15-16: Updated imports for consistency.

The Hero import is now using the named export pattern, which aligns with the changes made in the Hero component. The Container import adds a reusable layout component for consistent styling.

---

144-144: Updated Hero component usage to match named import.

The JSX has been updated to use the named Hero component, maintaining consistency with the import changes.

---

159-190: Implemented Container component for consistent layout.

The FeedSection components are now wrapped in a Container component, which provides consistent horizontal padding, max-width constraints, and centering. This standardizes the layout and improves responsiveness across the application.

frontend/src/routes/_layout/profile/index.tsx (5)

7-8: Added new imports for auth store and container.

These imports support the modal-based login approach and consistent layout implementation.

---

15-16: Updated hooks usage for authentication.

The component now properly destructures values from useWeb3Auth and adds the showLoginModal function from useAuthStore, centralizing the login modal trigger logic.

---

32-32: Improved main container styling.

The updated styling on the main element provides better spacing and responsive behavior, while removing the unnecessary min-h-screen bg-white that was previously applied.

---

33-39: Wrapped profile content in Container component.

Using the Container component ensures consistent layout and responsive behavior for the profile content, aligning with the application-wide layout standardization.

---

41-44: Updated login prompt UI and behavior.

The login mechanism now uses the centralized showLoginModal function instead of directly calling login, providing a more consistent user experience across the application.

frontend/src/routes/_layout/submissions/_layout.tsx (3)

6-6: Good standardization of import

Changing from a default import to a named import for the Hero component improves consistency across the codebase.

---

23-27: Clean simplification of Hero implementation

Replacing unnecessary div wrappers with React fragments (<>...</>) reduces DOM nesting and improves code readability.

---

99-99: Good responsive layout improvements

Adding md:max-w-screen-xl mx-auto ensures the desktop layout has a consistent maximum width and is properly centered, addressing the previous issue noted in PR comments about layout consistency.

frontend/src/components/CreateNearAccountModal.tsx (2)

6-7: Clean replacement of Dialog with Modal component

The switch from shadcn/ui Dialog components to a custom Modal component is a good approach to address the styling issues mentioned in the PR objectives.

---

117-173: Modal implementation greatly improved

The refactored modal structure uses semantic HTML elements and maintains the same functionality while addressing the thin modal issue mentioned in the PR comments. The simpler implementation should make future styling adjustments easier.

Consider testing this on mobile devices to ensure the modal appears properly sized as requested by elliotBraem's comment about needing to be nearly full screen on mobile.

frontend/src/components/Leaderboard.tsx (5)

5-6: Good standardization of imports

Consistent import patterns and adding the Container component aligns with the codebase's direction toward better UI consistency.

---

119-120: Good use of Container component

Wrapping the leaderboard content with the Container component provides consistent width constraints and centering. The responsive styling improvements with flex-col md:flex-row and width constraints help address mobile layout issues.

---

220-220: Responsive width enhancement

The change from a fixed max-w-[368px] to a responsive max-w-[368px] md:max-w-auto md:w-full ensures the table properly fits different screen sizes.

---

319-333: Username column improvement

Adding a properly styled link to user profiles with hover effects enhances usability while keeping the design clean. Good use of external linking with proper security attributes.

---

362-377: Enhanced feed display functionality

The improved toggle implementation for showing multiple feeds per curator is cleaner and provides better user feedback with proper icons and counters.

✨ 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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[elliotBraem]

Login modal is so thin

On mobile, make the modal basically full screen

[elliotBraem]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.