diff --git a/class-wc-calypso-bridge-shared.php b/class-wc-calypso-bridge-shared.php index f693a9ae..05c6c805 100644 --- a/class-wc-calypso-bridge-shared.php +++ b/class-wc-calypso-bridge-shared.php @@ -84,6 +84,15 @@ public function add_extension_register_script() { true ); + $style_path = 'build/index.css'; + $style_path_url = plugins_url( $style_path, __FILE__ ); + $res = wp_register_style( + 'wc-calypso-bridge', + $style_path_url, + array(), + filemtime( dirname( __FILE__ ) . '/build/index.css' ) + ); + wp_add_inline_script( 'wc-calypso-bridge', 'window.wcCalypsoBridge = ' . wp_json_encode( @@ -98,6 +107,7 @@ public function add_extension_register_script() { ); wp_enqueue_script( 'wc-calypso-bridge' ); + wp_enqueue_style( 'wc-calypso-bridge' ); } /** diff --git a/package-lock.json b/package-lock.json index 8c9f1d6d..08572d97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4713,12 +4713,6 @@ "integrity": "sha512-MjrkSp6Jyfx+92AE32A83P503noUtGb6//BYUH4GiWzzzSNhDHgbQ0UcOJwJaEYK166DxSNpMk/JXc4YENi1Cw==", "dev": true }, - "agent-base": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", - "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==", - "dev": true - }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -4780,16 +4774,6 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "https-proxy-agent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz", - "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==", - "dev": true, - "requires": { - "agent-base": "5", - "debug": "4" - } - }, "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -4837,12 +4821,6 @@ } } }, - "node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", - "dev": true - }, "parse-json": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", @@ -4884,26 +4862,6 @@ "integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==", "dev": true }, - "puppeteer": { - "version": "npm:puppeteer-core@5.5.0", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz", - "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==", - "dev": true, - "requires": { - "debug": "^4.1.0", - "devtools-protocol": "0.0.818844", - "extract-zip": "^2.0.0", - "https-proxy-agent": "^4.0.0", - "node-fetch": "^2.6.1", - "pkg-dir": "^4.2.0", - "progress": "^2.0.1", - "proxy-from-env": "^1.0.0", - "rimraf": "^3.0.2", - "tar-fs": "^2.0.0", - "unbzip2-stream": "^1.3.3", - "ws": "^7.2.3" - } - }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -15312,6 +15270,75 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, + "puppeteer": { + "version": "npm:puppeteer-core@5.5.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz", + "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==", + "dev": true, + "requires": { + "debug": "^4.1.0", + "devtools-protocol": "0.0.818844", + "extract-zip": "^2.0.0", + "https-proxy-agent": "^4.0.0", + "node-fetch": "^2.6.1", + "pkg-dir": "^4.2.0", + "progress": "^2.0.1", + "proxy-from-env": "^1.0.0", + "rimraf": "^3.0.2", + "tar-fs": "^2.0.0", + "unbzip2-stream": "^1.3.3", + "ws": "^7.2.3" + }, + "dependencies": { + "agent-base": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", + "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==", + "dev": true + }, + "https-proxy-agent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz", + "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==", + "dev": true, + "requires": { + "agent-base": "5", + "debug": "4" + } + }, + "node-fetch": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.5.tgz", + "integrity": "sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==", + "dev": true, + "requires": { + "whatwg-url": "^5.0.0" + } + }, + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", + "dev": true + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", + "dev": true + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "dev": true, + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", diff --git a/src/index.js b/src/index.js index fa91381b..59f8b564 100644 --- a/src/index.js +++ b/src/index.js @@ -9,18 +9,19 @@ import { addFilter } from '@wordpress/hooks'; */ import wcNavFilterRootUrl from './wc-navigation-root-url'; import PaymentsWelcomePage from './payments-welcome'; +import './index.scss'; wcNavFilterRootUrl(); -addFilter('woocommerce_admin_pages_list', 'wc-calypso-bridge', (pages) => { - pages.push({ +addFilter( 'woocommerce_admin_pages_list', 'wc-calypso-bridge', ( pages ) => { + pages.push( { container: PaymentsWelcomePage, path: '/payments-welcome', - breadcrumbs: [__('WooCommerce Payments', 'wc-calypso-bridge')], + breadcrumbs: [ __( 'WooCommerce Payments', 'wc-calypso-bridge' ) ], navArgs: { id: 'wc-calypso-bridge-payments-welcome-page', }, - }); + } ); return pages; -}); +} ); diff --git a/src/index.scss b/src/index.scss index 52acf4dd..1566bcca 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1 +1,59 @@ -// Add styles here. +/* +* <-------- Start Temporary Code --------> +* +* A change to Gutenberg base Navigation component in https://github.com/WordPress/gutenberg/pull/34885/ +* requires these overrides. The solution exists in WooCommerce Admin 2.8.0 and WooCommerce 5.9, but is not due +* to reach merchants until November 9, 2021 so these styles will need to exist until then. +* +* Criteria for removal +* 1. WooCommerce 5.9 has been released. +* 2. WooCommerce 5.9 includes WooCommerce Admin 2.8.0 or later. +*/ +.woocommerce-navigation .woocommerce-navigation__wrapper { + .components-navigation__item { + .components-button { + opacity: 1; + } + + &:not( :hover ) { + .components-button { + color: #949494; + } + } + &:hover { + .components-button { + color: #ddd; + } + } + &.is-active { + .components-button { + color: #fff; + } + } + } + + .components-navigation__menu-title, + .components-navigation__group-title { + color: #f0f0f0; + opacity: 1; + } + + .components-navigation__back-button { + color: #949494; + opacity: 1; + + &, + span { + font-size: 13px; + line-height: normal; + } + + &:hover, + &:hover:not( :disabled ) { + color: #ddd; + } + } +} +/* +* <-------- End Temporary Code --------> +*/ diff --git a/store-on-wpcom/assets/css/admin/nav-unification.css b/store-on-wpcom/assets/css/admin/nav-unification.css index 06a7f097..319198cf 100644 --- a/store-on-wpcom/assets/css/admin/nav-unification.css +++ b/store-on-wpcom/assets/css/admin/nav-unification.css @@ -1,5 +1,5 @@ /* Fix header overflow https://github.com/woocommerce/woocommerce-admin/issues/7035 */ -@media (min-width: 961px) { +@media ( min-width: 961px ) { .jetpack-connected .woocommerce-layout__header { width: calc( 100% - 272px ); }