Project

General

Profile

Actions

Cleanup #35692

closed

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

Proposed background color

Added by Ernesto Puerta over 5 years ago. Updated about 3 years ago.

Status:
Won't Fix
Priority:
Normal
Assignee:
Category:
General
Target version:
% 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


Files

2018-09-05_14-20-33.png (16 KB) 2018-09-05_14-20-33.png Ricardo Marques, 09/05/2018 01:25 PM
2018-09-05_14-19-57.png (16.2 KB) 2018-09-05_14-19-57.png Ricardo Marques, 09/05/2018 01:31 PM
ceph_mast_pre_fix.png (87.9 KB) ceph_mast_pre_fix.png Ernesto Puerta, 09/05/2018 03:16 PM
Screen Shot 2018-09-05 at 11.35.25 AM.png (21.5 KB) Screen Shot 2018-09-05 at 11.35.25 AM.png #FCFCFC Michael Celedonia, 09/05/2018 03:37 PM
Screen Shot 2018-09-05 at 11.35.36 AM.png (24 KB) Screen Shot 2018-09-05 at 11.35.36 AM.png #F2F2F2 Michael Celedonia, 09/05/2018 03:37 PM
Screen Shot 2018-09-05 at 11.35.36 AM.png (24 KB) Screen Shot 2018-09-05 at 11.35.36 AM.png Michael Celedonia, 09/05/2018 03:55 PM

Related issues 3 (1 open2 closed)

Related to Dashboard - Feature #37981: mgr/dashboard: Improve dashboard usability for visually impaired usersNewanurag bandhu

Actions
Copied from Dashboard - Cleanup #35691: mgr/dashboard: Proposed Landing PageResolvedAlfonso Martínez

Actions
Copied to Dashboard - Cleanup #35693: Proposed About modal boxResolvedNgwa Sedrick Meh

Actions
Actions #1

Updated by Ernesto Puerta over 5 years ago

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

Updated by Ernesto Puerta over 5 years ago

Updated by Ricardo Marques over 5 years 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`:

Actions #4

Updated by Volker Theile over 5 years ago

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

Actions #5

Updated by Ricardo Marques over 5 years ago

Any other color works for me.

Actions #6

Updated by Ernesto Puerta over 5 years ago

Actions #7

Updated by Ernesto Puerta over 5 years ago

  • File deleted (gray_background.png)

Updated by Michael Celedonia over 5 years 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.

Actions #9

Updated by Michael Celedonia over 5 years 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

Actions #10

Updated by Ricardo Marques over 5 years 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 :)

Actions #11

Updated by Ju Lim over 5 years ago

+1 on #FCFCFC.

Actions #12

Updated by Lenz Grimmer over 5 years ago

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

Updated by Neha . over 5 years ago

  • Assignee set to Neha .
Actions #14

Updated by Neha . over 5 years ago

  • Status changed from New to In Progress
Actions #15

Updated by Neha . over 5 years ago

  • Status changed from In Progress to Fix Under Review
Actions #16

Updated by Yaniv Kaul about 5 years ago

Are the color compliant with any standard that'll help users with color blindness?
See https://usabilla.com/blog/how-to-design-for-color-blindness/

Actions #17

Updated by Lenz Grimmer about 5 years ago

Yaniv Kaul wrote:

Are the color compliant with any standard that'll help users with color blindness?
See https://usabilla.com/blog/how-to-design-for-color-blindness/

Please see the comments in #35691 for a discussion about this topic - I'll look into submitting a dedicated tracker issue to keep this on our radar.

Actions #18

Updated by Lenz Grimmer about 5 years ago

Lenz Grimmer wrote:

Please see the comments in #35691 for a discussion about this topic - I'll look into submitting a dedicated tracker issue to keep this on our radar.

FYI, I now created #37981 to address this.

Actions #19

Updated by Lenz Grimmer about 5 years ago

  • Related to Feature #37981: mgr/dashboard: Improve dashboard usability for visually impaired users added
Actions #20

Updated by Ricardo Marques about 5 years ago

  • Status changed from Fix Under Review to Won't Fix
Actions #21

Updated by Ricardo Marques about 5 years ago

  • Pull request ID set to 25831
Actions

Also available in: Atom PDF