Changed layout of icon on MobileInstallHelp for small screens and adding storybook story for it

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 (
     <Box
@@ -100,6 +100,22 @@ export default function MobileInstallHelp({
           },
         }}
       >
+        <Link passHref href="/help/saving-links">
+          <StyledAnchor
+            css={{
+              fontWeight: '600',
+              fontSize: '12px',
+              lineHeight: '18px',
+              textAlign: 'right',
+              color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
+              '@lg': {
+                display: 'none',
+              },
+            }}
+          >
+            Learn more
+          </StyledAnchor>
+        </Link>
         <StyledText
           as={'h3'}
           css={{
@@ -115,7 +131,7 @@ export default function MobileInstallHelp({
             },
           }}
         >
-          Install Omnivore iOS
+          Install Omnivore for iOS
         </StyledText>
       </Box>
       <StyledText
@@ -150,10 +166,14 @@ export default function MobileInstallHelp({
                 color: '$grayTextContrast',
                 fontSize: '14px',
                 fontWeight: 600,
-                textDecoration: 'underline',
+                display: 'none',
+                '@lg': {
+                  display: 'initial',
+                  textDecoration: 'underline',
+                },
               }}
             >
-              Learn more about the iOS app -&gt;
+              Learn more about the share extension here.
             </StyledAnchor>
           </Link>
         )}
@@ -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({
         <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,
+}