Improvements of Lease page with storybook components and tailwind style

[tedovn]

No description provided.

[kostovster]

The default value color in "Interest Due" should be white and only change color under specific circumstances. Please ping Alex to provide the logic.

[kostovster]

The "Opened On" field should be a non-changing date in the following format: MMM DD, YYYY (e.g., FEB 28, 2024)

[kostovster]

Both PnL and current token price need further styling for dark mode. The price needs to be styled as outlined in the design: token icon, 16px Garet Medium font, which reduces to 12px for all symbols after the decimal point

[kostovster]

Upon hovering over the line chart, the popup with historical time and price data is redundant. The behavior in this scenario should be as follows:

Upon hovering over the line chart, the token price in the upper right corner must change based on the historical point that is selected.

[kostovster]

Upon lease repayment, closure, or token collection, all buttons should be in a disabled state, meaning no other operation can be performed until the current one is finished.

The spinner should be visible on the last operation that the user selected. In dark mode, the disabled state for buttons should have the following styles: fill #142237, stroke #2B384B, text color #5E7699

[pKarlovska]

PnL (Profit & Loss) indicator does not toggle between USD and percentage

The PnL (Profit & Loss) indicator only switches to displaying the profit and loss amount in USD when the position is in profit. It does not toggle to showing the percentage of the total in the case of a loss.

[pKarlovska]

Incorrect Formatting of the Amount $X.xxxx

The amount should be presented on a single line, with the decimal numbers appearing on the same line as the main part of the number.

[pKarlovska]

Missing chart on mobile device and incorrect display of "Opened on" text and Health indicator

1. The chart is missing on the mobile device, leading to an incorrect representation of data.
2. The "Opened on" text and Health indicator are displayed incorrectly. They are not properly aligned and centered as per the design.

[pKarlovska]

Upon closing a lease:

1. The "Relay" button should be disabled.
2. "Debt" and "Due" should have a skeleton loader.

For reference screenshot from production

[kostovster]

When Pnl is clicked it should toggle between the dollar value and percentage

[pKarlovska]

Interest rate is not displayed as strike out

Example: BUY POSITION #aspgtzfd
The interest rate for the current position is not being displayed correctly as strikethrough, during the DeFi Summer promotion.

[tedovn]

Interest rate is not displayed as strike out

Example: BUY POSITION #aspgtzfd The interest rate for the current position is not being displayed correctly as strikethrough, during the DeFi Summer promotion.

@alexandermake

[tedovn]

Upon hovering over the line chart, the popup with historical time and price data is redundant. The behavior in this scenario should be as follows:

Upon hovering over the line chart, the token price in the upper right corner must change based on the historical point that is selected.

@alexandermake