diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx
index a9e03ae16..c5102293d 100644
--- a/packages/web/components/elements/MobileInstallHelp.tsx
+++ b/packages/web/components/elements/MobileInstallHelp.tsx
@@ -39,7 +39,7 @@ export default function MobileInstallHelp({
},
]
- const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px'}
+ const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px', display: 'flex', justifyContent: !onboarding ? 'flex-end' : 'initial'}
return (
+
+
+ Learn more
+
+
- Install Omnivore iOS
+ Install Omnivore for iOS
- Learn more about the iOS app ->
+ Learn more about the share extension here.
)}
@@ -165,8 +185,9 @@ export default function MobileInstallHelp({
display: 'flex',
alignItems: 'center',
gridColumn: '1 / span 2',
+ flexDirection: !onboarding ? 'row-reverse' : 'inherit',
justifyContent: !onboarding ? 'space-between' : 'center',
- mt: '10px',
+ mt: !onboarding ? 'inherit' : 10,
'@lg': {
flexDirection: !onboarding ? 'row-reverse' : 'column-reverse',
alignItems: !onboarding ? 'center' : 'flex-end',
@@ -178,14 +199,13 @@ export default function MobileInstallHelp({
+
+const Template: ComponentStory = (args) => (
+
+
+
+)
+
+export const MobileInstallHelpStory = Template.bind({})
+MobileInstallHelpStory.args = {
+ onboarding: false,
+}
+
+export const OnboardingMobileInstallHelpStory = Template.bind({})
+OnboardingMobileInstallHelpStory.args = {
+ onboarding: true,
+}