Skip to content

Conversation

@Mit-Patwa
Copy link
Contributor

Part of: #1055

Previous PR's: #2073 #1865 , #1943


Description

This PR removes the legacy _pill.scss file and replaces it with a React component implementation (Pill.tsx) styled using Tailwind CSS utility classes.


Changes Made

  • Removed _pill.scs.
  • Created a new Pill React component that:
    • Uses Tailwind utility classes to replicate previous SCSS styling.
    • Dynamically applies background-color,border and other styles to elements
    • Preserves UI consistency across light and dark themes.

AI Disclosure

  • Cursor Claude Sonnet 4.5 – used for generation generating the boilerplate code for the Pill component
  • All AI-generated content was reviewed manually by me.

Note: Have watched 2 Gumroad PR live streams end to end


Visual Comparison(No visual changes)


Dark Mode

Before After
dark-1-before dark-1-after
dark-2-before dark-2-after
dark-3-before dark-3-after
dark-4-before dark-4-after
dark-5-before dark-5-after
dark-6-before dark-6-after
dark-7-before dark-7-after
dark-8-before dark-8-after
dark-9-before dark-9-after
dark-10-before dark-10-after
dark-11-before dark-11-after
dark-12-before dark-12-after
dark-13-before dark-13-after
dark-14-before dark-14-after
dark-15-before dark-15-after

Light Mode

Before After
light-1-before light-1-after
light-2-before light-2-after
light-3-before light-3-after
light-4-before light-4-after
light-5-before light-5-after
light-6-before light-6-after
light-7-before light-7-after
light-8-before light-8-after
light-9-before light-9-after
light-10-before light-10-after
light-11-before light-11-after
light-12-before light-12-after
light-13-before light-13-after
light-14-before light-14-after
light-15-before light-15-after

@binary-koan
Copy link
Contributor

@Mit-Patwa Pushed a couple of cleanup commits (was easier than leaving comments!) and I also noticed a bug with the Discover menus - on main the shadow is white but here the shadow is black. Could you check?

Screenshot 2025-12-04 at 20 30 49 Screenshot 2025-12-04 at 20 30 59

@Mit-Patwa
Copy link
Contributor Author

@binary-koan sorry for the late reply ,I was a little caught up.
I'm not able to see this black shadow on my branch,it seems to work fine?

Screenshot 2025-12-05 at 7 10 39 pm

@EmCousin
Copy link
Contributor

EmCousin commented Dec 5, 2025

@binary-koan _a assigning this to you since you reviewed the previous PRs, let me know if you can't though.
@Mit-Patwa can you fix the conflicts in the mean time?

@Mit-Patwa
Copy link
Contributor Author

@binary-koan I was able to get the black shadow, this happens when I clicked on one of the discover categories for the first time, this was happening because of aria-[expanded=true]:shadow!(see here )since aria-expanded value is false when clicked for the first time.
Solution: use aria-[current=true]:hover:shadow! instead.

@Mit-Patwa
Copy link
Contributor Author

@binary-koan can we merge?

@binary-koan
Copy link
Contributor

Sorry for the wait, will hopefully get to this tomorrow

@Mit-Patwa
Copy link
Contributor Author

Okay! I’m just a little excited since it’s my first merge :)

@EmCousin EmCousin requested a review from binary-koan December 10, 2025 10:19
@binary-koan
Copy link
Contributor

Could you check if the failing tests are related?

@Mit-Patwa
Copy link
Contributor Author

Mit-Patwa commented Dec 11, 2025

@binary-koan a bunch of tests are failing because of changed formatting, (No visual changes)
one of the failing tests :

Failure/Error: expect(page).to have_radio_button("First Tier", text: "$3 $1.47 a month")
  expected to find visible radio_button "First Tier" with text "$3 $1.47 a month" but there were no matches. Also found "$3\n$1.47 a month\nFirst Tier", which matched the selector but not all filters.

What's the best approach? just modifying the test cases to expect:
expect(page).to have_radio_button("First Tier", text: "$3 \n$1.47 a month")
instead of
expect(page).to have_radio_button("First Tier", text: "$3 $1.47 a month")

@binary-koan
Copy link
Contributor

The normalize_ws option is probably better, but that's fine if there are cases it doesn't work

@binary-koan binary-koan assigned Mit-Patwa and unassigned binary-koan Dec 11, 2025
@Mit-Patwa
Copy link
Contributor Author

Mit-Patwa commented Dec 12, 2025

@binary-koan could you help me out with the test cases,when I try to run the failing tests locally, I get a 502 bad gateway error before the testing even starts , because of which I get false test failures.What's the solution?
failures_r_spec_example_groups_purchasing_power_parity_membership_product_applies_the_ppp_discount_58

@Mit-Patwa
Copy link
Contributor Author

@binary-koan could you trigger CI the tests should pass now, also I noticed you changed some of the tailwind utilities in the cleanup commits , did they work fine?

@binary-koan
Copy link
Contributor

Added a couple of minor fixes (realised my cleanup did break the small pill styles, my bad ...), will go ahead and merge now. Thanks again for the contribution!

@binary-koan binary-koan merged commit bd329a7 into antiwork:main Dec 13, 2025
124 of 127 checks passed
@Mit-Patwa
Copy link
Contributor Author

Mit-Patwa commented Dec 13, 2025

Awesome!!!Thanks for my first merge,what's the process for claiming the bounty?

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.

3 participants