Improve UI styling

[Cygnusfear]

https://github.com/Cygnusfear/subdomain-registrar

I did a first update to the UI styling; any feedback would be appreciated.

• Hardcore minimalism, user focus
• Clear descriptive/explanatory language towards the user
• Public Key of the active account clearly shown to the user (might move this to the top bar)
• Show search results in a broad overview
• Remove coloring (green/red means good or bad, not available or unavailable)
• Styling so the subdomain is prominent and legible (text direction right to left)

Todo:

• Search bar moves to static top bar when scrolling results
• Show subdomains already registered by the active account (allowing for setting up reverse registration later: https://github.com/ensdomains/subdomain-registrar/issues/17)
• A notification system will help (similar to NameBazaar).
• The registration modal needs a button for cancel / agree.
• Add this information to modal: https://github.com/ensdomains/subdomain-registrar/issues/22
• Add checkbox to modals for reverse registration (default to checked): https://github.com/ensdomains/subdomain-registrar/issues/17
• Add submissions for domain names to footer: https://github.com/ensdomains/subdomain-registrar/issues/12
• Add Top Results and Alphabetical sorting along with a solution to the following issue: https://github.com/ensdomains/subdomain-registrar/issues/10

[Arachnid]

This looks fantastic! Feel free to send me a PR whenever you think it's ready. A few minor comments:

• It should really say "Turn your address 0x..." instead of "Turn your public key 0x..."
• If it can't load accounts from web3, it says "Turn your public key undefined..."
• I really like the new listing view, but I still think it would be a better UX to move the unavailable names to the end of the list.

[Cygnusfear]

Awesome, thanks!

It should really say "Turn your address 0x..." instead of "Turn your public key 0x..."

I see, I didn't know it was only the last 20 bytes of a hash of the public key. The idea was to add a bit of inline education, looks like the joke is on me B)

If it can't load accounts from web3, it says "Turn your public key undefined..."

I have this fixed in an upcoming commit

I really like the new listing view, but I still think it would be a better UX to move the unavailable names to the end of the list.

I had the list sorted alphabetically but JQuery unbinds the .click event, so this kind of slipped through the cracks along with sorting

So currently the code is messy. Ideally I imagine a node package that contains all the ENS now functions (including reverse lookup, which is necessary for showing the user the currently owned domain names) and doing the layout in react. The package could be adopted by wallet providers or they could redirect to ENS now for users to optionally register an easy name for their address.

I suggest this as I am interested in further promoting ENS (now and regular) adoption, both from the perspective of security and metadata (currently Etherscan has a lot of metadata that is inaccessible and centralized).

[Arachnid]

Yes, that sounds like a good idea. I should add that there is a major rewrite by @jefflau currently in the planning stages that aims to merge now.ens.domains, registrar.ens.domains and manager.ens.domains into a single app.

With that in mind, an NPM module would likely be very useful, but extensive UI work may end up being wasted (but your work so far looks great, and I'd love to see it replace the current interface in the interim).