jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix ReleaseChannel info in WelcomeScreen in dark mode (#3328)

Browse Source 
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:
Simek
2022-01-24 06:08:28 -08:00
committed by Facebook GitHub Bot
parent f1b83a96fd
commit 1fef844878
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
View File

@@ -141,9 +141,8 @@ export function WelcomeScreenStaticView() {
} }
function WelcomeScreenContent() { function WelcomeScreenContent() {
function isInsidersChannel() { const isInsidersChannel =
return config.getReleaseChannel() === ReleaseChannel.INSIDERS; config.getReleaseChannel() === ReleaseChannel.INSIDERS;
}
return ( return (
<TrackingScope scope="welcomescreen"> <TrackingScope scope="welcomescreen">
@@ -153,7 +152,7 @@ function WelcomeScreenContent() {
style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}> style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}>
<Image <Image
style={{ style={{
filter: isInsidersChannel() ? 'hue-rotate(230deg)' : 'none', filter: isInsidersChannel ? 'hue-rotate(230deg)' : 'none',
}} }}
width={125} width={125}
height={125} height={125}
@@ -169,9 +168,12 @@ function WelcomeScreenContent() {
padding: 0, padding: 0,
border: 'none', border: 'none',
background: 'none', background: 'none',
color: isInsidersChannel() ? 'rgb(62, 124, 66)' : '#000', color: isInsidersChannel
? 'rgb(62, 124, 66)'
: theme.textColorSecondary,
textTransform: 'capitalize', textTransform: 'capitalize',
fontWeight: isInsidersChannel() ? 'bold' : 'normal', fontSize: theme.fontSize.default,
fontWeight: isInsidersChannel ? theme.bold : 'normal',
}}> }}>
{config.getReleaseChannel()} {config.getReleaseChannel()}
</code> </code>