Project

General

Profile

Cleanup #35692

Cleanup #35688: mgr/dashboard: Community branding & styling recommendations

Proposed background color

Added by Ernesto Puerta 3 months ago. Updated about 2 months ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
dashboard/general
Target version:
Start date:
09/05/2018
Due date:
% Done:

0%

Tags:
UI, low-hanging-fruit
Backport:
Reviewed:
Affected Versions:
Pull request ID:

Description

  • Example of how one of the other pages will look with the new background brand gray (#F5F5F5)
  • All other pages would need to be updated with the same background brand gray (#F5F5F5) for consistent look and feel

2018-09-05_14-20-33.png View (16 KB) Ricardo Marques, 09/05/2018 01:25 PM

2018-09-05_14-19-57.png View (16.2 KB) Ricardo Marques, 09/05/2018 01:31 PM

ceph_mast_pre_fix.png View (87.9 KB) Ernesto Puerta, 09/05/2018 03:16 PM

Screen Shot 2018-09-05 at 11.35.25 AM.png View - #FCFCFC (21.5 KB) Michael Celedonia, 09/05/2018 03:37 PM

Screen Shot 2018-09-05 at 11.35.36 AM.png View - #F2F2F2 (24 KB) Michael Celedonia, 09/05/2018 03:37 PM

Screen Shot 2018-09-05 at 11.35.36 AM.png View (24 KB) Michael Celedonia, 09/05/2018 03:55 PM


Related issues

Copied from mgr - Cleanup #35691: mgr/dashboard: Proposed Landing Page Resolved 09/05/2018
Copied to mgr - Cleanup #35693: Proposed About modal box Need Review 09/05/2018

History

#1 Updated by Ernesto Puerta 3 months ago

  • File gray_background.png added
  • Copied from Cleanup #35691: mgr/dashboard: Proposed Landing Page added

#2 Updated by Ernesto Puerta 3 months ago

#3 Updated by Ricardo Marques 3 months ago

`#F5F5F5` color is currently used on panel headers, table headers, etc..:

After changing the background color to `#F5F5F5`, shouldn't we consider choosing a different color for panel headers, table headers, etc..?

For instance, `#F2F6F8`:

#4 Updated by Volker Theile 3 months ago

Please don't use #F2F6F8, it gives the UI an ExtJS default theme look.

#5 Updated by Ricardo Marques 3 months ago

Any other color works for me.

#6 Updated by Ernesto Puerta 3 months ago

#7 Updated by Ernesto Puerta 3 months ago

  • File deleted (gray_background.png)

#8 Updated by Michael Celedonia 3 months ago

I will propose a color between #F5F5F5 and #FFFFFF, it's a subtle off-white but it still makes a difference, #FCFCFC. The other option is to go a shade darker than the BG, which I would recommend against as it provides less context for the label text above and feels to compete more with the background visually. But if you prefer that option, I could recommend #F2F2F2.

Screenshots of each below, try it in the browser as well if possible.

#9 Updated by Michael Celedonia 3 months ago

Michael Celedonia wrote:

I will propose a color between #F5F5F5 and #FFFFFF, it's a subtle off-white but it still makes a difference, #FCFCFC. The other option is to go a shade darker than the BG, which I would recommend against as it provides less context for the label text above and feels to compete more with the background visually. But if you prefer that option, I could recommend #F2F2F2.

Screenshots of each below, try it in the browser as well if possible.

#FCFCFC

#F2F2F2

#10 Updated by Ricardo Marques 3 months ago

Michael Celedonia wrote:

I will propose a color between #F5F5F5 and #FFFFFF, it's a subtle off-white but it still makes a difference, #FCFCFC. The other option is to go a shade darker than the BG, which I would recommend against as it provides less context for the label text above and feels to compete more with the background visually. But if you prefer that option, I could recommend #F2F2F2.

Screenshots of each below, try it in the browser as well if possible.

`FCFCFC` looks great, thanks :)

#11 Updated by Ju Lim 3 months ago

+1 on #FCFCFC.

#12 Updated by Lenz Grimmer about 2 months ago

  • Target version set to v14.0.0
  • Tags changed from UI to UI, low-hanging-fruit

Also available in: Atom PDF