Make Collection view layout for New DApps

[vikmeup]

Look at https://rarebits.io/

[NickWatsonMan]

I have examined rarebits.io, and here is one issue. The number of symbols in descriptions vary widely. So some of cards look like this:

In order to keep all the description inside the card I had to increase the height of the box, so it's a bit higher (197x272) than on rarebits (204x262).

Also, I'm still working on the card borders design.

[vikmeup]

@NickWatsonMan images should be rounded I think, all our logos has been stored that way.

I would make it simpler and do description only in two lines or so?

Make shadow smaller

[lovincyrus]

How's the new layout going, @NickWatsonMan ? I can take a look if you push your code to a branch.

[NickWatsonMan]

@lovincyrus I pushed to toplayout branch. Can you check this out?

[lovincyrus]

@NickWatsonMan Cool! Just refactored the code to this branch - https://github.com/TrustWallet/dapps-browser/tree/collection-view

[lovincyrus]

Fixed collection view layout: https://github.com/TrustWallet/dapps-browser/commit/fb8762c88b2dbe3b510bfb9661aebfac11fd68c3

@vikmeup let me know what you think.

[vikmeup]

@lovincyrus how does it look on mobile?

[lovincyrus]

Tested on multiple devices, can be seen here:

https://www.useloom.com/share/3173612cc9324deda40b680fa76d1a29

[NickWatsonMan]

@lovincyrus @vikmeup looks good. But maybe add some space to the bottom? Between the last text line and the end of the card? What do u think?

[lovincyrus]

Good idea, fixed - https://github.com/TrustWallet/dapps-browser/commit/076538b5cf7e4717c8c34644ef207c4e279e21ac

Added more space and with even spacing between title and description.

[vikmeup]

@lovincyrus can you show full screen?

[lovincyrus]

Web:

Mobile - iPhone X:

[vikmeup]

@lovincyrus this looks good! we need to have higher quality picture for those tho!

can you create PR?

[lovincyrus]

Definitely, @vikmeup

I can always change the card size based on the quality of the logos.