gui: Refresh overview page design

[cyrossignol]

This is a set of lightweight changes that update the appearance of the GUI overview page to match the designs in #847. Please see below and read the commit descriptions for details.

I applied spacing more conservatively than shown in the mock-ups because we received reports that the wallet's main window appears too large for some displays. I also did not add any new features from the proposed designs—we can save these for the full redesign in the future:

• Icons and a popover-type widget for displaying section help tooltips
• A longer list of the current active polls
• A balance label in the header that displays the value in fiat

I'm not sure whether the last one even belongs in the wallet, but several people have asked for it.

---

---

The proposed designs were created for macOS which displays an application's main menus in a separate menu bar at the top of the screen, and no guidance exists for menus on other platforms. An in-window menu bar looks goofy on Windows and Linux so I collapsed it into an "app menu" button:

---

I moved the beacon button to the "researcher" section header as an icon and display the "action needed" label as a badge. The "out of sync" labels also display as badges now:

[RoboticMind]

Overall it look so much better. Have a couple of suggestions:

• With the indicator icons moved, I noticed that I was able to miss that the wallet was not staking. Perhaps the status message could be moved to be more visible so that's less of an issue?

  • Maybe could go up somewhere in the whitespace between Account Overview and the balance?
  • If possible maybe could put yellow around it on warnings and red on errors?

• I didn't notice the hamburger menu was there until you mentioned it. The hamburger menu's position makes it fairly easy to miss.

  • Maybe could left/right align the logo and put it on the other side to make it more noticeable?
  • Maybe could put it on the right hand side next to the balance instead?

Overall it's looking pretty good

[jamescowens]

Here is how it looks on my Linux for dark. I think the contrast between the deeper black of the sections and the gray-black of the background is too low, and the first impression is of too many horizontal lines (because the eye does not resolve the difference between background and the deeper black). I think the light mode looks really good now.

[jamescowens]

I do not believe we should offer a currency conversion to fiat, even though people have asked for it.

[jamescowens]

Ah I just noticed on the above that the bottom edges of the boxes don't align...

[cyrossignol]

With the indicator icons moved, I noticed that I was able to miss that the wallet was not staking. Perhaps the status message could be moved to be more visible so that's less of an issue?

@RoboticMind I was a bit worried about this too, but I noticed that it didn't take long to adjust to the new layout. The status bar is empty when everything is "ok", so the presence of the warning text stands out. I've become so keenly aware of the status bar icons that any flash of red in the corner triggers a mild case of anxiety 🙂

Perhaps we could add a "wallet locked" or "not staking" badge to the "staking" section header like the "action needed" badge in the researcher header.

I didn't notice the hamburger menu was there until you mentioned it. The hamburger menu's position makes it fairly easy to miss.

I did try a few variations on this. Most of the alternative layouts looked pretty bad. One option that I'm still considering: we could make the entire Gridcoin logo a merged, hamburger-styled menu button. Haven't had time to draw it yet for a proof-of-concept. I don't think it's a big priority right now. The menu button is subtle, but I found that my eyes naturally jump to the top-left corner when I want to open something in the menu. Because most people are conditioned for this too, and many are familiar with hamburgers these days, I don't think the menu will be trouble to find. We can do something fancier for the full redesign later.

[cyrossignol]

I think the contrast between the deeper black of the sections and the gray-black of the background is too low, and the first impression is of too many horizontal lines (because the eye does not resolve the difference between background and the deeper black). I think the light mode looks really good now.

@jamescowens Weird. Looks like the background is rendered as #15202f on your machine and #1a2632 on mine, and the section cards are similarly darker (#111724 vs. #171e28), so the horizontal highlights are emphasized. I wonder... is your compositor performing dynamic color adjustment? Some have a "vibrant" or similar mode. I will try to tone-down the lines.

Ah I just noticed on the above that the bottom edges of the boxes don't align...

They should line up at the minimum window height. I can make the cards or the spacing stretch so that the bottom edges line up for every height, but it will look strange with all of that negative space.

[jamescowens]

This is kde 5.18.6 with compositing enabled using OpenGL 3.1. Nothing unusual.

[jamescowens]

Gamma is set to the default value.

[RoboticMind]

I was a bit worried about this too, but I noticed that it didn't take long to adjust to the new layout

My concern would also be that new users might miss that too. That would be especially important since they might not know that some of these things could be an issue. That's why I think adding a badge for all status messages with errors/warnings would be a good idea since it would cover it all (if it can be easily done in code). We could put it down there at the bottom like it is normally if there's not an error so it doesn't take any extra room when things are fine

found that my eyes naturally jump to the top-left corner when I want to open something in the menu

Unfortunately I don't find my eyes drawn to that position when looking for a menu. It find myself looking to the right hand side because the logo is in the space I would look on the left. I think that's partly because the hamburger menu is fairly high up

Maybe another thing we could do is put some bordering around the hamburger menu button? That might make it stand out a bit more

[RoboticMind]

Ran this locally and see #1a2632 for my background color like cycy, but I see #171e28 on the selection card. Running on Ubuntu 20.10 on X11 on GNOME 3.38.3 and haven't messed with any color calibrations settings as far as I know

