Customize Qubes theme consistent with client styles

[ninavizz]

Epic: UX Parity between prototypes & coded client (Client Issue #261)

This Story:
Customize Qubes theme consistent with client styles

• Re-style VM window chromes in Workstation Qubes theme, so windows match the style determined in VisDe direction.
• Colors for other VMs TBD.
• NOTE: Whomever undertakes the styling execution stuff, pls ping me (Nina) to get an invite to the Zeplin project (that shows CSS attributes, pixel-perfect measurements, etc.) It does not have a "public/open" view on that stuff, which is lame. But, I'm happy to invite one and all to its party of awesome!

---

Reference:

---

Details, This Story:

• Window header-bar font
  font-family: Montserrat; font-size: 13px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 0.3px; color: #333aa5;
• Window Chrome
  box-shadow: 1px 1px 4px 0 #082b54; background-image: linear-gradient(to bottom, #ffffff, #ffffff 19%, #bdd4ed 52%, #064682
  • Omit SD box logo from window header bar
  • Left-align text in window header bar
  • Nix strange control-thingy in top-left of windo header bar
  • Sides + Bottom: 4px fill, 0px inner stroke, 0px outer stroke
  • Top: 20px fill, 1px inner stroke, 1px outer stroke
  • Corners: Square, pls. anything rounded will prompt the designer to grab her smelling-salts
• Spec icons style
  • Icons in window's top-right, #333aa5
  • See chat in SD-UX 16 thread wrt XFCE theming... do y'all want bespoke art for the window icons, or me to spec an XFCE theme?

2020-09-11- Updated for clarity @eloquence

[eloquence]

As discussed, this is out of scope for the current (3/6-3/20) sprint; we can default border color changes relatively easily within a future sprint, XFCE theming changes beyond that may not make it for the beta, but we can revisit as we get closer to having all core functionality built.

[ninavizz]

FYI, below PNGs are to compare the existing window styling (Red), and the recommended styling (white/blue gradient). Reiterating: the white/blue gradient is thus far the recommended colorway for the Workstation VM, and other VM-type colorways are TBD as of the writing of this Issue.

Key differences in recco updates:

• Kill rounded-corners
• Kill odd/unfamiliar top bar controls/icons
  • far-left control/icon
  • 4th far-right top-bar control/icon (shd only be dock, full, and close)
• Cleaner upper-right window icons w/o backgrounds
  • Window control icons should sit atop bar color; existing transparency effect is odd & likely to feel "disabled" to users
• Kill top-bar gradient
  • ...designer shudders extra hard at the prospect of this detail making it into production.
• VM name, font/color, dropshadow & left-alignment in window
• Thinner window sides & bottom
• Slightly shorter window top-bar
• No outer or inner stroke on pane
• Window dropshadow onto desktop

[ninavizz]

Signal-boost: should this be moved to the Workstation repo, or remain in the Client repo?

[eloquence]

This should indeed be in the workstation repo now that the visual design specification is close to final. That said, as I noted above, it's very unlikely we'll be able to work on the Xfce theme anytime soon beyond simply changing the default window color.

It's a good issue to have on the long-term backlog, though! I'll ask @conorsch to port it over (that requires GitHub level perms I don't have).

[ninavizz]

@eloquence Awesome!

Ya, per the comment above... my priorities (in order) for window styling, are below. If we could get 1 & 2 in for Beta, I'll be delighted. #3, I'll sleep well at night. 4-6, Kushal gets cupcakes sent to his family in India. 7-8, EVERYONE gets cupcakes sent to them!

With the window color changed for the VM, though, the font color change & shadow removal will have to happen for the [SD-Workstation] VM window's legibility. I'm ok doing those separate, from the left alignment and icon removal.

[SD Workstation] VM Specific

1. Getting the spec'd gradient on the window as the Workstation VM's "color"
   1a. With the Title bar becoming white, the text on the Workstation VM windows will need to darken—and that icky dropshadow go away.
   1b. Spec'ing subsequent VM template colors (those colors TBD—yet to determine final suite of VMs & same-VM/many-window configurations that users are likely to interact with, anyway)

All VM Windows
2. Nixing the strange 4th button on the upper-left of the window
3. Thinning the window side and bottom edges, and eliminating inner and outer stroke styling
4. Nixing the rounded corners
5. Nixing the SD cube in the window title bar
6. Setting the font styles (font-family, font-weight, font-size, character-spacing, dropshadow) for the window title & left-aligning it
6a. The Workstation VM will need to have a white title bar font color, but all others will likely remain white on a darker window color background. If this is possible. If problematic, pls to ping! :)
7. Setting a different XFCE theme for the window bar icons
8. Further customizing XFCE theme to make window bar icons EXACTLY as spec'd.

[zenmonkeykstop]

Closing for now. Changing the Qubes theme is a bit out of scope given current priorities.