From 2f471cc2b21b00f81e50b99966d9237ee8aeeee0 Mon Sep 17 00:00:00 2001
From: Abhishek Nandwana <nandwana@fb.com>
Date: Thu, 4 Nov 2021 14:00:00 -0700
Subject: [PATCH] Visual changes to let the user easily know what release
 channel they are using

Summary:
1. Added a text label similar to the launch screen that tells user the release channel they are using.
2. Show a different coloured logo when the user is using the "Insiders" channel.

I have tried to keep the style as similar to the launch screen as possible for consistency.

Reviewed By: passy

Differential Revision: D32169268

fbshipit-source-id: f119a379fce983d9df765ede94148a4deaa31c9c
---
 .../app/src/sandy-chrome/WelcomeScreen.tsx    | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx
index cc02c825e..1aeae2b01 100644
--- a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx
+++ b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx
@@ -21,8 +21,10 @@ import {Layout, theme, Tracked, TrackingScope} from 'flipper-plugin';
 const {Text, Title} = Typography;
 
 import constants from '../fb-stubs/constants';
+import config from '../fb-stubs/config';
 import isProduction from '../utils/isProduction';
 import {getAppVersion} from '../utils/info';
+import ReleaseChannel from '../ReleaseChannel';
 import {getFlipperLib} from 'flipper-plugin';
 
 const RowContainer = styled(FlexRow)({
@@ -136,14 +138,41 @@ export function WelcomeScreenStaticView() {
 }
 
 function WelcomeScreenContent() {
+  function isInsidersChannel() {
+    return config.getReleaseChannel() === ReleaseChannel.INSIDERS;
+  }
+
   return (
     <TrackingScope scope="welcomescreen">
       <Space
         direction="vertical"
         size="middle"
         style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}>
-        <Image width={125} height={125} src="./icon.png" preview={false} />
+        <Image
+          style={{
+            filter: isInsidersChannel() ? 'hue-rotate(230deg)' : 'none',
+          }}
+          width={125}
+          height={125}
+          src="./icon.png"
+          preview={false}
+        />
         <Title level={1}>Welcome to Flipper</Title>
+        <Text>
+          Using release channel{' '}
+          <code
+            style={{
+              margin: 0,
+              padding: 0,
+              border: 'none',
+              background: 'none',
+              color: isInsidersChannel() ? 'rgb(62, 124, 66)' : '#000',
+              textTransform: 'capitalize',
+              fontWeight: isInsidersChannel() ? 'bold' : 'normal',
+            }}>
+            {config.getReleaseChannel()}
+          </code>
+        </Text>
         <Text style={{color: theme.textColorPlaceholder}}>
           {isProduction() ? `Version ${getAppVersion()}` : 'Development Mode'}
         </Text>