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 ? (
+
+ ) : 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';