diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js index f0845e6b74f8ad..3e1bca650976a2 100644 --- 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 = ; + const renderedIcon = ( + + ); const style = showColors ? { backgroundColor: icon && icon.background, @@ -26,3 +44,5 @@ export default function BlockIcon( { icon, showColors = false } ) { return { renderedIcon }; } + +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 new file mode 100644 index 00000000000000..605312709ef5c9 --- /dev/null +++ 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 index f0dac0e0ff6326..22cdf58c5fb694 100644 --- 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 ( @@ -194,6 +200,9 @@ export default class FileEdit extends Component { ? __( 'Copied!' ) : __( 'Copy file URL' ) } + labelStyle={ + this.state.isUrlCopied || actionButtonStyle + } onPress={ this.onCopyURL } /> @@ -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 index a4f6eb12fc52a1..2cdf1fbc8eff38 100644 --- 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; +}