Styles refinements:

- Copy URL action button color - Media Placeholder icon color (BlockIcon mod)
WordPress · Nov 13, 2020 · 1b72a5c · 1b72a5c
1 parent dedf30c
commit 1b72a5c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js
@@ -8,15 +8,33 @@ import { View } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
-export default function BlockIcon( { icon, showColors = false } ) {
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export function BlockIcon( {
+	icon,
+	showColors = false,
+	getStylesFromColorScheme,
+} ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon
+			icon={ icon && icon.src ? icon.src : icon }
+			{ ...getStylesFromColorScheme(
+				styles.iconPlaceholder,
+				styles.iconPlaceholderDark
+			) }
+		/>
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
@@ -26,3 +44,5 @@ export default function BlockIcon( { icon, showColors = false } ) {
 
 	return <View style={ style }>{ renderedIcon }</View>;
 }
+
+export default withPreferredColorScheme( BlockIcon );
diff --git a/packages/block-editor/src/components/block-icon/style.native.scss b/packages/block-editor/src/components/block-icon/style.native.scss
@@ -0,0 +1,7 @@
+.iconPlaceholder {
+	fill: $gray-dark;
+}
+
+.iconPlaceholderDark {
+	fill: $white;
+}
diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
@@ -27,13 +27,14 @@ import {
 import { file as icon, replace, button, external } from '@wordpress/icons';
 import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export default class FileEdit extends Component {
+export class FileEdit extends Component {
 	constructor( props ) {
 		super( props );
 
@@ -108,7 +109,7 @@ export default class FileEdit extends Component {
 		this.setState( { isUrlCopied: true } );
 		this.timerRef = setTimeout( () => {
 			this.setState( { isUrlCopied: false } );
-		}, 1000 );
+		}, 1500 );
 	}
 
 	onChangeOpenInNewWindow( newValue ) {
@@ -172,6 +173,11 @@ export default class FileEdit extends Component {
 	}
 
 	getInspectorControls( { showDownloadButton, textLinkTarget } ) {
+		const actionButtonStyle = this.props.getStylesFromColorScheme(
+			styles.actionButton,
+			styles.actionButtonDark
+		);
+
 		return (
 			<InspectorControls>
 				<PanelBody title={ __( 'File block settings' ) } />
@@ -194,6 +200,9 @@ export default class FileEdit extends Component {
 								? __( 'Copied!' )
 								: __( 'Copy file URL' )
 						}
+						labelStyle={
+							this.state.isUrlCopied || actionButtonStyle
+						}
 						onPress={ this.onCopyURL }
 					/>
 				</PanelBody>
@@ -335,3 +344,5 @@ export default class FileEdit extends Component {
 		);
 	}
 }
+
+export default withPreferredColorScheme( FileEdit );
diff --git a/packages/block-library/src/file/style.native.scss b/packages/block-library/src/file/style.native.scss
@@ -26,3 +26,11 @@
 	flex: 1;
 	background-color: "rgba(0, 0, 0, 0.5)";
 }
+
+.actionButton {
+	color: $blue-50;
+}
+
+.actionButtonDark {
+	color: $blue-30;
+}