Add active class for selected plan ✨

wp-media · Dec 24, 2024 · 20d6658 · 20d6658
1 parent 62f3b8f
commit 20d6658
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 15 deletions.
diff --git a/assets/css/wpr-admin.css b/assets/css/wpr-admin.css
@@ -715,7 +715,7 @@ a:focus, button:focus {
   color: #121116;
   padding: 8px 0;
   padding-left: 4px;
-  border-bottom: 1px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
+  border-bottom: 1px solid #c2cad4;
 }
 .wpr-Popin .wp-rocket-data-table td:not(.column-primary) {
   font-family: "Monaco";
@@ -2862,7 +2862,7 @@ div.wpr-tutorial-item {
   font-family: Monaco;
   color: #121116;
   background: #fff;
-  border: 2px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
+  border: 2px solid #c2cad4;
   border-radius: 3px;
   font-size: 0.8125rem;
   line-height: 1.2307692308;
@@ -2894,7 +2894,7 @@ div.wpr-tutorial-item {
   height: 32px;
   color: #121116;
   background: #fff;
-  border: 2px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
+  border: 2px solid #c2cad4;
   border-radius: 3px;
   font-family: Monaco;
   font-size: 0.75rem;
@@ -3248,6 +3248,7 @@ div.wpr-tutorial-item {
 }
 
 .select-dropdown li:hover,
+.select-dropdown li.active,
 .select-dropdown input:checked ~ label {
   background-color: #f2f2f2;
 }

diff --git a/assets/css/wpr-admin.min.css b/assets/css/wpr-admin.min.css
diff --git a/assets/js/wpr-admin.js b/assets/js/wpr-admin.js
diff --git a/assets/js/wpr-admin.min.js b/assets/js/wpr-admin.min.js
diff --git a/assets/js/wpr-admin.min.js.map b/assets/js/wpr-admin.min.js.map
diff --git a/inc/Engine/License/Upgrade.php b/inc/Engine/License/Upgrade.php
@@ -245,7 +245,7 @@ private function get_promo_message( $promo_name = '', $promo_discount = 0 ) {
 		$license_types = $this->get_upgrade_types();
 
 		return sprintf(
-		// translators: %1$s = promotion name, %2$s = <br>, %3$s = <strong>, %4$s = promotion discount percentage, %5$s = </strong>, %6$s = Growth/Multi.
+		// translators: %1$s = promotion name, %2$s = <br>, %3$s = <strong>, %4$s = promotion discount percentage, %5$s = </strong>, %6$s = Growth or Multi.
 			esc_html__(
 				'Take advantage of %1$s to speed up more websites:%2$s get a %3$s%4$s off%5$s for %3$supgrading your license to %6$s!%5$s',
 				'rocket'
@@ -255,7 +255,7 @@ private function get_promo_message( $promo_name = '', $promo_discount = 0 ) {
 			'<strong>',
 			$promo_discount . '%',
 			'</strong>',
-			implode( ', ', $license_types ),
+			implode( ' or ', $license_types ),
 		);
 	}
 

diff --git a/src/js/custom/custom-select.js b/src/js/custom/custom-select.js
@@ -22,7 +22,15 @@ document.querySelectorAll(".custom-select").forEach(customSelect => {
 
 	customSelect.addEventListener('click', function(e) {
 		if (e.target.matches('label')) {
-			handler(e.target.closest('li'));
+
+			const allItems = customSelect.querySelectorAll('li');
+			allItems.forEach(item => item.classList.remove('active'));
+			const clickedPlan = e.target.closest('li');
+
+			if (clickedPlan) {
+				clickedPlan.classList.add('active');
+				handler(clickedPlan);
+			}
 		}
 	});
 	document.addEventListener("click", (e) => {

diff --git a/src/js/global/fields.js b/src/js/global/fields.js
@@ -358,11 +358,11 @@ $(document).ready(function(){
 	let stacked_select = document.getElementById( 'rocket_stacked_select' );
 	if ( stacked_select ) {
 		stacked_select.addEventListener('custom-select-change',function(event){
-			console.log(event.detail.selectedOption);
+
 			let selected_option = $( event.detail.selectedOption );
 
 			let name = selected_option.data('name');
-			console.log(name);
+
 			let saving = selected_option.data('saving');
 			let regular_price  = selected_option.data('regular-price');
 			let price  = selected_option.data('price');

diff --git a/src/scss/components/fields/_customselect.scss b/src/scss/components/fields/_customselect.scss
@@ -92,6 +92,7 @@
 }
 
 .select-dropdown li:hover,
+.select-dropdown li.active,
 .select-dropdown input:checked ~ label {
 	background-color: #f2f2f2;
 }