Improve layout of receive/sending lightning/sending on-chain screens

[myxmaster]

Description

This fixes #1484.

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (c-lightning-REST)
• Core Lightning (Spark)
• Eclair
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the Zeus Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[kaloudis]

not crazy about fixes that include adding negative margins

[myxmaster]

Improved this in latest commit.

[kaloudis]

What do these pages look like at higher resolution, say on a tablet?

[myxmaster]

I checked it on a 10" tablet and it didn't look good, so I fixed the size to make it look the same on all devices.

Tablet screenshots:

[kaloudis]

I don't think this is enough of an improvement. I'd like to do a refactor where the action buttons hang to the bottom of the screen and the logo and animations are scaled and spaced out depending on the size of the screen

[myxmaster]

I do like the idea, but then it would be inconsistent.

[kaloudis]

I do like the idea, but then it would be inconsistent.

Let's make it consistent then!

[myxmaster]

Reworked all screens to make them fill the whole screen without the need for scrolling (except long LNURL messages, here you can scroll inside the box) on all devices.

Checked with three devices always in this order:

1. 10" tablet
2. 6,7" phone
3. 5" phone

Because it's so many screenshots I did not create "before" versions.

Screenshots:

Lightning received:

Device 1:

Device 2:

Device 3:

Lightning sent successfully:

Device 1:

Device 2:

Device 3:

Lightning sent successfully (with LNURL success action):

Device 1:

Device 2:

Device 3:

Lightning sent with zaplocker in transit:

Device 1:

Device 2:

Device 3:

Sending lightning (while loading):

Device 1:

Device 2:

Device 3:

Sending lightning (error):

Device 1:

Device 2:

Device 3:

Sending lightning (in transit):

Device 1:

Device 2:

Device 3:

On-chain sent successfully:

Device 1:

Device 2:

Device 3:

Sending on-chain (loading):

Device 1:

Device 2:

Device 3:

Activity payment with LNURL success action:

Device 1:

Device 2:

Device 3:

[myxmaster]

Fixed merge conflicts and replaced old logo also in Receive screen.