fix: fallback screen settings button icon rendering with the right color #7764
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 5 Skipped Deployments
|
| @@ -27,6 +26,9 @@ const FallbackCameraBody: React.FC<Props> = ({ | |||
| }: Props) => { | |||
| const { colors } = useTheme(); | |||
|
|
|||
| // benefit from component scope colors variable for IconSettings | |||
| const IconSettings = () => <Icon name="settings" size={16} color={colors.constant.white} /> | |||
There was a problem hiding this comment.
On dark mode, the icon should be black as the background is white, I think that we have some colors for that in the theme, could you find the one we need, please?
There was a problem hiding this comment.
good point, i will figure it out
There was a problem hiding this comment.
@KVNLS in the dark mode (i used the ForceTheme container over the Fallback to simulate it) the button's background is still white , so making the icon white will make it invisible.
There was a problem hiding this comment.
you can use colors.neutral.c00 or colors.neutral.c100 :) It will works for both Theme
There was a problem hiding this comment.
it will be like this in the dark mode
There was a problem hiding this comment.
But you didn't changed const color ?
| @@ -27,6 +26,9 @@ const FallbackCameraBody: React.FC<Props> = ({ | |||
| }: Props) => { | |||
| const { colors } = useTheme(); | |||
|
|
|||
| // benefit from component scope colors variable for IconSettings | |||
There was a problem hiding this comment.
I understand why you added the comment but I'm not convinced that we need it for this.
There was a problem hiding this comment.
so i delete the comment here?
| @@ -27,6 +26,9 @@ const FallbackCameraBody: React.FC<Props> = ({ | |||
| }: Props) => { | |||
| const { colors } = useTheme(); | |||
|
|
|||
| // benefit from component scope colors variable for IconSettings | |||
| const IconSettings = () => <Icon name="settings" size={16} color={colors.constant.white} /> | |||
|
|
|||
There was a problem hiding this comment.
Could you fix the prettier formatting, please?
There was a problem hiding this comment.
yep sure, i'm using the default prettier config in my VSCode.
There was a problem hiding this comment.
can you try using neutral.c100 please? :) Instead of using osTheme
if neutral.c100 not working try neutral.c00 I don't remember de right one
it will convert automatically according to the current theme
There was a problem hiding this comment.
sure ! can you please send me (if exists) theming documentation or color palette docs/ref ?
There was a problem hiding this comment.
@mcayuelas-ledger done ✅
themooneer
force-pushed
the
bugfix/LIVE-13351
branch
from
718eee9
to
bdbf7ea
Compare
| @@ -27,6 +26,9 @@ const FallbackCameraBody: React.FC<Props> = ({ | |||
| }: Props) => { | |||
| const { colors } = useTheme(); | |||
|
|
|||
| // benefit from component scope colors variable for IconSettings | |||
| const IconSettings = () => <Icon name="settings" size={16} color={colors.constant.white} /> | |||
|
|
|||
There was a problem hiding this comment.
can you try using neutral.c100 please? :) Instead of using osTheme
if neutral.c100 not working try neutral.c00 I don't remember de right one
it will convert automatically according to the current theme
themooneer
force-pushed
the
bugfix/LIVE-13351
branch
from
bdbf7ea
to
e805a7e
Compare
✅ Checklist
npx changesetwas attached.📝 Description
Fix setting icon rendering color
Before ❌
After ✅
❓ Context
🧐 Checklist for the PR Reviewers