launch: banner is dismissable
@@ -14,7 +14,7 @@ import './css/fonts.css';
import light from './themes/light';
import dark from './themes/old-dark';
-import { Text, Anchor } from '@tlon/indigo-react';
+import { Text, Anchor, Row } from '@tlon/indigo-react';
import { Content } from './landscape/components/Content';
import StatusBar from './components/StatusBar';
@@ -27,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%;
@@ -130,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>
@@ -138,7 +142,21 @@ class App extends React.Component {
: null}
</Helmet>
<Root background={background}>
- <Text p='2' backgroundColor='yellow' 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>
+ <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
