Dark theme causes filters to look disabled

srirambv commented 4 months ago

Description

Steps to Reproduce

Set browser theme to dark
Open Wallet and click on portfolio filters
Select any dropdown, looks disabled but can still select to change filters

Actual result:

Expected result:

Better looking UI on dark theme

Reproduces how often:

Easy

Brave version (brave://version info)

All

Version/Channel Information:

Can you reproduce this issue with the current release? Yes
Can you reproduce this issue with the beta channel? Yes
Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

Does the issue resolve itself when disabling Brave Shields? NA
Does the issue resolve itself when disabling Brave Rewards? NA
Is the issue reproducible on the latest version of Chrome? NA

Miscellaneous Information:

cc: @kleantzogu @Douglashdaniel @josheleonard

kleantzogu commented 4 months ago

Here is how it should look: Figma Link: https://www.figma.com/file/muVcmcu4RFNu0LkXe9VRDl/Wallet-2.0?type=design&node-id=16059-210815&mode=design&t=DyKrCOALIVQlDYw5-4

Screenshot: Filters droprown

Douglashdaniel commented 4 months ago

I think this is a leo issue since this is using the Dropdown component directly from @brave/leo/react/dropdown. cc: @fallaciousreasoning @petemill

fallaciousreasoning commented 3 months ago

This looks like it could be using the colors from the light theme - if you add a data-theme="dark" to the body (or any parent element of the dropdown) does it look better?

This is how the component should look in dark mode:

srirambv commented 2 months ago

Verification passed on

Brave	1.67.92 Chromium: 125.0.6422.76 (Official Build) beta (64-bit)
Revision	d751d2edf40b466560aaeecc4c4919041f41c20d
OS	Windows 11 Version 23H2 (Build 22631.3593)

Verified steps from brave/brave-core#23195
Verified Portfolio filters are properly visible when browser is set to Dark theme

https://github.com/brave/brave-browser/assets/17010094/6a59d26e-162d-43b6-a037-7e4cd5ea51ea

brave / brave-browser