Change welcome panel background color to light gray

[Marc4]

I suggest matching the welcome panel's border color with the rest of the dashboard widgets to make it more integrated and less jarring.

Here is the PR: ​https://github.com/WordPress/wordpress-develop/pull/11065

I suggest matching the welcome panel's border color with the rest of the dashboard widgets.

Ticket: https://core.trac.wordpress.org/ticket/64741

Before: White Background	After: Light Gray Background
:---	:---

[joedolson]

Thanks, @Marc4! FYI, I added a link to the ticket in your PR so that the automations to connect the two would run.

[joedolson]

@fabiankaegy What's your thought here? It makes sense to me; the welcome banner has enough to make it stand out already, the border just looks out of place.

[fabiankaegy]

Thanks for the ping! Yeah this makes sense to me 👍

[joedolson]

In 61758:

Admin: Match welcome panel to other dashboard widgets.

Set the Welcome Panel to have the same border color as the other dashboard widgets following the admin reskin.

Props marc4, fabiankaegy, joedolson.
Fixes #64741.

[peterwilsoncc]

r61758 has caused an issue with the display of welcome banner when displayed on a wide screen, around 1680 pixels or wider.

The black background colour is no longer displayed behind the image so there are grey bars showing instad of the black background.

I've added a before and after in the screen shot above.

Environment

• WordPress: 7.0-beta2-61758
• PHP: 8.4.18
• Server: nginx/1.24.0
• Database: mysqli (Server: 8.0.44-0ubuntu0.24.04.2 / Client: mysqlnd 8.4.18)
• Browser: Firefox 148.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins:
  • _qm-mappings.php
• Plugins:
  • Query Monitor 3.20.2
  • Test Reports 1.2.1

Trac ticket:

## Use of AI Tools

[ramonopoly]

has caused an issue with the display of welcome banner when displayed on a wide screen, around 1680 pixels or wider.

Just came to say this. Looks like #151515 matched the svg path fill inside .welcome-panel-header-image

​https://github.com/WordPress/wordpress-develop/commit/69aa284de60c7bf6a2613aa516d32537c22c3ac3#diff-cb3a7ed96d1958084e4c9d819cecaf0b6f33e9bec282dce72fa6b116a71ee61dL143

1920px without PR:

1920px with PR:

2560px with PR:

If we add background-color: #151515 to welcome-panel-content to fix this: ​https://github.com/WordPress/wordpress-develop/pull/11105, it might be better to remove the background from welcome-panel and simply modify the border color instead. Does that make sense?

The background color is now displaying correctly on wider screens.

Before	After

It leaves a small amount of dark artifacting in the border radius which doesn't match the other dashboard widgets, but I'm unsure that's significant enough to address.

If we added another wrapper for the welcome panel header, we could set a background only on the header panel, which would avoid this.

That makes sense to me. It solves the problem we were looking to solve.

During our company contributor day with @karinchristen @krokodok @velthy @derpaschi we fixed two more issues.

​https://github.com/WordPress/wordpress-develop/pull/11106/commits/3bad50de53968616d0a36dd25293d1a3d32fc915:
This is a small visual detail, but when the border wraps around the entire element, it appears slightly blurred because .welcome-panel-header-wrap has a dark background.

For this reason, we suggest applying the border only to .welcome-panel-column-container instead. Additionally, add a border-radius of 8px to the bottom-left and bottom-right corners of .welcome-panel-column-container.

After:

​https://github.com/WordPress/wordpress-develop/pull/11106/commits/428f84a6670a80053e7d69be2712ab6646c1e432:
The dismiss icon was missing on smaller screen.

After:

As @ocean90 said, we worked on this together and it looks better noew.

Works!

Tested and can confirm that the close icon is shown on mobile and the border is looking better now. 👍🏼

Yep, dismiss icon is visible again and the overall styling of the box looks better and crisper 👍

[joedolson]

In 61798:

Admin: Reskin - Welcome Panel viewport fixes.

Ensure that the black background covers the entire width of the header on large screens, ensure that the dismiss button appears on small screens.

Props peterwilsoncc, ramonopoly, huzaifaalmesbah, marc4, shailu25, ocean90, krokodok, karinchristen, hubersen, stefanvelthuys, joedolson.
Fixes #64741.