[redesign][ln] Send tab

[bgptr]

Toward issue #3296

This diff updates only the header and the send form. I did not touch the history lists (Ongoing payments, Failed payments, Latest payments) since the design doesn't contain them.
update: @MariaPleshkova has added the list to the Figma designs, and this diff implements it.

Updated screenshots:

[matheusd]

I feel you need to show more info about the decoded payment request. At the very least, you need to show the payment hash, description and the expiry.

Showing the extended details (ctlv expiry, fallback onchain address, etc) could be added in an expanded view.

It would probably be helpful to have the destination node use the copyable component as well.

You should also block attempting to pay for expired invoices (while the node will ultimately reject the payment attempt, it's better to also do it in the earliest stage possible, with feedback to the user of what's going on).

[bgptr]

Thanks, @matheusd. I've added the suggested details and blocked attempting to pay for expired invoices.
Screenshots are updated. @MariaPleshkova, take a look at them if you'll have time, please.

[matheusd]

Looking good! Only two additional nits.

[bgptr]

@matheusd, thanks. I've pushed the changes.

[MariaPleshkova]

@bgptr generally looks good, but a few small tweaks from my side:

1. Changed "Expiry" title to the "Expiration Time" as we already use it this way.
2. Added a vertical stroke between "Amount-Destination" area and "Expiration Time".
3. "Description" and "Payment Hash" areas have to be visually similar to another info areas within this section (expiration time, destination, etc.). I mean that the titles should be located above their description text, not to the left from it.

[MariaPleshkova]

@bgptr and check the spacings within Lightning Payment Request Code, please. They should be 10px from all sides:

[MariaPleshkova]

And one more thing: let's show success and error states in a bit different way.
You used orange and green icons(with an exclamation mark and a tick) on your screenshots, but we don't use them on the layouts in Figma for these fields.

Instead we change the color of a field stroke to green and add a green description under it for success states, and change the stroke color+an entered text to orange and add an orange description under it as well for error states.

[bgptr]

@MariaPleshkova, thanks for the review. I've implemented your suggestions and updated the screenshots.

[matheusd]

Final typo, but otherwise LGTM.