Skip to content

Conversation

itsdangold
Copy link
Contributor

Making some broad stroke changes to the new checkout UI

  • making everything more "chonky"
  • slightly changed app structure and wrapping
  • adjustments to color, typography, spacing

@itsdangold itsdangold requested a review from a team as a code owner September 15, 2025 22:54
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 15, 2025
Copy link

codecov bot commented Sep 15, 2025

✅ All tests passed

@isabellaenriquez isabellaenriquez changed the title Checkout v2 - UI tweaks fix(checkout v3): UI tweaks Sep 16, 2025
Comment on lines 909 to 917
<Grid
<Flex
direction="column"
align="start"
gap="2xl"
columns={{
sm: 'auto',
md: isNewCheckout ? '3fr 2fr' : 'auto',
lg: '3fr 2fr',
}}
maxWidth={isNewCheckout ? '1440px' : undefined}
padding={isNewCheckout ? '2xl' : undefined}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this regresses existing checkout

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i also noticed if you collapse all the sections the layout gets weird

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah crap thought i fixed that, good catch

`Annual subscriptions require a one-year non-cancellable commitment.
By using Sentry you agree to our [terms: Terms of Service].`,
{terms: <a href="https://sentry.io/terms/" />}
<LogoSentry height="24px" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this shouldn't show up in existing checkout

Comment on lines 172 to 179
<Grid columns="1fr 1fr" gap="xl">
<ProductSelect
activePlan={activePlan}
formData={formData}
onUpdate={onUpdate}
isNewCheckout
/>
</Grid>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we'll need to move this grid into ProductSelect itself but we can cross this bridge when we have other products later :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also should we add breakpoints?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i figured this was a bandaid for now, i'll add the breakpoint too!

- add translation to cart label
- change structure to show new layout on isNewCheckout
- responsive grid
@isabellaenriquez isabellaenriquez merged commit edaddb1 into master Sep 17, 2025
45 checks passed
@isabellaenriquez isabellaenriquez deleted the dang/new-checkout-ui branch September 17, 2025 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants