fix ReleaseChannel info in WelcomeScreen in dark mode (#3328)
Summary: This PR fixes the color of ReleaseChannel information in the WelcomeScreen, when user uses dark mode. I have decided to switch to `textColorSecondary` instead of `textColorPrimary` to emphasise a bit more the information, but I can change it to the primary color if you think it will fit there better. Also the font size has been adjusted to match the paragraph font size. ## Changelog * fix ReleaseChannel info in WelcomeScreen in dark mode Pull Request resolved: https://github.com/facebook/flipper/pull/3328 Test Plan: The change has been testes by running the desktop Flipper app locally from source. ## Preview #### Dark Mode (before & after) <img width="333" alt="Screenshot 2022-01-23 at 15 14 12" align="left" src="https://user-images.githubusercontent.com/719641/150682951-6e256054-d8d9-4293-8f76-4d67b654482f.png"> <img width="333" alt="Screenshot 2022-01-23 at 15 09 58" src="https://user-images.githubusercontent.com/719641/150682954-942eda7a-443d-4ca1-be51-b6d0036548cd.png"> #### Light Mode <img width="333" alt="Screenshot 2022-01-23 at 15 22 42" src="https://user-images.githubusercontent.com/719641/150683094-62983788-646e-4745-b9c0-3c7f7bea9787.png"> Reviewed By: aigoncharov Differential Revision: D33738596 Pulled By: lblasa fbshipit-source-id: 2fdd18871fbf9d1c215b58173932d57d5731948a
This commit is contained in:
committed by
Facebook GitHub Bot
parent
f1b83a96fd
commit
1fef844878
@@ -141,9 +141,8 @@ export function WelcomeScreenStaticView() {
|
||||
}
|
||||
|
||||
function WelcomeScreenContent() {
|
||||
function isInsidersChannel() {
|
||||
return config.getReleaseChannel() === ReleaseChannel.INSIDERS;
|
||||
}
|
||||
const isInsidersChannel =
|
||||
config.getReleaseChannel() === ReleaseChannel.INSIDERS;
|
||||
|
||||
return (
|
||||
<TrackingScope scope="welcomescreen">
|
||||
@@ -153,7 +152,7 @@ function WelcomeScreenContent() {
|
||||
style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}>
|
||||
<Image
|
||||
style={{
|
||||
filter: isInsidersChannel() ? 'hue-rotate(230deg)' : 'none',
|
||||
filter: isInsidersChannel ? 'hue-rotate(230deg)' : 'none',
|
||||
}}
|
||||
width={125}
|
||||
height={125}
|
||||
@@ -169,9 +168,12 @@ function WelcomeScreenContent() {
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
color: isInsidersChannel() ? 'rgb(62, 124, 66)' : '#000',
|
||||
color: isInsidersChannel
|
||||
? 'rgb(62, 124, 66)'
|
||||
: theme.textColorSecondary,
|
||||
textTransform: 'capitalize',
|
||||
fontWeight: isInsidersChannel() ? 'bold' : 'normal',
|
||||
fontSize: theme.fontSize.default,
|
||||
fontWeight: isInsidersChannel ? theme.bold : 'normal',
|
||||
}}>
|
||||
{config.getReleaseChannel()}
|
||||
</code>
|
||||
|
||||
Reference in New Issue
Block a user