Make test instructions copy icon use the same color as the text next …

…to it (#9868)
Automattic · Dec 4, 2024 · af82606 · af82606
1 parent 6cff322
commit af82606
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/changelog/test-instructions-item-color b/changelog/test-instructions-item-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Make test instructions copy icon use the same color as the text next to it
diff --git a/client/checkout/style.scss b/client/checkout/style.scss
@@ -26,32 +26,33 @@
 		display: block;
 		width: 1.2em;
 		height: 1.2em;
-		background: url( 'assets/images/icons/copy.svg?asset' ) no-repeat center;
-		background-size: contain;
+		mask-image: url( 'assets/images/icons/copy.svg?asset' );
+		mask-size: contain;
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: currentColor;
 	}
 
 	&:hover {
 		background-color: transparent;
-		filter: invert( 0.3 );
+		opacity: 0.7;
 
 		i {
-			filter: invert( 0.3 );
+			opacity: 0.7;
 		}
 	}
 
 	&:active i {
 		transform: scale( 0.9 );
 	}
 
-	&.state--success {
-		i {
-			background-image: url( 'assets/images/icons/check-green.svg?asset' );
-		}
+	&:focus {
+		outline: none;
 	}
 
-	.theme--night & {
+	&.state--success {
 		i {
-			filter: invert( 100% ) hue-rotate( 180deg );
+			mask-image: url( 'assets/images/icons/check-green.svg?asset' );
 		}
 	}
 }