diff --git a/desktop/app/src/chrome/AppWrapper.tsx b/desktop/app/src/chrome/AppWrapper.tsx index 75b592cc6..aff7aae53 100644 --- a/desktop/app/src/chrome/AppWrapper.tsx +++ b/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) => { - setWarnEmployee(isEmployee); + isFBEmployee().then(() => { + 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 ? ( - { - setWarnEmployee(false); - }} - /> - ) : isSandyEnabled() ? ( - - ) : ( - - ); + return isSandyEnabled() ? : ; } diff --git a/desktop/app/src/chrome/WarningEmployee.tsx b/desktop/app/src/chrome/WarningEmployee.tsx deleted file mode 100644 index 59cd4b3bf..000000000 --- a/desktop/app/src/chrome/WarningEmployee.tsx +++ /dev/null @@ -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 ( - - - - You are using the open-source version of Flipper. Install the internal - build from Managed Software Center to get access to more plugins. - - Okay - - - ); -} diff --git a/desktop/themes/typography.less b/desktop/themes/typography.less index 4cb53b494..1c0d7f495 100644 --- a/desktop/themes/typography.less +++ b/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;