From 757a560e49a39f0f9a89d216c4575594ea62277a Mon Sep 17 00:00:00 2001
From: Kelly Choyce-Dwan <ryelle@git.wordpress.org>
Date: Wed, 1 Mar 2023 16:40:29 +0000
Subject: [PATCH] Administration: Update the Dashboard welcome banner for 6.2.

Props richtabor, markoserb, laurlittle.
See #57759.



git-svn-id: https://develop.svn.wordpress.org/trunk@55451 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/colors/_admin.scss          | 20 +++++++++++---------
 src/wp-admin/css/colors/_variables.scss      |  3 ++-
 src/wp-admin/css/colors/modern/colors.scss   |  4 +---
 src/wp-admin/css/dashboard.css               | 14 +++++++-------
 src/wp-admin/images/dashboard-background.svg | 12 ++++++++++++
 src/wp-admin/includes/dashboard.php          |  2 +-
 6 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 src/wp-admin/images/dashboard-background.svg

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 1d06aa93fb..832ab70a95 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -788,15 +788,17 @@ div#wp-responsive-toggle a:before {
 }
 
 /* Welcome Panel */
-.welcome-panel {
-	background-color: $dashboard-accent-1;
-}
+@if ( $custom-welcome-panel == "true" ) {
+	.welcome-panel {
+		background-color: $dashboard-accent-1;
+	}
 
-.welcome-panel-header-image circle {
-	stroke: $dashboard-accent-2;
-	fill: $dashboard-accent-1;
-}
+	.welcome-panel-header-image .curve,
+	.welcome-panel-header-image .dot {
+		fill: $dashboard-accent-2;
+	}
 
-[class*="welcome-panel-icon"] {
-	background-color: $dashboard-icon-background;
+	[class*="welcome-panel-icon"] {
+		background-color: $dashboard-icon-background;
+	}
 }
diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss
index 03a32ea97a..7101cb364b 100644
--- a/src/wp-admin/css/colors/_variables.scss
+++ b/src/wp-admin/css/colors/_variables.scss
@@ -65,8 +65,9 @@ $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
 
 // Dashboard Colors
 
+$custom-welcome-panel: "true" !default;
 $dashboard-accent-1: $highlight-color !default;
-$dashboard-accent-2: rgba(255, 255, 255, 0.5) !default;
+$dashboard-accent-2: rgba(255, 255, 255, 0.33) !default;
 $dashboard-icon-background: $dashboard-accent-2 !default;
 
 $low-contrast-theme: "false" !default;
diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss
index 35589df093..dc5f9c6588 100644
--- a/src/wp-admin/css/colors/modern/colors.scss
+++ b/src/wp-admin/css/colors/modern/colors.scss
@@ -7,8 +7,6 @@ $notification-color: $highlight-color;
 $link: $highlight-color;
 $link-focus: darken($highlight-color, 10%);
 
-$dashboard-accent-1: #273fcc;
-$dashboard-accent-2: #627eff;
-$dashboard-icon-background: #1d2327;
+$custom-welcome-panel: "false";
 
 @import "../_admin.scss";
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 77084bd9f6..68ac45f134 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -120,7 +120,7 @@
 	position: relative;
 	overflow: auto;
 	margin: 16px 0;
-	background-color: #273fcc;
+	background-color: #1d35b4;
 	font-size: 14px;
 	line-height: 1.3;
 	clear: both;
@@ -146,8 +146,6 @@
 }
 
 .welcome-panel-header {
-	--about-header-bg-width: 780px;
-
 	position: relative;
 	color: #fff;
 }
