Some minor UI fixes for the exchange

Dennis · September 17, 2019, 9:53pm

I know that this is still an MVP, but as a developer myself I would like to help you a bit. Might be that you already noticed this small UI problems, but I would like to show them anyway. This are minor UI details, but if something like this could be fixed that would have a total different look and a better experience for users.

First of all lets start with the message, that we have to use Google Chrome. I know most users use Chrome as their standard browser. But I still think that Firefox and Edge are Important to have at least a great UI.

I found some changes in the header that could be fixed.

Second bar under the header (Volume bar)
You are using a high z-index on the second bar, when your screen height is small you are able to scroll down. But because the z-index of the second bar is higher than the top bar (who is fixed and stays on his position when you are scrolling) you will notice that the second bar is going over the first bar, what not should happen. It should be the other way around. The second bar should be under the first bar.

Change the following code
z-index: 201; to z-index: 1; or remove the entire z-index on the second bar.

Fix for Chrome, Edge and Firefox

Screenshots:
Problem: https://imgur.com/a/Xcu13Em
Fix: https://imgur.com/a/4h4S43w

Second bar scrollbar (Volume bar)
On chrome it looks perfect but on Firefox and Edge you will notice there is a big scrollbar. While you can’t even scroll on a desktop version.

Change the following code
To fix this, change the overflow-x: scroll; to overflow-x: auto; You will notice that on a large screen size you won’t see the scrollbar anymore, but you will see the scrollbar when you screen is smaller (mobile version)

Fix for Edge and Firefox

Screenshots:
Problem: https://imgur.com/a/ziSiyFU
Fix: https://imgur.com/a/MRtldqg

Arrow after sign in not centered
The arrow after sign in isn’t centered when you aren’t logged in. This has to do with the SVG that has a padding-left: 8px;. Best to remove that when someone isn’t logged in or change the padding to padding: 0 4px;

Fix Chrome, Firefox and Edge

Screenshots:
Problem: https://imgur.com/a/0YseKVB
Fix: https://imgur.com/a/sbd1aAd

Hope this helps a bit.

Dennis.

timothy · September 18, 2019, 12:18am

This is indeed helpful. There’s definitely a lot of small things like this that have slipped through the cracks. Very appreciated – thank you!

bunder · September 18, 2019, 6:49am

Thanks Dennis!

Hatertots · September 18, 2019, 6:50am

Just going to piggyback here, error on dark mode referrals the green box is outside the ticket.

ImanvdMaas · September 18, 2019, 9:32am

Hey Timothy,

A couple of people still experience the bug where some 0’s are not shown.
0’s do not show on my Windows desktop but it works on my Macbook.
Not sure how many people experience this but I think this is a very important one to fix.

Trust_Yourselves · September 18, 2019, 8:48pm

its amazing to see your effort. I plan on giving a full review when the fiat gateways open to Europe.

Dennis · October 27, 2019, 9:08am

@timothy I have found another thing.

Most buttons, like the Send/Receive - Trade etc, have to much space on the bottom. See screenshot. But with a simple fix of line-height: 1; will fix this. It’s a minor thing but it will look way cleaner when it’s centered.

Before:

After: