Cleanup #35692: Proposed background color - Dashboard - Ceph

Custom queries

Backports
Backports: nautilus
Bug queue
Bug queue (last 30 days)
Bug triage
Clean-ups
Crash queue
Crash triage
Dashboard bugs (last 180 days)
Dashboard Bugs (NEW) in the last 30 days (except accessibility)
Dashboard CDS
Dashboard Sprint 23
Feedback
Low Hanging Fruit
Monitoring
My issues
Need Review
Pending backports
Product Backlog Scrub
Quincy: backlog
Rook - Dashboard Integration bugs
Telemetry
Test Failures

Actions

Copy link

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:

Neha .

Category:

General

Target version:

Ceph - v14.0.0

% Done:

Tags:

UI, low-hanging-fruit

Backport:

Reviewed:

Affected Versions:

Pull request ID:

25831

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

Download all 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 open — 2 closed)

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

New

anurag bandhu

Actions

Copied from Dashboard - Cleanup #35691: mgr/dashboard: Proposed Landing Page

Resolved

Alfonso Martínez

Actions

Copied to Dashboard - Cleanup #35693: Proposed About modal box

Resolved

Ngwa Sedrick Meh

Actions

Issue # Delay: days Cancel

History
Notes
Property changes

Actions

Copy link

Updated by Ernesto Puerta over 5 years ago

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

Actions

Copy link

Updated by Ernesto Puerta over 5 years ago

Copied to Cleanup #35693: Proposed About modal box added

Actions

Copy link Download all files

Updated by Ricardo Marques over 5 years ago

File 2018-09-05_14-20-33.png 2018-09-05_14-20-33.png added
File 2018-09-05_14-19-57.png 2018-09-05_14-19-57.png added

`#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

Copy link

Updated by Volker Theile over 5 years ago

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

Actions

Copy link

Updated by Ricardo Marques over 5 years ago

Any other color works for me.

Actions

Copy link

Updated by Ernesto Puerta over 5 years ago

File ceph_mast_pre_fix.png ceph_mast_pre_fix.png added
Description updated (diff)

Actions

Copy link

Updated by Ernesto Puerta over 5 years ago

File deleted (~~gray_background.png~~)

Actions

Copy link Download all files

Updated by Michael Celedonia over 5 years ago

File Screen Shot 2018-09-05 at 11.35.25 AM.png Screen Shot 2018-09-05 at 11.35.25 AM.png added
File Screen Shot 2018-09-05 at 11.35.36 AM.png Screen Shot 2018-09-05 at 11.35.36 AM.png added

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

Copy link

Updated by Michael Celedonia over 5 years ago

File Screen Shot 2018-09-05 at 11.35.36 AM.png Screen Shot 2018-09-05 at 11.35.36 AM.png added

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

Copy link

#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

Copy link

#11