diff --git a/lib/app.tsx b/lib/app.tsx index 423fe7633..c8a50736f 100644 --- a/lib/app.tsx +++ b/lib/app.tsx @@ -9,6 +9,7 @@ import browserShell from './browser-shell'; import NoteInfo from './note-info'; import NavigationBar from './navigation-bar'; import AppLayout from './app-layout'; +import BetaBar from './components/beta-bar'; import DevBadge from './components/dev-badge'; import DialogRenderer from './dialog-renderer'; import exportZipArchive from './utils/export'; @@ -452,6 +453,7 @@ export const App = connect( return (
{isDevConfig && } +
{showNavigation && } { + try { + const stored = localStorage.getItem('betaBannerDismissedAt'); + const dismissedAt = stored ? parseInt(stored, 10) : -Infinity; + + return ( + isNaN(dismissedAt) || Date.now() - dismissedAt > 7 * 24 * 60 * 60 * 1000 + ); + } catch (e) { + return true; + } +}; + +const storeOptOut = () => { + try { + localStorage.setItem('betaBannerDismissedAt', Date.now().toString()); + } catch (e) { + // pass + } +}; + +const BetaBar = () => { + const [isVisible, setIsVisible] = useState(loadOptOut()); + const dismissBanner = () => { + storeOptOut(); + setIsVisible(false); + }; + + return !isElectron && isVisible ? ( +
+ You‘re invited to try Simplenote Beta. + Try it now. + + + +
+ ) : null; +}; + +export default BetaBar; diff --git a/lib/components/beta-bar/style.scss b/lib/components/beta-bar/style.scss new file mode 100644 index 000000000..301509b69 --- /dev/null +++ b/lib/components/beta-bar/style.scss @@ -0,0 +1,23 @@ +.beta-bar { + position: absolute; + width: 100%; + height: 36px; + bottom: 0; + box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2); + background-color: #3d3f41; + color: #fff; + text-align: center; + line-height: 32px; + z-index: 1; + + a { + color: #fff !important; + margin-left: 5px; + } + svg { + position: absolute; + right: 12px; + bottom: 7px; + cursor: pointer; + } +} diff --git a/scss/_components.scss b/scss/_components.scss index 2cb042e89..05f514977 100644 --- a/scss/_components.scss +++ b/scss/_components.scss @@ -1,6 +1,7 @@ @import 'app-layout/style'; @import 'auth/style'; @import 'components/checkbox/style'; +@import 'components/beta-bar/style'; @import 'components/dev-badge/style'; @import 'components/panel-title/style'; @import 'components/progress-bar/style';