Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jan 17, 2026

Button icons in the Share Project dialog (embed code, kiosk share) had insufficient contrast in Orange and Light themes, rendering them nearly invisible against light button backgrounds.

Changes

Icon color override (react-common/styles/share/share.less:178)

  • Force neutral button icons to solid black via var(--pxt-neutral-base)
  • Scoped to .project-share-social .common-button.neutral

Print media fallback (react-common/styles/share/share.less:411-415)

  • Explicit #000000 color for print output
  • Includes print-color-adjust: exact directive
.project-share-social {
    .common-button.neutral {
        border: 1px solid var(--pxt-neutral-alpha20) !important;
        color: var(--pxt-neutral-base) !important;  // Forces rgba(0,0,0,1)
    }
}

@media print {
    .project-share-social .common-button.neutral {
        color: #000000 !important;
        print-color-adjust: exact;
    }
}

Follows existing pattern from .common-button.device-share which uses similar color inversion for contrast.

Original prompt

This section details on the original issue you should resolve

<issue_title>[iPad] Button icons hard to see in Orange and Light themes</issue_title>
<issue_description>Describe the bug
Some button icons have low visibility when using Orange or Light themes on iPad in Share Project dialog.

Steps to reproduce the behavior:
1.Open the Microsoft MakeCode Arcade on iPad.
2.Change the theme to Orange or Light.
3.Open any project and click Share button.
4.Observe the button icons style.

Actual behavior
Button icons blend with background, making them difficult to identify.

Expected behavior
Button icons should have clear contrast and remain easily visible in all themes.

Screenshots
Image

Additional context
1.OS: iPad Pro 11 18.7.3
2.Browser: Safari
3.Arcade version : 2.1.25
4.Microsoft MakeCode version: 12.2.15</issue_description>

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


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Fix button icons visibility in Orange and Light themes Fix button icon visibility in Share dialog for light themes Jan 17, 2026
Copilot AI requested a review from abchatra January 17, 2026 06:16
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.

[iPad] Button icons hard to see in Orange and Light themes

2 participants