From 734eb0bb571c8b7e6dd11ecd996b24e0baea87c1 Mon Sep 17 00:00:00 2001 From: Tom Haile Date: Thu, 18 Jan 2024 11:09:31 -0600 Subject: [PATCH 1/5] add upgrade cadence 1.0 banner --- package-lock.json | 2 +- src/components/Editor/index.tsx | 7 ++- src/components/TopNav/Announcement.tsx | 58 ++++++++++++++++++++++ src/components/TopNav/Header.tsx | 24 +++++++++ src/components/TopNav/index.tsx | 2 +- src/containers/Playground/EditorLayout.tsx | 3 ++ src/containers/Playground/index.tsx | 7 ++- 7 files changed, 97 insertions(+), 6 deletions(-) create mode 100644 src/components/TopNav/Announcement.tsx create mode 100644 src/components/TopNav/Header.tsx 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..7113bf50 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,15 @@ const Editor = ({ isLoading, project, active, + isAnnouncementVisible, }: EditorContainerProps) => { + return ( <> {browser && browser.name === 'safari' ? ( ) : ( - +
)} { + + const styles: SXStyles = { + root: { + backgroundColor: 'white', + flex: '1 1 auto', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-between', + background: '#F27360', + width: '100%', + padding: '0.5rem', + height: '60px' + }, + message: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', + color: '#585F71', + fontSize: '14px', + padding: '0.15rem', + }, + devLink: { + textDecoration: 'underline', + color: '#585F71', + }, + }; + + 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..33a2ac77 --- /dev/null +++ b/src/components/TopNav/Header.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import AnnouncementBar from './Announcement'; +import TopNav from '.'; +import { isMobile } from '../Editor/CadenceEditor/ControlPanel/utils'; + +const headerStyle = { + display: 'flex', + gridArea: 'header', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'left', +}; + +const Header = ({isAnnouncementVisible}: {isAnnouncementVisible: boolean}) => { + return ( +
+ {!isMobile() && isAnnouncementVisible && } + + +
+ ); +}; + +export default Header; \ No newline at end of file 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..c7e256b9 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,7 @@ 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 +117,7 @@ const Content = () => { From a7d16cac540e0e99a5995c51c8c6ad20a85fa004 Mon Sep 17 00:00:00 2001 From: Tom Haile Date: Thu, 18 Jan 2024 11:20:16 -0600 Subject: [PATCH 2/5] use correct text color for the active theme --- src/components/TopNav/Announcement.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/TopNav/Announcement.tsx b/src/components/TopNav/Announcement.tsx index e9d54d38..7b0bf6eb 100644 --- a/src/components/TopNav/Announcement.tsx +++ b/src/components/TopNav/Announcement.tsx @@ -1,9 +1,11 @@ import React from 'react'; import { SXStyles } from 'src/types'; -import { Box, Flex, Link } from 'theme-ui'; +import { Box, Flex, Link, useThemeUI } from 'theme-ui'; const Announcement = () => { - + const context = useThemeUI(); + const { theme } = context; + const styles: SXStyles = { root: { backgroundColor: 'white', @@ -14,20 +16,21 @@ const Announcement = () => { background: '#F27360', width: '100%', padding: '0.5rem', - height: '60px' + height: '60px', + color: `${theme.colors.secondary}`, }, message: { display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center', - color: '#585F71', + color: `${theme.colors.secondary}`, fontSize: '14px', padding: '0.15rem', }, devLink: { textDecoration: 'underline', - color: '#585F71', + color: `${theme.colors.secondary}`, }, }; From f94a7ddde14aa609134d201c8d36067927c979f7 Mon Sep 17 00:00:00 2001 From: Tom Haile Date: Thu, 18 Jan 2024 11:21:46 -0600 Subject: [PATCH 3/5] align banner text --- src/components/TopNav/Announcement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TopNav/Announcement.tsx b/src/components/TopNav/Announcement.tsx index 7b0bf6eb..a328b90c 100644 --- a/src/components/TopNav/Announcement.tsx +++ b/src/components/TopNav/Announcement.tsx @@ -15,7 +15,7 @@ const Announcement = () => { justifyContent: 'space-between', background: '#F27360', width: '100%', - padding: '0.5rem', + padding: '0.25rem 0 0.5rem', height: '60px', color: `${theme.colors.secondary}`, }, From 6d11a930df5e1690423f1c833ef33e3187c59e21 Mon Sep 17 00:00:00 2001 From: Tom Haile Date: Thu, 18 Jan 2024 11:27:01 -0600 Subject: [PATCH 4/5] linting --- src/components/Editor/index.tsx | 3 +-- src/components/TopNav/Announcement.tsx | 10 ++++----- src/components/TopNav/Header.tsx | 31 ++++++++++++++------------ src/containers/Playground/index.tsx | 4 +++- 4 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 7113bf50..10b18a04 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -28,13 +28,12 @@ const Editor = ({ active, isAnnouncementVisible, }: EditorContainerProps) => { - return ( <> {browser && browser.name === 'safari' ? ( ) : ( -
+
)} { - const context = useThemeUI(); - const { theme } = context; - + const context = useThemeUI(); + const { theme } = context; + const styles: SXStyles = { root: { backgroundColor: 'white', @@ -29,8 +29,8 @@ const Announcement = () => { padding: '0.15rem', }, devLink: { - textDecoration: 'underline', - color: `${theme.colors.secondary}`, + textDecoration: 'underline', + color: `${theme.colors.secondary}`, }, }; diff --git a/src/components/TopNav/Header.tsx b/src/components/TopNav/Header.tsx index 33a2ac77..a5a8781d 100644 --- a/src/components/TopNav/Header.tsx +++ b/src/components/TopNav/Header.tsx @@ -4,21 +4,24 @@ import TopNav from '.'; import { isMobile } from '../Editor/CadenceEditor/ControlPanel/utils'; const headerStyle = { - display: 'flex', - gridArea: 'header', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'left', + display: 'flex', + gridArea: 'header', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'left', }; -const Header = ({isAnnouncementVisible}: {isAnnouncementVisible: boolean}) => { - return ( -
- {!isMobile() && isAnnouncementVisible && } - - -
- ); +const Header = ({ + isAnnouncementVisible, +}: { + isAnnouncementVisible: boolean; +}) => { + return ( +
+ {!isMobile() && isAnnouncementVisible && } + +
+ ); }; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/containers/Playground/index.tsx b/src/containers/Playground/index.tsx index c7e256b9..ebdc0829 100644 --- a/src/containers/Playground/index.tsx +++ b/src/containers/Playground/index.tsx @@ -59,7 +59,9 @@ const getBaseStyles = ( display: 'grid', gridTemplateAreas: "'header header' 'sidebar main'", gridTemplateColumns: `[sidebar] ${fileExplorerWidth} [main] auto`, - gridTemplateRows: isAnnouncementVisible ? ['40px auto', '105px auto'] : ['40px auto', '50px auto'], + gridTemplateRows: isAnnouncementVisible + ? ['40px auto', '105px auto'] + : ['40px auto', '50px auto'], overflow: 'hidden', filter: showProjectsSidebar ? 'blur(1px)' : 'none', }; From cc5479433ee0ae1477b703db1a03dea15df6db00 Mon Sep 17 00:00:00 2001 From: Tom Haile Date: Thu, 18 Jan 2024 11:37:56 -0600 Subject: [PATCH 5/5] linting weirdness --- src/components/TopNav/Header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TopNav/Header.tsx b/src/components/TopNav/Header.tsx index a5a8781d..f9086ed5 100644 --- a/src/components/TopNav/Header.tsx +++ b/src/components/TopNav/Header.tsx @@ -3,10 +3,10 @@ import AnnouncementBar from './Announcement'; import TopNav from '.'; import { isMobile } from '../Editor/CadenceEditor/ControlPanel/utils'; -const headerStyle = { +const headerStyle: React.CSSProperties = { display: 'flex', gridArea: 'header', - flexDirection: 'column', + flexDirection: 'column' as 'column', alignItems: 'center', justifyContent: 'left', };