Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Make Notice component legible in dark themes (#8278)
Browse files Browse the repository at this point in the history
* Make Notice component color black

The Notice component text is not legible in dark themes since the background color
is light and and the text color is too. With this change we are setting the color
always to black for our blocks, so it's always legible.

* Make the text black for notices displayed on the editor

* Import editor.scss
  • Loading branch information
albarin authored Jan 25, 2023
1 parent 2d73606 commit 3de7ce0
Show file tree
Hide file tree
Showing 8 changed files with 23 additions and 0 deletions.
4 changes: 4 additions & 0 deletions assets/js/blocks/attribute-filter/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,7 @@
}

}

.wc-block-attribute-filter .components-notice__content {
color: $black;
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
AdditionalFieldsContent,
} from '../../form-step';
import Block from './block';
import './editor.scss';

type shippingAdminLink = {
id: number;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wc-block-components-shipping-rates-control__no-results-notice .components-notice__content {
color: $black;
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,6 @@
}
}

.wc-block-checkout__terms_notice .components-notice__content {
color: $black;
}
1 change: 1 addition & 0 deletions assets/js/blocks/rating-filter/edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
*/
import Block from './block';
import { Attributes } from './types';
import './editor.scss';

const Edit = ( {
attributes,
Expand Down
3 changes: 3 additions & 0 deletions assets/js/blocks/rating-filter/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wc-block-rating-filter .components-notice__content {
color: $black;
}
5 changes: 5 additions & 0 deletions assets/js/blocks/store-notices/edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Notice } from '@wordpress/components';

/**
* Internal dependencies
*/
import './editor.scss';

const Edit = (): JSX.Element => {
const blockProps = useBlockProps( {
className: 'wc-block-store-notices',
Expand Down
3 changes: 3 additions & 0 deletions assets/js/blocks/store-notices/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wc-block-store-notices .components-notice__content {
color: $black;
}

0 comments on commit 3de7ce0

Please sign in to comment.