fix(app): style UpdateAppModal

Close RQA-2675
Opentrons · May 9, 2024 · 88ebe6e · 88ebe6e
1 parent 2978ade
commit 88ebe6e
Showing 1 changed file with 13 additions and 20 deletions.
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>
   )