Merge pull request #623 from omnivore-app/OMN-617

[OMN-617] - Align AppStore button to right on small screens in MobileInstallComponent

packages/web/components/elements/MobileInstallHelp.tsx

@@ -39,7 +39,7 @@ export default function MobileInstallHelp({
     },
   ]
 
-  const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px'}
+  const iosContainerStyles = { marginTop: '12px', width: '100%', height: '40px', display: 'flex', justifyContent: !onboarding ? 'flex-end' : 'initial'}
 
   return (
     <Box
@@ -115,7 +115,7 @@ export default function MobileInstallHelp({
             },
           }}
         >
-          Install Omnivore iOS
+          Install Omnivore for iOS
         </StyledText>
       </Box>
       <StyledText
@@ -165,8 +165,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 +179,13 @@ export default function MobileInstallHelp({
         <Box
           css={
             !onboarding
-              ? { ...iosContainerStyles, '@lg': { pl: '16px' } }
+              ? { ...iosContainerStyles, '@lg': { pl: '16px'} }
               : {
                   ...iosContainerStyles,
                   pl: 16,
                   '@lg': {
                     marginTop: '24px',
                     justifyContent: 'flex-end',
-                    display: 'flex',
                   },
                 }
           }

packages/web/stories/MobileInstallHelp.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import MobileInstallHelp from '../components/elements/MobileInstallHelp'
+import { Box } from '../components/elements/LayoutPrimitives'
+
+export default {
+  title: 'Components/MobileInstallHelp',
+  component: MobileInstallHelp,
+  argTypes: {
+    onboarding: {
+      description: 'Changes the appearence of the component to match onboarding page designs.',
+      control: { type: 'boolean' },
+    },
+  },
+} as ComponentMeta<typeof MobileInstallHelp>
+
+const Template: ComponentStory<typeof MobileInstallHelp> = (args) => (
+  <Box
+    css={{
+      maxWidth: '50rem',
+      margin: 'auto',
+      marginBottom: '100px',
+      padding: '10px',
+      borderRadius: '6px',
+      border: '1px solid #0000000F',
+      boxShadow: '0px 3px 11px 0px #201F1D0A',
+    }}
+  >
+    <MobileInstallHelp {...args} />
+  </Box>
+)
+
+export const MobileInstallHelpStory = Template.bind({})
+MobileInstallHelpStory.args = {
+  onboarding: false,
+}
+
+export const OnboardingMobileInstallHelpStory = Template.bind({})
+OnboardingMobileInstallHelpStory.args = {
+  onboarding: true,
+}