Update more links and add colour to banner and visual editor button

statelyai · Oct 31, 2023 · 33f50b5 · 33f50b5
1 parent ac1c889
commit 33f50b5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/CanvasView.tsx b/src/CanvasView.tsx
@@ -16,6 +16,7 @@ import {
   MenuList,
   Portal,
   Spinner,
+  Text,
   VStack,
 } from '@chakra-ui/react';
 import { useSelector } from '@xstate/react';
@@ -93,6 +94,27 @@ export const CanvasView: React.FC = () => {
       {!embed?.isEmbedded && (
         <Box data-testid="canvas-header" bg="gray.800" zIndex={1} padding="0">
           <CanvasHeader />
+          <Box
+            bg="blue.600"
+            px="1"
+            py="2"
+            color="white"
+            textAlign="center"
+            fontWeight="600"
+          >
+            <Text>
+              ✨ Our{' '}
+              <Link
+                href="https://stately.ai?source=viz-banner"
+                target="_blank"
+                color="blue.50"
+                textDecoration="underline"
+              >
+                new Stately visual editor
+              </Link>{' '}
+              is out now! ✨
+            </Text>
+          </Box>
         </Box>
       )}
       <CanvasContainer panModeEnabled={panModeEnabled}>

diff --git a/src/WelcomeArea.tsx b/src/WelcomeArea.tsx
@@ -96,7 +96,7 @@ export const WelcomeArea = () => {
               <Link
                 color="blue.300"
                 fontSize="sm"
-                href="https://xstate.js.org/docs"
+                href="https://stately.ai/docs/xstate"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -118,7 +118,7 @@ export const WelcomeArea = () => {
               <Link
                 color="blue.300"
                 fontSize="sm"
-                href="https://xstate.js.org/docs"
+                href="https://stately.ai/docs/xstate"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -145,8 +145,8 @@ export const WelcomeArea = () => {
                   >
                     use our Stately visual editor
                   </Link>{' '}
-                  to build state machines visually, export to XState V5, and
-                  much much more.
+                  to build state machines visually, generate machines from text
+                  descriptions, export to XState V5, and much much more.
                 </Description>
               </Stack>
               <Stack spacing="3">
@@ -156,6 +156,7 @@ export const WelcomeArea = () => {
                   href="https://stately.ai?source=viz"
                   rel="noreferrer"
                   target="_blank"
+                  bg="orange.600"
                 >
                   <HStack spacing="4">
                     <MagicIcon color="gray.200" h="6" w="6" />