Blocks: update spinner styles to match Gutenberg

References: * WordPress/gutenberg#49695 * WordPress/gutenberg#37551 * p1683530650412459-slack-C0299DMPG
Automattic · May 8, 2023 · 84847de · 84847de
1 parent 151a389
commit 84847de
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-spinner-styles b/projects/plugins/jetpack/changelog/update-spinner-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Blocks: update the styles of the loading spinner to match Gutenberg.
diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/style.scss b/projects/plugins/jetpack/extensions/blocks/story/player/style.scss
@@ -4,18 +4,19 @@
 @import '../../../shared/styles/jetpack-variables.scss';
 @import './variables.scss';
 
-$spinner-size: 18px;
+$spinner-size: 16px;
 // This used to be imported from @wordpress/components, but that was updated to use
 // @emotion so original scss copied here.
 .components-spinner {
-	display: inline-block;
-	background-color: #7e8993;
 	width: $spinner-size;
 	height: $spinner-size;
-	opacity: 0.7;
+	display: inline-block;
 	margin: 5px 11px 0;
-	border-radius: 100%;
 	position: relative;
+	color: var( --wp-components-color-accent, var( --wp-admin-theme-color, #3858e9 ) );
+	overflow: visible;
+	opacity: 1;
+	background-color: transparent;
 
 	&::before {
 		/* rtl:begin:ignore */