add upgrade cadence 1.0 banner

src/components/Editor/index.tsx

@@ -1,12 +1,12 @@
 import { Project } from 'api/apollo/generated/graphql';
 import CookieDetector from 'components/BrowserDetector';
 import FileExplorer from 'components/Editor/FileExplorer';
-import TopNav from 'components/TopNav';
 import UnsupportedMessage from 'components/UnsupportedBrowser';
 import { EditorContainer } from 'containers/Playground/components';
 import { ActiveEditor } from 'providers/Project';
 import React from 'react';
 import ErrorToastContainer from './ErrorToastContainer';
+import Header from 'components/TopNav/Header';
 
 const { detect } = require('detect-browser');
 const browser = detect();
@@ -17,6 +17,7 @@ type EditorContainerProps = {
   isLoading: boolean;
   project: Project;
   active: ActiveEditor;
+  isAnnouncementVisible: boolean;
 };
 
 const Editor = ({
@@ -25,13 +26,14 @@ const Editor = ({
   isLoading,
   project,
   active,
+  isAnnouncementVisible,
 }: EditorContainerProps) => {
   return (
     <>
       {browser && browser.name === 'safari' ? (
         <UnsupportedMessage />
       ) : (
-        <TopNav />
+        <Header isAnnouncementVisible={isAnnouncementVisible} />
       )}
       <CookieDetector />
       <FileExplorer

src/components/TopNav/Announcement.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { SXStyles } from 'src/types';
+import { Box, Flex, Link, useThemeUI } from 'theme-ui';
+
+const Announcement = () => {
+  const context = useThemeUI();
+  const { theme } = context;
+
+  const styles: SXStyles = {
+    root: {
+      backgroundColor: 'white',
+      flex: '1 1 auto',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      background: '#F27360',
+      width: '100%',
+      padding: '0.25rem 0 0.5rem',
+      height: '60px',
+      color: `${theme.colors.secondary}`,
+    },
+    message: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      textAlign: 'center',
+      color: `${theme.colors.secondary}`,
+      fontSize: '14px',
+      padding: '0.15rem',
+    },
+    devLink: {
+      textDecoration: 'underline',
+      color: `${theme.colors.secondary}`,
+    },
+  };
+
+  return (
+    <Flex sx={styles.root}>
+      <Box sx={styles.message}>⚠ Upgrade to Cadence 1.0</Box>
+      <Box sx={styles.message}>
+        The Crescendo network upgrade, including Cadence 1.0, is coming soon.
+        You most likely need to update all your contracts/transactions/scripts
+        to support this change.
+      </Box>
+      <Box sx={styles.message}>
+        Please visit our migration guide here:&nbsp;&nbsp;
+        <Link
+          sx={styles.devLink}
+          target="_blank"
+          href="https://developers.flow.com/build/cadence-migration-guide"
+          rel="noreferrer"
+          title="Report a Bug"
+        >
+          https://developers.flow.com/build/cadence-migration-guide
+        </Link>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Announcement;

src/components/TopNav/Header.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import AnnouncementBar from './Announcement';
+import TopNav from '.';
+import { isMobile } from '../Editor/CadenceEditor/ControlPanel/utils';
+
+const headerStyle: React.CSSProperties = {
+  display: 'flex',
+  gridArea: 'header',
+  flexDirection: 'column' as 'column',
+  alignItems: 'center',
+  justifyContent: 'left',
+};
+
+const Header = ({
+  isAnnouncementVisible,
+}: {
+  isAnnouncementVisible: boolean;
+}) => {
+  return (
+    <header style={headerStyle}>
+      {!isMobile() && isAnnouncementVisible && <AnnouncementBar />}
+      <TopNav />
+    </header>
+  );
+};
+
+export default Header;

src/components/TopNav/index.tsx

@@ -33,13 +33,13 @@ const TopNav = () => {
   const styles: SXStyles = {
     root: {
       display: 'flex',
-      gridArea: 'header',
       flex: '1 1 auto',
       alignItems: 'center',
       justifyContent: 'space-between',
       paddingLeft: '1em',
       paddingRight: '1em',
       background: `${theme.colors.primary}`,
+      width: '100%',
     },
     mobile: {
       background: `${theme.colors.secondaryBackground}`,

src/containers/Playground/EditorLayout.tsx

@@ -7,11 +7,13 @@ import Editor from '../../components/Editor/index';
 type EditorLayoutProps = {
   isExplorerCollapsed: boolean;
   toggleExplorer: () => void;
+  isAnnouncementVisible: boolean;
 };
 
 const EditorLayout = ({
   isExplorerCollapsed,
   toggleExplorer,
+  isAnnouncementVisible,
 }: EditorLayoutProps) => {
   const { project, isLoading, active } = useProject();
 
@@ -54,6 +56,7 @@ const EditorLayout = ({
         isLoading={isLoading}
         project={project}
         active={active}
+        isAnnouncementVisible={isAnnouncementVisible}
       />
     </>
   );

src/containers/Playground/index.tsx

@@ -37,13 +37,15 @@ const closeLeftSidebarButtonStyle: CSSProperties = {
   zIndex: 10,
 };
 
+const isAnnouncementVisible = true;
+
 const getBaseStyles = (
   showProjectsSidebar: boolean,
   isExplorerCollapsed: boolean,
 ): ThemeUICSSObject => {
   const fileExplorerWidth = isExplorerCollapsed
     ? isMobile()
-      ? '30px'
+      ? '50px'
       : '65px'
     : '244px';
 
@@ -57,7 +59,9 @@ const getBaseStyles = (
     display: 'grid',
     gridTemplateAreas: "'header header' 'sidebar main'",
     gridTemplateColumns: `[sidebar] ${fileExplorerWidth} [main] auto`,
-    gridTemplateRows: ['40px auto', '50px auto'],
+    gridTemplateRows: isAnnouncementVisible
+      ? ['40px auto', '105px auto']
+      : ['40px auto', '50px auto'],
     overflow: 'hidden',
     filter: showProjectsSidebar ? 'blur(1px)' : 'none',
   };
@@ -115,6 +119,7 @@ const Content = () => {
           <EditorLayout
             isExplorerCollapsed={isExplorerCollapsed}
             toggleExplorer={toggleExplorer}
+            isAnnouncementVisible={isAnnouncementVisible}
           />
         </Box>
       </motion.div>