Merge pull request #761 from Automattic/patch/sidebar-nav-styles

Override Nav styles after GB 11.6.0 changes

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' );
 	}
 
 	/**

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;
-});
+} );

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 -------->
+*/

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 );
 	}