Files
flipper/desktop/plugins/public/hermesdebuggerrn/Banner.tsx
Michel Weststrate 5dbd3bd414 Make getFlipperLib generally available, and use it to decouple opening links from Electron
Summary:
This stack reduces our direct dependency on Electron, for example by exposing our own API to open links.

Also exposing `getFlipperLib` as API from `flipper-plugin`, so that these utility methods are available outside plugin contexts as well.

Reviewed By: timur-valiev

Differential Revision: D29661689

fbshipit-source-id: 0c0523326eeb0d9d8fbe3e03c4609327bb53596b
2021-07-15 01:54:20 -07:00

73 lines
1.6 KiB
TypeScript

/**
* 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 React from 'react';
import {styled, colors, FlexRow, Text, GK} from 'flipper';
import {Typography} from 'antd';
const BannerContainer = styled(FlexRow)({
height: '30px',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2bb673', // Hermes green.
});
const BannerText = styled(Text)({
color: colors.white,
fontSize: 14,
lineHeight: '20px',
});
const BannerLink = styled(CustomLink)({
color: colors.white,
textDecoration: 'underline',
'&:hover': {
cursor: 'pointer',
color: '#303846',
},
});
function CustomLink(props: {
href: string;
className?: string;
children?: React.ReactNode;
style?: React.CSSProperties;
}) {
return (
<Typography.Link
className={props.className}
href={props.href}
style={props.style}>
{props.children || props.href}
</Typography.Link>
);
}
export const isBannerEnabled: () => boolean = function () {
return GK.get('flipper_plugin_hermes_debugger_survey');
};
export default function Banner() {
if (!GK.get('flipper_plugin_hermes_debugger_survey')) {
return null;
}
return (
<BannerContainer>
<BannerText>
Help us improve your debugging experience with this{' '}
<BannerLink href="https://fburl.com/hermessurvey">
single page survey
</BannerLink>
!
</BannerText>
</BannerContainer>
);
}