From 1fef8448784d522c4bce09177c0e08471d1a1e75 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Mon, 24 Jan 2022 06:08:28 -0800
Subject: [PATCH] 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
---
 .../src/sandy-chrome/WelcomeScreen.tsx             | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
index ec3b4d886..29d839751 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
@@ -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>