fix: refactor see 24 words screen

[lucachaco]

New screenshots:

The white button is temporal to enable navigation. It will be removed when the new footer is implemented

Old screenshot:

[jessgusclark]

The code looks good and thanks for leaving a note about the button being removed in the future. For the buttons and the styles a few comments:

1. column should be left aligned so that the numbers line up
2. the words need a borderRadius and need more padding (10 perhaps?)
3. more padding/margin at the top of the app before the heading
   • more padding/margin below the heading
4. make the overall font size a touch bigger for the numbers and words

[lucachaco]

1. Alligned to left.
2. It had a border radius. For some reason was not working for IOS. After researching a found as solutions.
3. Changed, but, unfortunately i cant give much more margin. Please remember you are using a design of 12 words instead of 24.
4. Changed, but I cant make it much bigger in order to fit in a small device like in the screenshot in android

[ilanolkies]

PR looks really good to me. I didn't run it yet, just few comments on the code.

On older commetns:

1. Agree
2. Great! Now that we are working strictly on UI, I would go through the PRs in both operating systems. If no solution is found, please mark it in the code and will see in further iterations. We need to focus on delivering both devices ok but it is not an easy work so we might need to re-iterate
3. and 4. "cant give much more margin" seems correct -- also, "make the overall font size a touch bigger" and "in order to fit in a small device": agree with both too. Let's keep this sizes and request better UI design increasing on accessibility

[ilanolkies]

Suggested change

	{rows.map((row, i) => (
	<View style={grid.row}>
	{rows.map((row, i) => {
	const columnWordIndex = [row, row + rows.length, row + rows.length * 2]
	return (
	<View style={grid.row}>

This will prevent rewriting word index calculation, then use columnWordIndex[0], columnWordIndex[1] and columnWordIndex[2]

[ilanolkies]

This, together with the other comment, will make code much cleaner and editable IMO

[lucachaco]

But is the same since i then would need to use row -1 to access the words array. I rather start from 0

[ilanolkies]

My comment was more like thinking on preventing writing row + rows.length * column twice. So calculating what goes in each column would be better.

wordNumber={thing + 1}
text={words[thing]}

Still, we can see it later no worries

[ilanolkies]

Now also thinking why we align things on rows and not in columns. We can use @jessgusclark 's grid system. See https://github.com/rsksmart/swallet/blob/ad4c79849437a25d951ad56489601603829abe9f/src/styles/grid.ts#L37-L40

[ilanolkies]

Opening a refactoring issue. No need to see all this now. It is pretty clear how it works

[ilanolkies]

Really nice job! Took time but it worth it

Addressed most of the things. We can loop back after new UI design is handed in