search

woocommerce / woocommerce-blocks

(Deprecated) This plugin has been merged into woocommerce/woocommerce
https://wordpress.org/plugins/woo-gutenberg-products-block/
GNU General Public License v3.0
405 stars 218 forks source link

Checkout block: Region & country dropdown always renders using "dark mode" colours #3145

Closed haszari closed 4 years ago

haszari commented 4 years ago

Describe the bug

The Country and Region / State drop-down menu (aka combobox) controls use dark colours for the pop-up menu. This is inconsistent with the main UI element and the surrounding UI. Also the colours make the text hard to read.

I suspect this is the "dark mode" colours being used even if dark mode is off. I see this in all themes (not theme specific).

Screen Shot 2020-09-15 at 12 32 52 PM region:country dropdowns are always dark mode Screen Shot 2020-09-15 at 12 31 55 PM

To reproduce

  1. Use a light theme (e.g. Storefront with no customization) and turn off checkout block Dark mode inputs option.
  2. View checkout block on front end.
  3. Click on country or state/region dropdown.

Expected: black text on white background, consistent with other inputs and theme.

Actual: dropdown uses dark grey text on black background.

Enviroment

Desktop (please complete the following information):

``` ### WordPress Environment ### WordPress address (URL): https://ephemeral-haszari-20200826.atomicsites.blog Site address (URL): https://ephemeral-haszari-20200826.atomicsites.blog WC Version: 4.5.2 REST API Version: ✔ 4.5.2 WC Blocks Version: ✔ 3.3.0 Action Scheduler Version: ✔ 3.1.6 WC Admin Version: ✔ 1.5.0 Log Directory Writable: ✔ WP Version: ❌ 5.5 - There is a newer version of WordPress available (5.5.1) WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: ✔ ### Server Environment ### Server Info: nginx PHP Version: 7.4.10 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 7.72.0 OpenSSL/1.1.0l SUHOSIN Installed: – MySQL Version: 5.5.5-10.3.21-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 4.5.2 WC Database Prefix: wp_ Total Database Size: 4.53MB Database Data Size: 2.85MB Database Index Size: 1.68MB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.16MB + Index: 0.14MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.11MB + Index: 0.09MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.05MB + Index: 0.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 1.11MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 0.23MB + Index: 0.19MB + Engine InnoDB wp_posts: Data: 0.33MB + Index: 0.06MB + Engine InnoDB wp_taxjar_record_queue: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_square_customers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB ### Post Type Counts ### attachment: 23 nav_menu_item: 9 page: 10 post: 4 product: 18 product_variation: 7 revision: 56 shop_coupon: 1 shop_order: 26 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (6) ### Akismet Anti-Spam: by Automattic – 4.1.6 Jetpack by WordPress.com: by Automattic – 8.9 Mailchimp for WooCommerce: by Mailchimp – 2.4.5 – Installed version not tested with active version of WooCommerce 4.5.2 WooCommerce Stripe Gateway: by WooCommerce – 4.5.2 – Installed version not tested with active version of WooCommerce 4.5.2 WooCommerce Blocks: by Automattic – 3.4.0-dev WooCommerce: by Automattic – 4.5.2 ### Inactive Plugins (10) ### Change wp-admin login: by Nuno Morais Sarmento – 1.0.0 Facebook for WooCommerce: by Facebook – 2.0.1 – Installed version not tested with active version of WooCommerce 4.5.2 Klarna Checkout for WooCommerce: by Krokedil – 2.2.0 – Installed version not tested with active version of WooCommerce 4.5.2 Klarna Payments for WooCommerce: by krokedil klarna automattic – 2.1.2 – Installed version not tested with active version of WooCommerce 4.5.2 Show Hooks: by rafiq91 – 0.1.2 TaxJar - Sales Tax Automation for WooCommerce: by TaxJar – 3.2.2 – Installed version not tested with active version of WooCommerce 4.5.2 WooCommerce Australia Post Shipping: by WooCommerce – 2.4.26 – Installed version not tested with active version of WooCommerce 4.5.2 WooCommerce Services: by Automattic – 1.24.2 – Installed version not tested with active version of WooCommerce 4.5.2 WooCommerce Square: by WooCommerce – 2.2.1 WP Inspect: by @explodybits – 1.0.0 ### Dropin Plugins (2) ### advanced-cache.php: advanced-cache.php object-cache.php: Memcached ### Must Use Plugins (1) ### WP.com Site Helper: by – ### Settings ### API Enabled: – Force SSL: – Currency: AUD ($) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: ✔ ### WC Pages ### Shop base: #6 - /shop/ Cart: ❌ Page does not contain the shortcode. Checkout: ❌ Page does not contain the shortcode. My account: #9 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 2.7.0 Author URL: https://woocommerce.com/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### Action Scheduler ### Complete: 383 Oldest: 2020-09-08 02:49:00 +0000 Newest: 2020-09-15 00:23:56 +0000 Pending: 3 Oldest: 2020-09-15 00:37:58 +0000 Newest: 2020-09-15 22:57:58 +0000 ```
nerrad commented 4 years ago

Hmm, I'm not able to reproduce this in testing on Storefront 2.6.0 (I see you're using Storefront 2.7.0) - I wonder if this may be something related to theme version maybe (although I do know you mentioned you see this in all themes.

nerrad commented 4 years ago

I am seeing this on my other test site where I'm using a different background color and Storefront 2.7.0.

nerrad commented 4 years ago

I can reproduce this on the twenty twenty theme too.

nerrad commented 4 years ago

Since 3.4.0 is going into WooCommerce core, I think this might be worth doing a 3.4.1 release for?