diff --git a/package-lock.json b/package-lock.json
index d2cbc824..1bd394cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
"@hotjar/browser": "^1.0.6",
"@ibm/plex": "^6.1.1",
"@mdx-js/react": "^2.3.0",
- "@onflow/cadence-language-server": "^0.33.3",
+ "@onflow/cadence-language-server": "0.33.3",
"@reach/router": "^1.3.4",
"@sentry/integrations": "^7.44.0",
"@sentry/react": "^7.44.0",
diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index efb2a91a..10b18a04 100644
--- a/src/components/Editor/index.tsx
+++ b/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' ? (
) : (
-
+
)}
{
+ 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 (
+
+ ⚠ Upgrade to Cadence 1.0
+
+ 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.
+
+
+ Please visit our migration guide here:
+
+ https://developers.flow.com/build/cadence-migration-guide
+
+
+
+ );
+};
+
+export default Announcement;
diff --git a/src/components/TopNav/Header.tsx b/src/components/TopNav/Header.tsx
new file mode 100644
index 00000000..f9086ed5
--- /dev/null
+++ b/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 (
+
+ {!isMobile() && isAnnouncementVisible && }
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/TopNav/index.tsx b/src/components/TopNav/index.tsx
index c49577f9..a31db2a9 100644
--- a/src/components/TopNav/index.tsx
+++ b/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}`,
diff --git a/src/containers/Playground/EditorLayout.tsx b/src/containers/Playground/EditorLayout.tsx
index e5f2dd97..2e3c1a4a 100644
--- a/src/containers/Playground/EditorLayout.tsx
+++ b/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}
/>
>
);
diff --git a/src/containers/Playground/index.tsx b/src/containers/Playground/index.tsx
index 7abe60f4..ebdc0829 100644
--- a/src/containers/Playground/index.tsx
+++ b/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 = () => {