Channel details: smaller line spacing

[myxmaster]

Description

• There is a lot of information in channel details, so I made a compact mode for KeyValue component.
• Added a missing divider between "Commitment Type" and "Channel balance" headline.
• Added space between capacity/reserve indicator and label

Before:

After:

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):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• LndHub
• [DEPRECATED] Core Lightning (c-lightning-REST)
• [DEPRECATED] Core Lightning (Spark)
• [DEPRECATED] Eclair

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

[shubhamkmr04]

the compact design looks very congested in my opinion

[myxmaster]

I guess we are just used to the other design. Having to scroll so much in that long list is not exactly a good UX on the phone.
But we can easily increase padding for compact mode from 5 to 6 in KeyValue.tsx if that is what you like better:

paddingTop: compact ? 5 : 10,
paddingBottom: compact ? 5 : 10

[kaloudis]

Not sure I like the compact mode. The other changes though are definitely improvements.

Need to compare new indicator spacing on iOS as it was already spaced correctly on that system

[myxmaster]

Maybe with padding 7?

For me the original line spacing looks irritating huge :D

[kaloudis]

I put the divider and indicator spacing changes in a commit here: 1011e56

Need to give some thought to the compacted feature. I think my main aspersion is having different styles on different views.

In the meantime, please rebase.

[myxmaster]

I think my main aspersion is having different styles on different views.

Yeah, I thought so too, but then again we don't have any other view with that much information, so I thought it makes sense to save some space. But it's not important :)