Merge pull request #4020 from urbit/mp/landscape/breach

landscape: add breach notification

pkg/interface/src/views/App.js

@@ -14,6 +14,8 @@ import './css/fonts.css';
 import light from './themes/light';
 import dark from './themes/old-dark';
 
+import { Text, Anchor, Row } from '@tlon/indigo-react';
+
 import { Content } from './landscape/components/Content';
 import StatusBar from './components/StatusBar';
 import Omnibox from './components/leap/Omnibox';
@@ -25,6 +27,7 @@ import GlobalApi from '~/logic/api/global';
 import { uxToHex } from '~/logic/lib/util';
 import { foregroundFromBackground } from '~/logic/lib/sigil';
 
+
 const Root = styled.div`
   font-family: ${p => p.theme.fonts.sans};
   height: 100%;
@@ -128,6 +131,9 @@ class App extends React.Component {
     const notificationsCount = state.notificationsCount || 0;
     const doNotDisturb = state.doNotDisturb || false;
 
+    const showBanner = localStorage.getItem("2020BreachBanner") || "flex";
+    let banner = null;
+
     return (
       <ThemeProvider theme={theme}>
         <Helmet>
@@ -136,6 +142,21 @@ class App extends React.Component {
             : null}
         </Helmet>
         <Root background={background}>
+          <Row
+            ref={e => banner = e}
+            display={showBanner}
+            justifyContent="space-between"
+            width='100%'
+            p='2'
+            backgroundColor='yellow'>
+          <Text color='#000000'>
+            A network-wide breach is scheduled for early December 2020. Please visit <Anchor target="_blank" href="https://urbit.org/breach" color='inherit'>urbit.org/breach</Anchor> for more information.
+              </Text>
+            <Text cursor='pointer' fontWeight='500' onClick={() => {
+              banner.style.displaydisplay = "none";
+              localStorage.setItem("2020BreachBanner", "none");
+            }}>Dismiss</Text>
+          </Row>
           <Router>
             <ErrorBoundary>
               <StatusBarWithRouter