Improved homepage CTA buttons with responsive sizing, icons, and visual consistency. Solving Issue : #321

[JatsuAkaYashvant]

Fixes #

I have fixed inconsistent widths due to varying text lengths of "For Teachers" and "For Contributors" buttons on the homepage. Resolving issue number : #321

Describe the changes you have made in this PR -

Changes Made

✅ Core Fixes

• Implemented minimum width constraints (180px desktop/140px mobile)
• Added responsive row/column layout switching at 500px breakpoint
• Integrated Material icons (Icons.school, Icons.people_alt)

✅ Technical Improvements

• Added FittedBox for text scaling
• Implemented LayoutBuilder for dynamic sizing
• Enhanced CVOutlineButton component with icon support

✅ Accessibility

• Maintained 48px minimum touch targets
• Preserved semantic button structure
• Added proper icon semantics

Screenshots of the changes (If any) -

Before :

After :

Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.

Summary by CodeRabbit

• New Features
  • Enhanced button designs now support an optional icon and flexible sizing with customizable padding for a more polished look.
  • The homepage layout has been refined with improved spacing, responsive button arrangements, and optimized image display for a better viewing experience across devices.

[coderabbitai]

Walkthrough

This pull request updates key UI components to enhance layout flexibility and responsiveness. The CVOutlineButton now accepts additional parameters for icon display and width constraints, and its child widget layout has been revised. The home_view.dart file sees modifications to spacing, padding, and layout structure for header and button components, including dynamic adjustment using a LayoutBuilder and a Flex widget. These adjustments aim to improve the visual arrangement and adaptability of the interface elements.

Changes

File(s)	Change Summary
lib/ui/components/cv_outline_button.dart	- Updated CVOutlineButton constructor to include new parameters: leadingIcon, minWidth, maxWidth, and padding with default values. - Modified widget layout: replaced simple OutlinedButton with a ConstrainedBox wrapping an OutlinedButton and adjusted the child from a Padding/Text combo to a Row supporting an optional icon.
lib/ui/views/home/home_view.dart	- Revised layout structure in _HomeViewState by adding/adjusting padding, SizedBox spacing, and a SafeArea wrapper. - Enhanced image display using horizontal padding and specified BoxFit.contain. - Modified button arrangement from a Wrap to a LayoutBuilder with a Flex widget for responsive alignment, including use of the updated CVOutlineButton with leading icons and width constraints.

Possibly related issues

• Improve homepage CTA buttons with responsive sizing, icons, and visual consistency #321: The enhancements to the CVOutlineButton (responsive sizing and leading icon support) align with the issue’s goal of improving homepage CTA buttons through similar responsive design and iconography adjustments.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 822e93a and 4ce11fc.

📒 Files selected for processing (2)

• lib/ui/components/cv_outline_button.dart (1 hunks)
• lib/ui/views/home/home_view.dart (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: build (macos-latest)
• GitHub Check: build (windows-latest)
• GitHub Check: build (ubuntu-latest)

🔇 Additional comments (7)

lib/ui/components/cv_outline_button.dart (3)

5-15: Good enhancement to the button component interface

The additional parameters for leadingIcon, minWidth, maxWidth, and padding provide valuable flexibility while maintaining sensible defaults. This enhancement aligns well with the PR objectives of improving button UI consistency.

---

21-24: Properties correctly defined

The new properties are properly defined with appropriate types, matching the constructor parameters.

---

28-62: Excellent responsive button implementation

The restructuring of the button with ConstrainedBox and Row layout is well-designed:

• The min/max width constraints ensure visual consistency regardless of content length
• The Row with mainAxisSize: MainAxisSize.min keeps the content compact
• The conditional icon rendering with proper spacing looks clean
• Using Flexible with TextOverflow.ellipsis correctly handles text overflow

This implementation perfectly addresses the PR objectives for responsive sizing and icon support.

lib/ui/views/home/home_view.dart (4)

25-45: Improved header layout and spacing

The additional padding and spacing between text elements enhances readability and provides a better visual hierarchy. The consistent horizontal padding (8px) keeps the header properly aligned with other elements.

---

48-56: Enhanced image display

Adding horizontal padding and the BoxFit.contain property improves the image presentation by ensuring it maintains its aspect ratio while fitting appropriately within its container.

---

59-92: Well-implemented responsive button layout

The transition from a simple container to a responsive layout using LayoutBuilder and Flex is excellent:

• The 500px breakpoint for switching between horizontal and vertical layouts is appropriate
• The conditional spacing using a single SizedBox is clean and efficient
• The min/max width values (180/140px) align with the PR objectives
• The icons enhance the visual appeal and provide better context

This implementation delivers on the PR goal of improving the visual consistency of the CTA buttons.

---

98-166: Overall layout improvements

The changes to the main layout structure enhance the user experience:

• Using SafeArea ensures content displays properly on all devices
• Consistent vertical spacing improves the visual rhythm
• The standardized "Explore More" button with width constraints maintains visual consistency

These improvements contribute to a more polished and professional UI.

---

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.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate unit testing code.
  • @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.

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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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.

[coveralls]

Pull Request Test Coverage Report for Build 14220647039

Details

• 46 of 52 (88.46%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.07%) to 64.677%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
lib/ui/views/home/home_view.dart	27	33	81.82%

Totals
Change from base Build 14205381133:	0.07%
Covered Lines:	4019
Relevant Lines:	6214

---

💛 - Coveralls

[github-actions]

🎉 This PR is included in version 1.1.0 🎉

The release is available on:

• v1.1.0
• GitHub release

Your semantic-release bot 📦🚀