@@ -165,10 +163,12 @@
 .welcome-panel-header-image svg {
 	display: block;
 	margin: auto;
-	width: var(--about-header-bg-width);
-	height: auto;
-	transform: scale(0.75);
-	transform-origin: center top;
+	width: 100%;
+	height: 100%;
+}
+
+.rtl .welcome-panel-header-image svg {
+	transform: scaleX(-1);
 }
 
 .welcome-panel-header * {
diff --git a/src/wp-admin/images/dashboard-background.svg b/src/wp-admin/images/dashboard-background.svg
new file mode 100644
index 0000000000..4036371f8f
--- /dev/null
+++ b/src/wp-admin/images/dashboard-background.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 1232 240" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <g clip-path="url(#a)">
+    <path class="curve" d="M1430.91 497.569c63.48-63.482 112.65-137.548 146.13-220.1 32.34-79.71 48.73-163.936 48.73-250.299 0-86.362-16.39-170.588-48.73-250.298-33.48-82.573-82.65-156.618-146.13-220.1-63.48-63.482-137.55-112.651-220.1-146.135-79.71-32.336-163.94-48.725-250.301-48.725-86.363 0-170.589 16.389-250.299 48.725-82.573 33.484-156.618 82.653-220.1 146.135-63.481 63.482-112.65 137.547-146.135 220.1C311.64-143.418 295.25-59.192 295.25 27.19c0 86.383 16.39 170.589 48.725 250.299 33.485 82.573 82.654 156.618 146.135 220.1a683.438 683.438 0 0 0 14.475 14.031l85.576-85.577a560.502 560.502 0 0 1-14.535-13.99C472.814 309.24 416.206 172.56 416.206 27.17c0-145.389 56.608-282.069 159.42-384.882 102.813-102.813 239.494-159.42 384.883-159.42 145.391 0 282.071 56.607 384.881 159.42 102.81 102.813 159.42 239.493 159.42 384.882 0 145.39-56.61 282.07-159.42 384.883L861.587 895.857H747.545l540.815-540.815c87.57-87.572 135.81-204.013 135.81-327.851 0-123.84-48.22-240.28-135.81-327.852-87.57-87.572-204.01-135.814-327.851-135.814-123.839 0-240.28 48.222-327.852 135.814C545.085-213.069 496.844-96.648 496.844 27.19c0 123.839 48.221 240.28 135.813 327.852 4.758 4.758 9.636 9.374 14.575 13.93l85.637-85.637c-5.019-4.475-9.938-9.072-14.696-13.829-133.616-133.616-133.616-351.035 0-484.671 133.616-133.616 351.037-133.616 484.667 0 64.74 64.731 100.38 150.792 100.38 242.335 0 91.544-35.64 177.604-100.38 242.336L576.493 895.857H462.452l683.378-683.362c102.19-102.188 102.19-268.442 0-370.629-49.49-49.492-115.31-76.767-185.301-76.767-69.993 0-135.814 27.255-185.305 76.767-49.491 49.491-76.767 115.311-76.767 185.304 0 69.994 27.256 135.814 76.767 185.305a262.783 262.783 0 0 0 14.797 13.708l86.02-86.02a143.305 143.305 0 0 1-15.281-13.224c-26.65-26.651-41.326-62.09-41.326-99.789 0-37.698 14.676-73.138 41.326-99.789 26.651-26.65 62.091-41.326 99.789-41.326s73.141 14.676 99.791 41.326c55.01 55.015 55.01 144.543 0 199.578L295.29 891.986v124.804h1330.52V895.837h-593.13l398.27-398.268h-.04ZM-1234.11-301.729c-82.74 82.734-146.8 179.217-190.43 286.787-42.11 103.881-63.46 213.608-63.46 326.178s21.35 222.297 63.48 326.158c43.63 107.571 107.69 204.053 190.43 286.787 82.73 82.739 179.21 146.799 286.784 190.429 103.861 42.11 213.608 63.48 326.158 63.48 112.55 0 222.297-21.35 326.158-63.48 107.57-43.63 204.053-107.69 286.787-190.429 82.734-82.734 146.8-179.216 190.425-286.787 42.113-103.861 63.482-213.608 63.482-326.158 0-112.549-21.349-222.297-63.482-326.158C138.597-122.492 74.531-218.975-8.203-301.709c-53.382-53.382-112.711-99.063-177.08-136.519l-88.963 88.963c66.284 34.815 126.883 79.448 180.527 133.092C47.155-75.299 124.748 112.021 124.748 311.256c0 199.235-77.593 386.556-218.467 527.43-140.873 140.873-328.194 218.464-527.429 218.464-199.235 0-386.552-77.591-527.432-218.464-140.87-140.874-218.46-328.195-218.46-527.43 0-199.235 77.59-386.555 218.46-527.429L-484.77-880h-171.052l-578.288 578.271Z" fill="#213FD4"/>
+    <path class="curve" d="M85.415-880H-85.637L-949.02-16.635c-87.569 87.572-135.809 204.012-135.809 327.851s48.22 240.28 135.809 327.852c87.572 87.572 204.012 135.813 327.851 135.813s240.3-48.241 327.852-135.813c87.572-87.572 135.813-204.013 135.813-327.852 0-123.839-48.221-240.28-135.813-327.872-55.701-55.68-123.073-95.434-196.574-117.025L-593.209-30.364c81 6.491 156.275 41.145 214.375 99.245 64.731 64.731 100.373 150.792 100.373 242.335 0 91.544-35.642 177.604-100.373 242.336-64.732 64.731-150.792 100.373-242.336 100.373-91.544 0-177.604-35.642-242.335-100.373-64.732-64.732-100.374-150.792-100.374-242.336 0-91.543 35.642-177.604 100.374-242.335L85.415-880Z" fill="#213FD4"/>
+    <path class="dot" d="M961 40c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h1232v240H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index a9f7627663..2beb5466ec 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/wp-admin/includes/dashboard.php
@@ -2043,7 +2043,7 @@ function wp_welcome_panel() {
 	<div class="welcome-panel-content">
 	<div class="welcome-panel-header">
 		<div class="welcome-panel-header-image">
-			<?php echo file_get_contents( dirname( __DIR__ ) . '/images/about-header-about.svg' ); ?>
+			<?php echo file_get_contents( dirname( __DIR__ ) . '/images/dashboard-background.svg' ); ?>
 		</div>
 		<h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
 		<p>