use LargeButton

Opentrons · Aug 8, 2024 · 14b0f9d · 14b0f9d
1 parent 2e44cca
commit 14b0f9d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx
@@ -24,7 +24,7 @@ type LargeButtonTypes =
   | 'alertStroke'
   | 'alertAlt'
 interface LargeButtonProps extends StyleProps {
-  onClick: () => void
+  onClick?: () => void
   buttonType?: LargeButtonTypes
   buttonText: React.ReactNode
   iconName?: IconName
@@ -203,7 +203,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       <LegacyStyledText
         css={css`
           font-size: ${fontSizeBodyLargeSemiBold};
-          padding-right: ${SPACING.spacing8};
+          padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
           @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
             ${TYPOGRAPHY.level3HeaderSemiBold}
           }

diff --git a/protocol-designer/src/localization/en/shared.json b/protocol-designer/src/localization/en/shared.json
@@ -4,7 +4,7 @@
   "cancel": "Cancel",
   "confirm_reorder": "Are you sure you want to reorder these steps, it may cause errors?",
   "create_new_protocol": "Create new protocol",
-  "create_new": "Create new",
+  "create_a_protocol": "Create a protocol",
   "confirm_import": "Are you sure you want to upload this protocol?",
   "done": "Done",
   "edit": "edit",

diff --git a/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx b/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx
@@ -32,7 +32,7 @@ describe('Landing', () => {
     screen.getByText(
       'A no-code solution to create protocols that x, y and z meaning for your lab and workflow.'
     )
-    screen.getByRole('button', { name: 'Create new' })
+    screen.getByRole('button', { name: 'Create a protocol' })
     screen.getByText('Import existing protocol')
   })
 })
diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
@@ -8,8 +8,7 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  PRODUCT,
-  PrimaryButton,
+  LargeButton,
   SPACING,
   StyledText,
   TYPOGRAPHY,
@@ -61,14 +60,17 @@ export function Landing(): JSX.Element {
       >
         {t('no-code-solution')}
       </StyledText>
-      {/* TODO(ja, 8/7/24): replace this with LargeButton https://opentrons.atlassian.net/browse/AUTH-622 */}
-      <PrimaryButton margin={SPACING.spacing32}>
-        <StyledNavLink to={'/createNew'}>
-          <StyledText desktopStyle="bodyLargeRegular">
-            {t('create_new')}
-          </StyledText>
-        </StyledNavLink>
-      </PrimaryButton>
+      <LargeButton
+        margin={SPACING.spacing32}
+        buttonText={
+          <StyledNavLink to={'/createNew'}>
+            <StyledText desktopStyle="bodyLargeRegular">
+              {t('create_a_protocol')}
+            </StyledText>
+          </StyledNavLink>
+        }
+      />
+
       <StyledLabel>
         <StyledText desktopStyle="bodyLargeRegular" color={COLORS.grey60}>
           {t('import_existing')}