Skip to content

fix(theme): differentiate button variants and project card accents#37

Merged
neilime merged 1 commit intomainfrom
copilot/enhance-ui-design-elements
Oct 30, 2025
Merged

fix(theme): differentiate button variants and project card accents#37
neilime merged 1 commit intomainfrom
copilot/enhance-ui-design-elements

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Oct 30, 2025 •
edited
Loading

Secondary and outline buttons were visually identical in dark mode. Primary and neutral project cards lacked sufficient contrast in both light and dark modes.

Button variants

Secondary: Added filled background (15-25% blue), stronger borders (50-75% opacity), box shadows
Outline: Remains transparent with subtle borders (35-40% opacity)

/* Before: identical in dark mode */
[data-theme="dark"] .secondary,
[data-theme="dark"] .outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* After: distinct visual hierarchy */
[data-theme="dark"] .secondary {
  background: rgba(25, 152, 255, 0.25);
  border-color: rgba(25, 152, 255, 0.6);
  box-shadow: 0 2px 8px rgba(25, 152, 255, 0.2);
}

[data-theme="dark"] .outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

Project card accents

Primary: Gradient backgrounds (blue→orange), brand-colored borders, enhanced shadows
Neutral: Pure white in light mode, subtle gray (5% opacity) in dark mode, neutral borders

Before

Before - buttons and cards lack distinction

Before - dark mode cards indistinguishable

After

After - homepage dark mode

After - homepage light mode

Original prompt

This section details on the original issue you should resolve

<issue_title>feat: UI enhancements</issue_title>
<issue_description>### HoverkraftButton

Secondary and outline HoverkraftButton have the same style.

Make them different.

Constraints

Ensure rendering respect accessibility constraints, and have an awesome look and feel in these cobined context

  • light /dark mode
  • inside / outside HoverkraftHero
Image

HoverkraftProjectCard

  • In dark mode primary and neutral accent have the same style. Make them different.
    Image

  • In light mode, primary accent does not look like primary, neutral accent rendering is bad. Fix that
    Image

Constraints

Ensure rendering respect accessibility constraints, and have an awesome look and feel in these cobined context

  • light /dark mode</issue_description>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Update UI styles for Hoverkraft buttons and project cards Differentiate button variants and project card accents Oct 30, 2025
Copilot AI requested a review from neilime October 30, 2025 10:40
@neilime neilime changed the title Differentiate button variants and project card accents fix(theme): differentiate button variants and project card accents Oct 30, 2025
@neilime neilime marked this pull request as ready for review October 30, 2025 11:01
@neilime neilime force-pushed the copilot/enhance-ui-design-elements branch from feee4a0 to d2731d5 Compare October 30, 2025 15:36
@neilime neilime merged commit 1f9b3d4 into main Oct 30, 2025
20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@neilime neilime Awaiting requested review from neilime

Assignees

@neilime neilime

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feat: UI enhancements

2 participants

@neilime