Clean up employee warning

Summary: Replaced in-your-face warning with a but more subtle one. Means also less usage of component lib.

Reviewed By: nikoant

Differential Revision: D25944965

fbshipit-source-id: 02a66ff96df2ab8b648f8b8cbeb30d025adfd5a8

desktop/app/src/chrome/AppWrapper.tsx

@@ -8,35 +8,35 @@
  */
 
 import React from 'react';
-import {useState, useEffect} from 'react';
+import {useEffect} from 'react';
 import LegacyApp from './LegacyApp';
-import WarningEmployee from './WarningEmployee';
 import fbConfig from '../fb-stubs/config';
 import {isFBEmployee} from '../utils/fbEmployee';
 import {Logger} from '../fb-interfaces/Logger';
 import isSandyEnabled from '../utils/isSandyEnabled';
 import {SandyApp} from '../sandy-chrome/SandyApp';
+import {notification} from 'antd';
 
 type Props = {logger: Logger};
 
 export default function App(props: Props) {
-  const [warnEmployee, setWarnEmployee] = useState(false);
   useEffect(() => {
     if (fbConfig.warnFBEmployees) {
-      isFBEmployee().then((isEmployee) => {
+      isFBEmployee().then(() => {
-        setWarnEmployee(isEmployee);
+        notification.warning({
+          placement: 'bottomLeft',
+          message: 'Please use Flipper@FB',
+          description: (
+            <>
+              You are using the open-source version of Flipper. Install the
+              internal build from Managed Software Center to get access to more
+              plugins.
+            </>
+          ),
+          duration: null,
+        });
       });
     }
   }, []);
-  return warnEmployee ? (
+  return isSandyEnabled() ? <SandyApp /> : <LegacyApp logger={props.logger} />;
-    <WarningEmployee
-      onClick={() => {
-        setWarnEmployee(false);
-      }}
-    />
-  ) : isSandyEnabled() ? (
-    <SandyApp />
-  ) : (
-    <LegacyApp logger={props.logger} />
-  );
 }

desktop/app/src/chrome/WarningEmployee.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-import {styled, FlexColumn, Text, Button, colors} from '../ui';
-
-import React from 'react';
-
-const Container = styled(FlexColumn)({
-  height: '100%',
-  width: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: colors.light02,
-});
-
-const Box = styled(FlexColumn)({
-  justifyContent: 'center',
-  alignItems: 'center',
-  background: colors.white,
-  borderRadius: 10,
-  boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
-  paddingBottom: 16,
-});
-
-const Warning = styled(Text)({
-  fontSize: 24,
-  fontWeight: 300,
-  textAlign: 'center',
-  margin: 16,
-});
-
-const AckButton = styled(Button)({
-  type: 'warning',
-});
-
-export default function WarningEmployee(props: {
-  onClick: (event: React.MouseEvent) => any;
-}) {
-  return (
-    <Container>
-      <Box>
-        <Warning>
-          You are using the open-source version of Flipper. Install the internal
-          build from Managed Software Center to get access to more plugins.
-        </Warning>
-        <AckButton onClick={props.onClick}>Okay</AckButton>
-      </Box>
-    </Container>
-  );
-}

desktop/themes/typography.less

@@ -77,6 +77,16 @@
 @modal-header-title-font-size: @heading-2-size;
 @modal-header-title-line-height: @heading-2-line-height;
 
+// Notification overrides
+// Inverse notification colors
+.ant-notification-notice-message {
+  color: @background-default;
+}
+.ant-notification-notice {
+  background: @text-color-primary;
+  color: @background-default;
+}
+
 .flipperlegacy_design {
   // Prevents ANT breaking global styles implicitly used by old Flipper design
   line-height: 1;