gui: Refresh UI styles and sidebar/statusbar design

[cyrossignol]

This continues from #2096 to implement some more low-hanging fruit for the proposed GUI improvements (#847). I updated the styles for the basic UI components and redesigned the sidebar and status bar for the light and dark themes. This PR does not change the structure of the application's content.

This is a face-lift and not a replacement for work needed to properly re-implement the GUI with a tool more suitable for the full set of proposed improvements in #847 (preferably Qt Quick/QML), and I do not want to claim part of the attached bounty (#1401). I'm just tired of waiting for that work to finish and tired of the current GUI appearance. Gridcoin loses a degree of credibility with a UI that looks like it was created a decade or two ago.

Please read the commit descriptions for information about the changes. I pulled-in @opsinphark's switch to Inter's variable font from #1926 for the additional weights used in the new styles (and I can't shake the revulsion I feel toward the hinted appearance). I drew a new scraper icon design because the new assets don't include these resources. I also removed the "native" theme because we don't have new assets to properly support it yet on both light- and dark-mode desktops. I will rebuild it in the future if needed.

For the scope of the changes in this PR, I only updated a subset of the icons (mostly related to the toolbars) from the new assets. I will finish installing and cleaning up the rest of the application's icons in a subsequent PR.

Closes #1349. And should resolve at least part of #2073.

---

---

[jamescowens]

Need to fix the icon scaling...

[jamescowens]

I like the dark theme a lot. I am also happy we are eliminating the native theme. It is nothing but trouble. We should support only light and dark. The light theme seems out of balance to me. The purple is too dark on the left compared to the light on the right....

[cyrossignol]

@jamescowens I agree—the top menu bar breaks the visual flow which is a lot more noticeable on the light theme because of the different background color. I thought about moving the menu bar as in the following to improve the balance (and save a bit of space):

As far as colors go, we can't really lighten the toolbar without pushing the contrast ratio past the accessibility edge that it's already sitting on. Darkening the content changes the proposed design significantly which may cause problems if we need to use this as a base for any of the other changes in the future. I imagine that the colors will make more sense when the full redesign is finished. They look ok in the mock ups.

I'm taking a look at the icon scaling.

[RoboticMind]

Love the changes overall

Noticed something kind of minor, but the columns on the Home page should probably be the same height. Right now the addresses thing goes down further than the column with the beacon button.

[presciencia]

Wow it looks great! I can not wait! I tried to start this project also but it is very difficult but for you it is "low hanging fruit" lol :)

I think the menus look better moved to side layout also.

What if the dark mode is the default? It can make better branding for cool factor :)

I see left side bar BOINC logo in the link mock up. Is it missing?

[jamescowens]

I fixed the icon scaling originally in this PR...
#1911

[cyrossignol]

Yes. I started that way, but I tried to exploit the declarative features of the stylesheets to avoid all the extra logic bloat needed for the hover/active states that these have now. Unfortunately, Qt doesn't seem to render high-DPI background images consistently across different platforms, so I'm going to put it back to the way I had it before.

[cyrossignol]

What if the dark mode is the default? It can make better branding for cool factor :)

@presciencia I'm not opposed to that. I kind of like the idea of dark-by-default.

I see left side bar BOINC logo in the link mock up. Is it missing?

Whoops. Forgot about it... Thanks!

[jamescowens]

Yep. Unfortunately the style sheets are buggy. The convenience they provide is negated when they don't work properly across various DPI ranges/platforms.

[jamescowens]

@cyrossignol you might try messing with this again in bitcoin.cpp:242...

// Generate high-dpi pixmaps
QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);

#if QT_VERSION >= 0x050600 && !defined(WIN32)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

[jamescowens]

One other comment. I don't think we should be afraid of using green to indicate good status on some of the status icons at the bottom. The staking and scraper icons are grey when good, and yellow or red when bad. I think they should be green when good, consistent with the in sync icon.

[jamescowens]

I think the grey normal text in the light mode should be made a little darker. It looks "weak" to me.

[cyrossignol]

One other comment. I don't think we should be afraid of using green to indicate good status on some of the status icons at the bottom. The staking and scraper icons are grey when good, and yellow or red when bad. I think they should be green when good, consistent with the in sync icon.

I disagree. Colors in status indicators for a UI should be used to draw the user's attention, not as a decoration. Items in a nominal state don't need to be emphasized as such. For example, the scraper icon is probably irrelevant to 99% of the folks using the wallet until a problem occurs. I don't like the green "cloud" icon for the sync indicator from the new assets, and I suggest that we change it to a neutral tone. I think the designer meant to use green to convey the completion of a successful sync, but it's not helpful to color the icon after the initial download. The rainbow of icons in the old status bar made it hard to catch important information.

On a related note, I will update the supplied beacon icons to make the colors more obvious. Qt doesn't render the SVG filters in this set, so it's hard to notice color changes of the dot in the middle.

