diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index fc0bbd934..8921f75bf 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -14,8 +14,11 @@ import FloatingViewer from 'component/floatingViewer'; import { withRouter } from 'react-router'; import usePrevious from 'effects/use-previous'; import Nag from 'component/common/nag'; +import Button from 'component/button'; +import I18nMessage from 'component/i18nMessage'; import { rewards as REWARDS } from 'lbryinc'; import usePersistedState from 'effects/use-persisted-state'; +import useIsMobile from 'effects/use-is-mobile'; // @if TARGET='web' import OpenInAppLink from 'component/openInAppLink'; import YoutubeWelcome from 'component/youtubeWelcome'; @@ -90,6 +93,7 @@ function App(props: Props) { const previousUserId = usePrevious(userId); const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail); const previousRewardApproved = usePrevious(isRewardApproved); + const isMobile = useIsMobile(); // @if TARGET='web' const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true); // @endif @@ -246,12 +250,33 @@ function App(props: Props) { {/* @endif */} {/* @if TARGET='web' */} {showAnalyticsNag && ( - + + {isMobile ? ( + + ) : ( + + ), + }} + > + lbry.tv collects usage information for itself and third parties (%more_information%). Want control + over this and more? + + } + actionText={__('Get The App')} + href="https://lbry.com/get" + onClose={handleAnalyticsDismiss} + /> + )} + )} {/* @endif */} {isEnhancedLayout && } diff --git a/ui/component/common/nag.jsx b/ui/component/common/nag.jsx index ed2d8f7b5..4506b8b6a 100644 --- a/ui/component/common/nag.jsx +++ b/ui/component/common/nag.jsx @@ -1,10 +1,11 @@ // @flow +import type { Node } from 'react'; import * as ICONS from 'constants/icons'; import React from 'react'; import Button from 'component/button'; type Props = { - message: string, + message: string | Node, actionText: string, href?: string, onClick?: () => void, diff --git a/ui/scss/component/nag.scss b/ui/scss/component/nag.scss index 9e926ac0c..5dba182e3 100644 --- a/ui/scss/component/nag.scss +++ b/ui/scss/component/nag.scss @@ -7,6 +7,12 @@ color: var(--color-white); font-weight: var(--font-weight-bold); text-align: center; + + .button--link { + font-weight: var(--font-weight-bold); + color: var(--color-white); + text-decoration: underline; + } } .nag__button {