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, +}