fix: card push fee staking pool visual style

[wolfcito]

Pull Request Template

Ticket Number

• Ticket Number

Description

• Problem/Feature:
  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

• Bug fix
• New feature
• Code refactor
• Documentation update
• Other (please describe):

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before:
  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.

• After:
  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

• These changes are part of UI fixes for the staking section of the dashboard, focusing on improving clarity and user experience.

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

• This PR includes fixes only for UI issues observed on the "PUSH Fee Staking Pool" card.

[abhishek-01k]

We cannot add this here as this will affect Button Design which is used in other places.

[abhishek-01k]

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.

[wolfcito]

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.

[abhishek-01k]

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.

[wolfcito]

hello @abhishek-01k , It's done!

I have made the adjustment to the Push and Uniswap cards.

[wolfcito]

Hello @rohitmalhotra1420, I hope you'll have a chance to review it. 🙂