Skip to content

✨ Enhancement: Center-align buttons on Community page for improved UI balance #1529

Closed
@Priyanshuthapliyal2005

Description

@Priyanshuthapliyal2005

Is your feature request related to a problem? Please describe

The current design of the JSON Schema community page has buttons aligned to the left side of their respective sections. This creates a visual imbalance, particularly in sections with centered headings and text. The left-aligned buttons break the visual flow and appear disconnected from the centered content above them.
This inconsistency in alignment makes the interface feel less polished and can negatively impact user experience by creating visual tension between centered text and left-aligned interactive elements.

Describe the solution you'd like

I propose center-aligning all buttons on the community page to create a more balanced and visually appealing interface. This would involve:
1.Adding text-center class to button container divs
2.Replacing block md:inline-block classes with inline-block for buttons
3.Removing unnecessary mx-auto on container divs where text-center is sufficient
These changes would create a more cohesive design where buttons align with their corresponding section headings and text, improving the overall visual hierarchy and flow of the page.
I have created a branch with these changes implemented and recorded before/after videos to demonstrate the improvement. If you like the centered button design, I can submit a PR with these changes.

Describe alternatives you've considered

No response

Additional context

This enhancement is purely visual and doesn't affect functionality. It's a small change that can significantly improve the perceived quality of the interface.
The current implementation uses a mix of alignment approaches which creates visual inconsistency. Standardizing on centered buttons would establish a clearer design pattern throughout the community page.

Before Video

communitybutton.mp4

After Video

updatedcommunity.mp4

Are you working on this?

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageThis is the initial status for an issue that requires triage.✨ EnhancementIndicates that the issue suggests an improvement or new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions