fix: APP-588 layout alignment improvements #2627
Conversation
✅ Deploy Preview for regen-website ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for terrasos ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@erikalogie @S4mmyb see testing instructions |
There was a problem hiding this comment.
The next button needs to be larger, see design:
on both mobile and desktop: https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=920-86395&m=dev
https://www.figma.com/design/BTuUv6QXY4GbliZcXCe8RJ/Fiat-payments?node-id=810-83966&m=dev
The rest of the UI changes look good
| }; | ||
| export const PrevNextButtons = ({ | ||
| onPrev, | ||
| onSave, | ||
| saveDisabled, | ||
| saveText, | ||
| className = '', |
There was a problem hiding this comment.
No, that doesn’t need to be there. Thanks for pointing it out.
There was a problem hiding this comment.
The next button needs to be larger, see design:
Good catch. That wasn't even directly mentioned in the issue! Changing this will also change the look of the buttons in the create project flow footer, but they should look the same as this ones anyway, so I'm going to go ahead an update it.
r41ph
force-pushed
the
fix-APP-588-buy-credits-style-issues-mobile
branch
from
4b38ac2 to
49b378f
Compare
|
This deploy preview is blank for me, in incognito mode as well: https://deploy-preview-2627--regen-marketplace.netlify.app/ |
r41ph
force-pushed
the
fix-APP-588-buy-credits-style-issues-mobile
branch
from
49b378f to
9896001
Compare
Try again please |
It is working now, thanks! |
|
Everything look much better, just one small thing: The space between the words "project", "avg price per credit", and "# credits" should all be the same (5px in comps). The space beneath the "# credits" line and the top of the "USD" symbol should also be the same (10px in comps). |
r41ph
force-pushed
the
fix-APP-588-buy-credits-style-issues-mobile
branch
from
9896001 to
789c3d6
Compare
I've adjusted the spacing between elements. The gap between #credits, the avg price, and the separator was larger because the input field on edit is taller than the content when the input is hidden. I checked the comps and maybe that's expected? Just noting that now there's a slight jump when the input appears. |
| className={classes.btn} | ||
| className={cn( | ||
| classes.btn, | ||
| '!py-[13px] sm:!py-[17px] !px-[30px] sm:!px-[43px] h-50 sm:h-60', |
There was a problem hiding this comment.
should we rework classes.btn (which has some padding defined that we overwrite here) or just remove it from this className and use tailwind classes entirely, instead of using !important here?
There was a problem hiding this comment.
Good idea. See updated code.
Sorry to be annoying, if you take off the margin top and bottom somehow from the horizontal line, I think that looks better |
Not at all! The horizontal line doesn’t have any top or bottom margin, I actually can't see the difference. Did you make any other changes that could have affected the layout? The horizontal line is wrapped by an element with a |
r41ph
force-pushed
the
fix-APP-588-buy-credits-style-issues-mobile
branch
from
789c3d6 to
1d9a341
Compare
This is all I did. Not saying that's how you should accompish this spacing this way, just that it looks better. Screen.Recording.2025-03-11.at.9.15.17.AM.mov |
Description
https://regennetwork.atlassian.net/browse/APP-588
Author Checklist
How to test
Reviewers Checklist
All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.
I have...