update initial screen

Opentrons · Sep 19, 2024 · 5b7bf8c · 5b7bf8c
1 parent 392f834
commit 5b7bf8c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/protocol-designer/src/assets/localization/en/shared.json b/protocol-designer/src/assets/localization/en/shared.json
@@ -119,6 +119,6 @@
   "wasteChute": "Waste chute",
   "wasteChuteAndStagingArea": "Waste chute and staging area slot",
   "we_are_improving": "We’re working to improve Protocol Designer. Part of the process involves watching real user sessions to understand which parts of the interface are working and which could use improvement. We never share sessions outside of Opentrons.",
-  "welcome": "Welcome to Protocol Designer",
+  "welcome": "Welcome to Protocol Designer!",
   "yes": "Yes"
 }
diff --git a/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx b/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx
@@ -33,7 +33,7 @@ describe('Landing', () => {
   it('renders the landing page image and text', () => {
     render()
     screen.getByLabelText('welcome image')
-    screen.getByText('Welcome to Protocol Designer')
+    screen.getByText('Welcome to Protocol Designer!')
     screen.getByText(
       'The easiest way to automate liquid handling on your Opentrons robot. No code required.'
     )

diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
@@ -9,6 +9,7 @@ import {
   CURSOR_POINTER,
   DIRECTION_COLUMN,
   Flex,
+  JUSTIFY_CENTER,
   LargeButton,
   SPACING,
   StyledText,
@@ -19,6 +20,7 @@ import { actions as loadFileActions } from '../../load-file'
 import { getFileMetadata } from '../../file-data/selectors'
 import { toggleNewProtocolModal } from '../../navigation/actions'
 import welcomeImage from '../../assets/images/welcome_page.png'
+
 import type { ThunkDispatch } from '../../types'
 
 export function Landing(): JSX.Element {
@@ -45,32 +47,40 @@ export function Landing(): JSX.Element {
       backgroundColor={COLORS.grey20}
       flexDirection={DIRECTION_COLUMN}
       alignItems={ALIGN_CENTER}
-      paddingTop="14.875rem"
-      height="calc(100vh - 56px)"
+      justifyContent={JUSTIFY_CENTER}
+      height="calc(100vh - 3.5rem)"
       width="100%"
+      gridGap={SPACING.spacing32}
     >
-      <img
-        src={welcomeImage}
-        height="132px"
-        width="548px"
-        aria-label="welcome image"
-      />
-      <StyledText desktopStyle="headingLargeBold" marginY={SPACING.spacing16}>
-        {t('welcome')}
-      </StyledText>
-      <StyledText
-        desktopStyle="headingSmallRegular"
-        color={COLORS.grey60}
-        maxWidth="34.25rem"
-        textAlign={TYPOGRAPHY.textAlignCenter}
-      >
-        {t('no-code-required')}
-      </StyledText>
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+        <img
+          src={welcomeImage}
+          height="132px"
+          width="548px"
+          aria-label="welcome image"
+        />
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing8}
+          alignItems={ALIGN_CENTER}
+        >
+          <StyledText desktopStyle="headingLargeBold">
+            {t('welcome')}
+          </StyledText>
+          <StyledText
+            desktopStyle="headingSmallRegular"
+            color={COLORS.grey60}
+            maxWidth="34.25rem"
+            textAlign={TYPOGRAPHY.textAlignCenter}
+          >
+            {t('no-code-required')}
+          </StyledText>
+        </Flex>
+      </Flex>
       <LargeButton
         onClick={() => {
           dispatch(toggleNewProtocolModal(true))
         }}
-        marginY={SPACING.spacing32}
         buttonText={
           <StyledNavLink to={'/createNew'}>
             <StyledText desktopStyle="bodyLargeRegular">
@@ -79,7 +89,6 @@ export function Landing(): JSX.Element {
           </StyledNavLink>
         }
       />
-
       <StyledLabel>
         <Flex css={BUTTON_LINK_STYLE}>
           <StyledText desktopStyle="bodyLargeRegular">