fix: card push fee staking pool visual style #1933
Conversation
wolfcito
changed the title
src/blocks/button/Button.tsx
Outdated
| @@ -41,6 +41,7 @@ const StyledButton = styled.button<ButtonProps>` | |||
| justify-content: center; | |||
| white-space: nowrap; | |||
| flex-shrink: 0; | |||
| flex: 1; | |||
There was a problem hiding this comment.
We cannot add this here as this will affect Button Design which is used in other places.
There was a problem hiding this comment.
Instead of changing Button in design component. Change the Button here
In line no. 819
<Button
size="medium"
disabled={true}
block
>
Add this and then try.
There was a problem hiding this comment.
Hello @abhishek-01k
I reviewed the code again and noticed that, since block internally applies width: 100%, this behavior makes the button occupy the entire width of the container as a single element. However, in a flexbox container with multiple elements, this causes overflow, as each button tries to take 100% of the container's width.
For this reason, I believe the best options to address this problem are:
Op1: Using styled-components inline css:
css={css`flex: 1;`}Op2: Supporting the flex property (instead of my previous change flex: 1;,
${({ flex }) => flex && flex: ${flex};}Op3: Or creating a wrapper for the buttons, similar to the StakingToolTip component.
<StakingToolTip >
<Button />
<Button />
</StakingToolTip >Based on this, to keep the component reusable, maintain more precise control over the design, and preserve adaptability, I would personally suggest extending the component to support the flex property (Option 2).
Therefore, I would like to confirm which of these options you would prefer me to adopt.
There was a problem hiding this comment.
hey @wolfcito,
Yeah you are right about using block. It would create overflow issue.
I think right now go with Option 1 because we are still working on Design system components and we will extend the property of Button to support flex property as well. Thanks for pointing out the issue.
There was a problem hiding this comment.
hello @abhishek-01k , It's done!
I have made the adjustment to the Push and Uniswap cards.
There was a problem hiding this comment.
Hello @rohitmalhotra1420, I hope you'll have a chance to review it. 🙂
| css={css` | ||
| flex: 1; | ||
| `} |
There was a problem hiding this comment.
| css={css` | |
| flex: 1; | |
| `} | |
| <Box display="flex" width="-webkit-fill-available"> | |
| <Button | |
| variant="outline" | |
| size="medium" | |
| block | |
| > | |
| ... | |
| </Button> | |
| </Box> |
@wolfcito please follow this approach.
This can import Box component like this:
import { Box } from "blocks"
There was a problem hiding this comment.
Super cool @rohitmalhotra1420 , that component was exactly what was needed. I’ve made the adjustment so you can check it out
…owing Option 3 from Wolfcito's suggestions
Pull Request Template
Ticket Number
Description
The claim button on the "PUSH Fee Staking Pool" card wasn't displaying correctly. Additionally, the label for "Current APR" was misaligned, affecting the overall user interface and readability. This PR addresses these UI bugs and corrects the visual display of these components.
Type of Change
Checklist
Frontend Guidelines
Build & Testing
Screenshots/Video with Explanation
The claim button was not aligned properly, and the text for the "Current APR" was displayed vertically, making it hard to read and breaking the layout.
The claim button is now properly aligned and the label for "Current APR" is displayed horizontally with clear readability, improving the overall UI of the "PUSH Fee Staking Pool" card.
Additional Context
Review & Approvals
Notes