Skip to content

Update design of mark complete button#2

Open
CasJam wants to merge 1 commit intomainfrom
cursor/update-design-of-mark-complete-button-938d
Open

Update design of mark complete button#2
CasJam wants to merge 1 commit intomainfrom
cursor/update-design-of-mark-complete-button-938d

Conversation

@CasJam
Copy link
Owner

@CasJam CasJam commented Jun 11, 2025

The "Mark Complete" button in app/javascript/pages/Habits/Index.jsx was updated to align with new design requirements.

  • Solid Green Color: The button's background was changed from bg-green-50 to bg-green-600, and its text color from text-green-700 to text-white for a solid green appearance with better contrast. The border color was also updated to border-green-600 to match the new background.
  • Larger Size: The button's dimensions were increased by adjusting padding from px-3 py-1 to px-4 py-2 and text size from text-sm to text-base.
  • Centered Text: The justify-center Tailwind CSS class was added to ensure the "Mark Complete" text is precisely centered within the button.
  • Hover State: The hover background was updated from hover:bg-green-100 to hover:bg-green-700 for consistent visual feedback.

These modifications enhance the button's prominence and visual appeal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants