From fa1b372a4fa106781bde13f6e06dfa7446ae58de Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 9 May 2024 15:13:09 -0400
Subject: [PATCH 1/3] fix(app): style UpdateAppModal

Close RQA-2675
---
 app/src/organisms/UpdateAppModal/index.tsx | 33 +++++++++-------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx
index d3a434154d0..c053cc01a4a 100644
--- 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>
   )

From f1cecfe7ccefc101f22fab5f38e78de685b42b5d Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 9 May 2024 16:28:35 -0400
Subject: [PATCH 2/3] add HorizontalRule component for markdown divider

---
 app/src/molecules/ReleaseNotes/HorizontalRule.tsx | 11 +++++++++++
 app/src/molecules/ReleaseNotes/index.tsx          |  2 ++
 2 files changed, 13 insertions(+)
 create mode 100644 app/src/molecules/ReleaseNotes/HorizontalRule.tsx

diff --git a/app/src/molecules/ReleaseNotes/HorizontalRule.tsx b/app/src/molecules/ReleaseNotes/HorizontalRule.tsx
new file mode 100644
index 00000000000..c42060c58fb
--- /dev/null
+++ b/app/src/molecules/ReleaseNotes/HorizontalRule.tsx
@@ -0,0 +1,11 @@
+import { Box, COLORS, SPACING } from '@opentrons/components'
+
+export function HorizontalRule(): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      marginY={SPACING.spacing16}
+      data-testid="divider"
+    />
+  )
+}
diff --git a/app/src/molecules/ReleaseNotes/index.tsx b/app/src/molecules/ReleaseNotes/index.tsx
index 1b3e1821bd8..e54434891ac 100644
--- a/app/src/molecules/ReleaseNotes/index.tsx
+++ b/app/src/molecules/ReleaseNotes/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import Markdown from 'react-markdown'
 
 import { StyledText } from '@opentrons/components'
+import { HorizontalRule } from './HorizontalRule'
 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}

From 9454fdd7baa88f4c019396d48778982f4e8d705c Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 9 May 2024 16:35:31 -0400
Subject: [PATCH 3/3] move HorizontalRule to ReleaseNotes

---
 app/src/molecules/ReleaseNotes/HorizontalRule.tsx | 11 -----------
 app/src/molecules/ReleaseNotes/index.tsx          | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 13 deletions(-)
 delete mode 100644 app/src/molecules/ReleaseNotes/HorizontalRule.tsx

diff --git a/app/src/molecules/ReleaseNotes/HorizontalRule.tsx b/app/src/molecules/ReleaseNotes/HorizontalRule.tsx
deleted file mode 100644
index c42060c58fb..00000000000
--- a/app/src/molecules/ReleaseNotes/HorizontalRule.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Box, COLORS, SPACING } from '@opentrons/components'
-
-export function HorizontalRule(): JSX.Element {
-  return (
-    <Box
-      borderBottom={`1px solid ${String(COLORS.grey30)}`}
-      marginY={SPACING.spacing16}
-      data-testid="divider"
-    />
-  )
-}
diff --git a/app/src/molecules/ReleaseNotes/index.tsx b/app/src/molecules/ReleaseNotes/index.tsx
index e54434891ac..77690361b15 100644
--- a/app/src/molecules/ReleaseNotes/index.tsx
+++ b/app/src/molecules/ReleaseNotes/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import Markdown from 'react-markdown'
 
-import { StyledText } from '@opentrons/components'
-import { HorizontalRule } from './HorizontalRule'
+import { Box, COLORS, SPACING, StyledText } from '@opentrons/components'
+
 import { useIsOEMMode } from '../../resources/robot-settings/hooks'
 
 import styles from './styles.module.css'
@@ -60,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"
+    />
+  )
+}