One other thing I did notice is I see some minor (aliasing? banding?) artifacts around the curves of staking only badge thing. Looks like it's there on other screenshots as well. This is pretty minor, but if there's a easy fix for it, it might be worth doing

[cyrossignol]

That's why I think adding a badge for all status messages with errors/warnings would be a good idea since it would cover it all (if it can be easily done in code).

I'll see if I can improve indicators for staking and status messages. Showing full error messages may not be feasible in some parts of the layout.

found that my eyes naturally jump to the top-left corner when I want to open something in the menu

Unfortunately I don't find my eyes drawn to that position when looking for a menu. It find myself looking to the right hand side because the logo is in the space I would look on the left.

Unfortunately, we're mostly limited to the sidebar for the menu button unless we do some significant plumbing to inject it into the content frames, and I don't think that's worth the effort for this PR. If we don't agree that the menu button is accessible, we'll have to put the menu bar back, and I'd rather avoid that for appearance and for size constraint portability. Suggestions welcome, though.

It's worth noting that the menu could be a temporary element since the mock ups suggest that some of the features found in the menu will likely be implemented as content pages accessible from other areas of the UI. An ultimate goal would be to implement a modern frame-less design which gives us more flexibility to organize and style top-level controls in the title bar (think: "quick pay", BOINC quick controls, wallet chooser (for multi-wallet support—hardware wallets), other menus, etc.). The menu button could fit in naturally here... something like:

...but this is not in the scope of this PR, or even any of the changes that I'm working on, really.

Ran this locally and see #1a2632 for my background color like cycy, but I see #171e28 on the selection card.

Those are the same colors that I see.

One other thing I did notice is I see some minor (aliasing? banding?) artifacts around the curves of staking only badge thing.

I'll try to find a way to smooth it out. Qt doesn't seem to paint thin, curved lines very well at standard-DPI. It will probably end up as a choice between sharpness with some aliasing or smoothness with blurry sections of horizontal lines.

[jamescowens]

I think you just need to make the hamburger more obvious... let's don't overcomplicate it.

[RoboticMind]

One thing we could also potentially do is add a light border to the menu button like this:

That's just a one/two line change with border: 1px solid #8c9298;

I think adding that helps makes it fit in other locations a bit better too, so can maybe help give some more options

Those are the same colors that I see.

Ah sorry must of misread then. Not sure why Jim sees something different 🤷

[jamescowens]

I think it needs to be more than just a gray box around it. Use color - use a different background that draws your attention to it. For dark mode, I would use the same blue background as the buttons, likewise with the light mode.

[jamescowens]

I would also move all of the icons down slightly on the left because they look like they and the hamburger are crowding.

[presciencia]

Oh my frame less title looks very good! When...soon? Lol 😍

I don not think current menu button is a problem. As this button is located at the same position like all the mobile/web apps that I have so I see it first. From screens it looks bad with borders and background. I like it quiet like that in original.

[cyrossignol]

I added a light/dark mode toggle button to the layout container for the menu button and logo. The extra button should give this section a sense of utility as a whole which helps to highlight the role of the menu icon as a control for those that may miss it. The toggle button also provides symmetry needed to move the menu button into a more obvious position without looking unbalanced. This should solve the usability concerns for the menu button without over-emphasizing the appearance, and we get a useful feature in the theme switcher.

One other thing I did notice is I see some minor (aliasing? banding?) artifacts around the curves of staking only badge thing.

I'll try to find a way to smooth it out. Qt doesn't seem to paint thin, curved lines very well at standard-DPI.

@RoboticMind After playing with this, it seems Qt rounds to the pixel by default, so we get limited sub-pixel rendering. We can configure Qt to do more advanced antialiasing for that widget, but it requires painting the widget manually and a lot of boilerplate. I don't think it's worth it for a border.

I would also move all of the icons down slightly on the left because they look like they and the hamburger are crowding.

@jamescowens I'll do a pass to polish the styles once everything is in place. I have a running list of minor color tweaks, layout adjustments, and rendering bugs. Don't want to enlarge the scope of this PR too much.

Oh my frame less title looks very good! When...soon? Lol 😍

@presciencia Thanks. The title bar concept design is not in the scope of the current UI changes. It was just a quick example. Maybe in the future... 🙂

[cyrossignol]

I think the contrast between the deeper black of the sections and the gray-black of the background is too low, and the first impression is of too many horizontal lines

@jamescowens I reduced the contrast for the horizontal rulers.

That's why I think adding a badge for all status messages with errors/warnings would be a good idea since it would cover it all (if it can be easily done in code).

@RoboticMind I will expand on this in a separate PR after I rebase my branch that cleans up the old GlobalStatusStruct used by the GUI. The current mess is too much to deal with in this PR.

[jamescowens]

Looks good. Yes. I did a little cleanup on the GlobalStatusStruct myself a while back, but it really needs a complete overhaul.

[jamescowens]

This looks good enough to merge for me. Time to remove the draft moniker.

[jamescowens]

ACK. This is an excellent bridge between the existing GUI and the GUI rewrite. We need to get this to testnet so a broader audience can use it.