I think the grey normal text in the light mode should be made a little darker. It looks "weak" to me.

I agree here. I'll bump them down some more. This PR already darkens the colors more than they were in the original blueprint, but I don't like the result yet either.

[cyrossignol]

I think I fixed the high-DPI scaling issue for the sidebar icons. @jamescowens, could you please double check? 🙂

[jamescowens]

I get what you are saying about the icon color, and agree if you are being consistent with your thought, that the in sync icon should be grey if in sync, not green. There is only one problem. The network connection icon violates these principles and is always grey, and in a no connection setting the three radial bars are light grey... lighter than the dark grey when the connections are good. Not exactly attention getting for the situation where the connection count is low. That is precisely why the shorter bars in the old icon I made orange and then red...

[jamescowens]

I suppose by convention it is similar to what is on phones now.... I think the icon needs to change when there are no connections, much like on Windows.

[jamescowens]

The icon scaling is better...

[cyrossignol]

I get what you are saying about the icon color, and agree if you are being consistent with your thought, that the in sync icon should be grey if in sync, not green. There is only one problem. The network connection icon violates these principles and is always grey, and in a no connection setting the three radial bars are light grey... lighter than the dark grey when the connections are good. Not exactly attention getting for the situation where the connection count is low. That is precisely why the shorter bars in the old icon I made orange and then red...

Ah, you're right, I agree. The connections icon should change color for a no/low peer count. I'll give it a tweak. The sync icon does turn red already for "stalled" when the wallet has no connections.

I don't mean to sound heavy-handed about the icon colors. If people like green, we can swap those in. It's my personal taste to avoid the visual noise. I think @madmaxpayne did a great job with the proposed icon choices.

[cyrossignol]

Could also compromise and put some green as a flair. I think I prefer it without, though.

[nathanielcwm]

I think it would be nicer if the purple on the left column extended all the way to the bottom.

Additionally I personally don't like how rounded the buttons are (but it's possibly just because of how blown up they are in the images, prolly looks fine if it's in their actual sizes). I believe sharp corners fit better with other Windows programs.

I believe that not having the bottom area at all and integrating the icons into the blank areas above would look superior (unless you're planning to add polls and stuff to the bottom like in the mockup). Looks a lot better on Macs like the mockups tho.

[nathanielcwm]

I believe @ZigzagoonBalloon was also working on this independantly?

[ZigzagoonBalloon]

Yep! Though as I've explained uni started up again and is pretty much my main time commitment. Unfortunately it will probably remain this way until November when I graduate/summer break starts but I'll definitely come back to it then.
I'd estimate the QML part is ~60% done and then it has to be integrated into the wallet. You can build it and play with it yourself here, though obviously it's a WIP and there's lots I need to come back to.
https://github.com/ZiggySchulz/gridcoin-wallet-GUI-rewrite

Edit: To clarify I am working on the new GUI but it's completely new as Jim explains below

[jamescowens]

What @ZigzagoonBalloon is doing is different than this. It may look similar, but it uses QML, which is different Qt frontend than the traditional frontend that we are using. @cyrossignol is just making changes to the existing front end. As he said it is a stopgap.

[presciencia]

I think green icons for all is overkill/unecessary. It looks nice and clean in current screenshots. May be keep cloud and beacon icon green because they are most important for user to watch on. I think mock up is right in that case.

[jamescowens]

Looking pretty good...

[jamescowens]

Let's get the BOINC logo in there and then I think this is ready.

[nathanielcwm]

Looking at the qt documentation I think the removal of resetButton->setMaximumWidth(150); may be causing the button corners to be rounded.

But it mentions that values of less than 50 cause buttons to become sharp though...

[jamescowens]

The rounded buttons are consistent with the style guide in #847 that was approved by the community. I think they are fine as is.

[cyrossignol]

Sorry, forgot about it again. BOINC logo added. Default changed to dark mode.

[cyrossignol]

Looking at the qt documentation I think the removal of resetButton->setMaximumWidth(150); may be causing the button corners to be rounded.

@nathanielcwm They're rounded because the stylesheets define them as rounded to match the mock ups.

[div72]

Looks really nice, so good job. Although I think this does raise the question of what to do with the top menu as I don't think the mockups have that (unless I'm misremembering).

[ghost]

Looks really nice, so good job. Although I think this does raise the question of what to do with the top menu as I don't think the mockups have that (unless I'm misremembering).

Wasn't the mockups made looking like they ran on MacOS? Then the that menu will be in the menu bar top of the screen. That's not an option.

[cyrossignol]

@div72 The mock ups don't provide any guidance since the designs are based on macOS with its separate menu bar. We could use a mobile-style fly-out menu on Windows/Linux (think Firefox/Chrome mega menu). Not quite there though...

[jamescowens]

Let's leave the top menu as it is for now.

[jamescowens]

This is good enough to merge at this point based on my testing. I want to get it onto testnet so more people can play with it.