fix: improve G$ calculator text readability

[supersonicwisd1]

Summary

• Fixes styling issues in the G$ Calculator component where input values were barely readable when the dropdown is opened.
• Includes updated onramper widget
• Includes required URL-signing
• Blocked by server-side signing endpoint

Problem

The calculator component had three Text elements with no styling applied:

• Title text ("With", "You'll get") - no font size, weight, or color
• Input field - using numeric fontSize instead of semantic tokens
• Currency unit labels (cUSD/G$) - no styling at all

This made the text very difficult to read, especially when the calculator dropdown is opened.

Changes

• Line 22: Added proper styling to title text
  • fontSize="sm", fontWeight="500", color="goodGrey.600"
• Line 27: Updated input field styling
  • Changed from fontSize={6} to semantic fontSize="2xl"
  • Added color="goodGrey.800" for better contrast
• Line 40: Added styling to currency unit labels
  • fontSize="md", fontWeight="600", color="goodGrey.600", mt={1}

Related

• Addresses item 3 of Scoutgame task in Implement "Buy G$" GoodProtocolUI#483
• Related to feat: implement Buy G$ page with 3-step progress bar and responsive Onramper widget GoodProtocolUI#605

Testing

• Calculator text is now readable when dropdown is opened
• Styling is consistent with Portfolio page design patterns
• Built successfully with yalc
• No breaking changes to component API

Demo Video

Screen.Recording.2026-02-26.at.14.37.31.mov

Video showing Converter calculator with improved styling

[sourcery-ai]

Hey - I've left some high level feedback:

• Consider extracting the repeated text style props (e.g., fontSize, fontWeight, color for title and currency unit) into a shared style or themed variant so the visual pattern stays consistent and easier to update across similar components.
• The fontSize="2xl" on the input is quite large relative to the surrounding labels; double-check that this doesn’t break layout on smaller viewports or cause truncation within the maxW={220} constraint.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider extracting the repeated text style props (e.g., `fontSize`, `fontWeight`, `color` for title and currency unit) into a shared style or themed variant so the visual pattern stays consistent and easier to update across similar components.
- The `fontSize="2xl"` on the input is quite large relative to the surrounding labels; double-check that this doesn’t break layout on smaller viewports or cause truncation within the `maxW={220}` constraint.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sirpy]

@supersonicwisd1 can you show a video of the storybook showing the fixes?

[supersonicwisd1]

@supersonicwisd1 can you show a video of the storybook showing the fixes?

It has been added to the description