feat: update ads and newsletter-ads icons (#3836)

Author: thomasguillot

includes/wizards/advertising/class-advertising-display-ads.php

@@ -564,7 +564,7 @@ public static function sanitize_sizes( $sizes ) {
 	 * and a first menu item too.
 	 */
 	public function add_page() {
-		$icon = 'data:image/svg+xml;base64,' . base64_encode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false" fill="none"><path d="M18 8H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zm.5 6c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5v-4c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v4zM4 4v1.5h16V4H4zm0 16h16v-1.5H4V20z"></path></svg>' );
+		$icon = 'data:image/svg+xml;base64,' . base64_encode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false" fill="none"><path d="M19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5ZM19.5 17C19.5 17.1326 19.4473 17.2598 19.3536 17.3536C19.2598 17.4473 19.1326 17.5 19 17.5H5C4.86739 17.5 4.74021 17.4473 4.64645 17.3536C4.55268 17.2598 4.5 17.1326 4.5 17V7C4.5 6.86739 4.55268 6.74021 4.64645 6.64645C4.74021 6.55268 4.86739 6.5 5 6.5H19C19.1326 6.5 19.2598 6.55268 19.3536 6.64645C19.4473 6.74021 19.5 6.86739 19.5 7V17ZM16.007 9.736C15.568 9.50644 15.0783 9.3909 14.583 9.4H12.487V15H14.583C15.116 15 15.591 14.89 16.007 14.668C16.423 14.444 16.75 14.124 16.987 13.708C17.224 13.289 17.343 12.787 17.343 12.2C17.343 11.613 17.224 11.112 16.987 10.696C16.7603 10.2877 16.4198 9.95421 16.007 9.736ZM16.039 13.208C15.916 13.491 15.734 13.708 15.491 13.86C15.248 14.012 14.946 14.088 14.583 14.088H13.511V10.312H14.583C14.946 10.312 15.248 10.388 15.491 10.54C15.734 10.692 15.916 10.91 16.039 11.192C16.162 11.475 16.223 11.811 16.223 12.2C16.223 12.589 16.162 12.925 16.039 13.208ZM8.387 9.4L6.395 15H7.387L7.854 13.672H9.889L10.355 15H11.347L9.355 9.4H8.387ZM8.168 12.776L8.871 10.776L9.574 12.776H8.168Z"></path></svg>' );
 		add_menu_page(
 			$this->get_name(),
 			$this->get_name(),

includes/wizards/newspack/class-newspack-dashboard.php

@@ -91,7 +91,7 @@ public function get_dashboard() {
 						'href'  => admin_url( 'edit.php?post_type=newspack_nl_cpt' ),
 					],
 					[
-						'icon'  => 'pullquote',
+						'icon'  => 'emailAd',
 						'title' => __( 'Advertising', 'newspack-plugin' ),
 						'desc'  => __( 'Get advertising revenue from your newsletters.', 'newspack-plugin' ),
 						'href'  => admin_url( 'edit.php?post_type=newspack_nl_ads_cpt' ),
@@ -114,7 +114,7 @@ public function get_dashboard() {
 			],
 			'cards'        => [
 				[
-					'icon'  => 'pullquote',
+					'icon'  => 'ad',
 					'title' => __( 'Display Ads', 'newspack-plugin' ),
 					'desc'  => __( 'Sell programmatic advertising on your site to drive revenue.', 'newspack-plugin' ),
 					'href'  => admin_url( 'admin.php?page=newspack-ads-display-ads#/' ),

package-lock.json

@@ -9,9 +9,9 @@
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.10.5",
 		"@testing-library/react": "^12.1.4",
-		"@types/wordpress__api-fetch": "^3.23.1",
 		"@types/qs": "^6.9.17",
 		"@types/react": "^17.0.75",
+		"@types/wordpress__api-fetch": "^3.23.1",
 		"@wordpress/browserslist-config": "^6.18.0",
 		"eslint": "^8.57.0",
 		"lint-staged": "^15.4.3",
@@ -52,6 +52,7 @@
 		"release:archive": "rm -rf release && mkdir -p release && rsync -r . ./release/newspack-plugin --exclude-from='./.distignore' && cd release && zip -r newspack-plugin.zip newspack-plugin"
 	},
 	"dependencies": {
+		"@wordpress/icons": "^10.20.0",
 		"classnames": "^2.5.1",
 		"colord": "^2.9.3",
 		"deep-map-keys": "^2.0.1",
@@ -64,4 +65,4 @@
 		"recursive-copy": "^2.0.14",
 		"tachyons": "^4.12.0"
 	}
-}
+}

package.json

@@ -0,0 +1,26 @@
+/**
+ * Newspack Dashboard Icons, Custom Icons
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const ad = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19H19C19.5304 19 20.0391 18.7893 20.4142 18.4142C20.7893 18.0391 21 17.5304 21 17V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5ZM19.5 17C19.5 17.1326 19.4473 17.2598 19.3536 17.3536C19.2598 17.4473 19.1326 17.5 19 17.5H5C4.86739 17.5 4.74021 17.4473 4.64645 17.3536C4.55268 17.2598 4.5 17.1326 4.5 17V7C4.5 6.86739 4.55268 6.74021 4.64645 6.64645C4.74021 6.55268 4.86739 6.5 5 6.5H19C19.1326 6.5 19.2598 6.55268 19.3536 6.64645C19.4473 6.74021 19.5 6.86739 19.5 7V17ZM16.007 9.736C15.568 9.50644 15.0783 9.3909 14.583 9.4H12.487V15H14.583C15.116 15 15.591 14.89 16.007 14.668C16.423 14.444 16.75 14.124 16.987 13.708C17.224 13.289 17.343 12.787 17.343 12.2C17.343 11.613 17.224 11.112 16.987 10.696C16.7603 10.2877 16.4198 9.95421 16.007 9.736ZM16.039 13.208C15.916 13.491 15.734 13.708 15.491 13.86C15.248 14.012 14.946 14.088 14.583 14.088H13.511V10.312H14.583C14.946 10.312 15.248 10.388 15.491 10.54C15.734 10.692 15.916 10.91 16.039 11.192C16.162 11.475 16.223 11.811 16.223 12.2C16.223 12.589 16.162 12.925 16.039 13.208ZM8.387 9.4L6.395 15H7.387L7.854 13.672H9.889L10.355 15H11.347L9.355 9.4H8.387ZM8.168 12.776L8.871 10.776L9.574 12.776H8.168Z" />
+	</SVG>
+);
+
+export const emailAd = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4.5 16.9995V9.81253L12 15.4375L19.5 9.81253V14.3295H21V6.99953C21 6.46909 20.7893 5.96039 20.4142 5.58531C20.0391 5.21024 19.5304 4.99953 19 4.99953H5C4.46957 4.99953 3.96086 5.21024 3.58579 5.58531C3.21071 5.96039 3 6.46909 3 6.99953V16.9995C3 17.53 3.21071 18.0387 3.58579 18.4137C3.96086 18.7888 4.46957 18.9995 5 18.9995H12.42V17.4995H5C4.86739 17.4995 4.74021 17.4468 4.64645 17.3531C4.55268 17.2593 4.5 17.1321 4.5 16.9995ZM4.5 6.99953C4.5 6.86692 4.55268 6.73974 4.64645 6.64597C4.74021 6.55221 4.86739 6.49953 5 6.49953H19C19.1326 6.49953 19.2598 6.55221 19.3536 6.64597C19.4473 6.73974 19.5 6.86692 19.5 6.99953V7.93753L12 13.5625L4.5 7.93553V6.99953ZM15.035 15.8295L13.375 20.4965H14.202L14.591 19.3905H16.287L16.676 20.4975H17.502L15.842 15.8295H15.035ZM14.853 18.6435L15.439 16.9765L16.024 18.6435H14.853ZM22.203 16.9095C22.014 16.5692 21.7302 16.2913 21.386 16.1095C21.0203 15.9184 20.6125 15.8221 20.2 15.8295H18.453V20.4965H20.2C20.644 20.4965 21.04 20.4045 21.386 20.2205C21.733 20.0335 22.006 19.7665 22.203 19.4205C22.401 19.0705 22.5 18.6525 22.5 18.1635C22.5 17.6735 22.401 17.2565 22.203 16.9095ZM21.413 19.0035C21.3204 19.2274 21.1608 19.4171 20.956 19.5465C20.754 19.6735 20.502 19.7365 20.2 19.7365H19.306V16.5895H20.2C20.502 16.5895 20.754 16.6535 20.956 16.7795C21.159 16.9065 21.311 17.0875 21.413 17.3235C21.5213 17.59 21.5737 17.8759 21.567 18.1635C21.5737 18.4511 21.5213 18.737 21.413 19.0035Z" />
+	</SVG>
+);
+
+export const gift = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.25 6.5C17.25 5.83696 16.9866 5.20107 16.5178 4.73223C16.0489 4.26339 15.413 4 14.75 4C14.087 4 13.4511 4.26339 12.9822 4.73223C12.5134 5.20107 12.25 5.83696 12.25 6.5C12.25 5.83696 11.9866 5.20107 11.5178 4.73223C11.0489 4.26339 10.413 4 9.75 4C9.08696 4 8.45107 4.26339 7.98223 4.73223C7.51339 5.20107 7.25 5.83696 7.25 6.5C7.25 7.16304 7.51339 7.79893 7.98223 8.26777C8.45107 8.73661 9.08696 9 9.75 9H4V20H20V9H14.75C15.413 9 16.0489 8.73661 16.5178 8.26777C16.9866 7.79893 17.25 7.16304 17.25 6.5ZM8.75 6.5C8.75 5.95 9.2 5.5 9.75 5.5C10.3 5.5 10.75 5.95 10.75 6.5V7.5H9.75C9.2 7.5 8.75 7.05 8.75 6.5ZM11.5 18.5H5.5V10.5H11.5V18.5ZM13.75 6.5C13.75 5.95 14.2 5.5 14.75 5.5C15.3 5.5 15.75 5.95 15.75 6.5C15.75 7.05 15.3 7.5 14.75 7.5H13.75V6.5ZM18.5 10.5V18.5H13V10.5H18.5Z" />
+	</SVG>
+);