fix(app): fix UpdateAppModal style (#15149)

Closes RQA-2675
Opentrons · May 9, 2024 · db21c14 · db21c14
1 parent 9207ef5
commit db21c14
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/app/src/molecules/ReleaseNotes/index.tsx b/app/src/molecules/ReleaseNotes/index.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import Markdown from 'react-markdown'
 
-import { StyledText } from '@opentrons/components'
+import { Box, COLORS, SPACING, StyledText } from '@opentrons/components'
+
 import { useIsOEMMode } from '../../resources/robot-settings/hooks'
 
 import styles from './styles.module.css'
@@ -28,6 +29,7 @@ export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
             li: ListItemText,
             p: ParagraphText,
             a: ExternalLink,
+            hr: HorizontalRule,
           }}
         >
           {source}
@@ -58,3 +60,13 @@ function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
 function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
   return <StyledText {...props} as="ul" />
 }
+
+function HorizontalRule(): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      marginY={SPACING.spacing16}
+      data-testid="divider"
+    />
+  )
+}
diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx
@@ -12,8 +12,8 @@ import {
   Flex,
   JUSTIFY_SPACE_AROUND,
   JUSTIFY_SPACE_BETWEEN,
-  NewPrimaryBtn,
-  NewSecondaryBtn,
+  PrimaryButton,
+  SecondaryButton,
   SPACING,
   StyledText,
 } from '@opentrons/components'
@@ -62,18 +62,7 @@ const PlaceholderError = ({
 export const RELEASE_NOTES_URL_BASE =
   'https://github.com/Opentrons/opentrons/releases/tag/v'
 const UPDATE_ERROR = 'Update Error'
-const FOOTER_BUTTON_STYLE = css`
-  text-transform: lowercase;
-  padding-left: ${SPACING.spacing16};
-  padding-right: ${SPACING.spacing16};
-  border-radius: ${BORDERS.borderRadius8};
-  margin-top: ${SPACING.spacing16};
-  margin-bottom: ${SPACING.spacing16};
 
-  &:first-letter {
-    text-transform: uppercase;
-  }
-`
 const UpdateAppBanner = styled(Banner)`
   border: none;
 `
@@ -122,7 +111,13 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
   removeActiveAppUpdateToast()
 
   const appUpdateFooter = (
-    <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+    <Flex
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      paddingY={SPACING.spacing16}
+      borderTop={BORDERS.lineBorder}
+      borderColor={COLORS.grey30}
+    >
       <ExternalLink
         href={`${RELEASE_NOTES_URL_BASE}${availableAppUpdateVersion}`}
         css={css`
@@ -134,20 +129,18 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
         {t('release_notes')}
       </ExternalLink>
       <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_AROUND}>
-        <NewSecondaryBtn
+        <SecondaryButton
           onClick={handleRemindMeLaterClick}
           marginRight={SPACING.spacing8}
-          css={FOOTER_BUTTON_STYLE}
         >
           {t('remind_later')}
-        </NewSecondaryBtn>
-        <NewPrimaryBtn
+        </SecondaryButton>
+        <PrimaryButton
           onClick={() => dispatch(downloadShellUpdate())}
           marginRight={SPACING.spacing12}
-          css={FOOTER_BUTTON_STYLE}
         >
           {t('update_app_now')}
-        </NewPrimaryBtn>
+        </PrimaryButton>
       </Flex>
     </Flex>
   )