Merge pull request #618 from omnivore-app/fix/install-component

Background and header colors for login and settings

packages/web/components/elements/MobileInstallHelp.tsx

@@ -100,22 +100,6 @@ 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={{
@@ -131,7 +115,7 @@ export default function MobileInstallHelp({
             },
           }}
         >
-          Install Omnivore for iOS
+          Install Omnivore iOS
         </StyledText>
       </Box>
       <StyledText
@@ -166,14 +150,10 @@ export default function MobileInstallHelp({
                 color: '$grayTextContrast',
                 fontSize: '14px',
                 fontWeight: 600,
-                display: 'none',
-                '@lg': {
-                  display: 'initial',
-                  textDecoration: 'underline',
-                },
+                textDecoration: 'underline',
               }}
             >
-              Learn more about the share extension here.
+              Learn more about the iOS app -&gt;
             </StyledAnchor>
           </Link>
         )}
@@ -186,7 +166,7 @@ export default function MobileInstallHelp({
           alignItems: 'center',
           gridColumn: '1 / span 2',
           justifyContent: !onboarding ? 'space-between' : 'center',
-          mt: !onboarding ? 'inherit' : 10,
+          mt: '10px',
           '@lg': {
             flexDirection: !onboarding ? 'row-reverse' : 'column-reverse',
             alignItems: !onboarding ? 'center' : 'flex-end',

packages/web/components/patterns/PrimaryHeader.tsx

@@ -14,15 +14,13 @@ import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardSho
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { setupAnalytics } from '../../lib/analytics'
-import { Button } from '../elements/Button'
-import Link from 'next/link'
 
 type HeaderProps = {
   user?: UserBasicData
   userInitials: string
   hideHeader?: boolean
   profileImageURL?: string
-  isFixedPosition: boolean
+  isTransparent: boolean
   scrollElementRef?: React.RefObject<HTMLDivElement>
   toolbarControl?: JSX.Element
   alwaysDisplayToolbar?: boolean
@@ -125,11 +123,10 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
     <>
       <NavHeader
         {...props}
+        isVisible={true}
         username={props.user?.profile.username}
         actionHandler={headerDropdownActionHandler}
         isDisplayingShadow={isScrolled}
-        isVisible={true}
-        isFixedPosition={true}
         toolbarControl={props.toolbarControl}
         alwaysDisplayToolbar={props.alwaysDisplayToolbar}
       />
@@ -145,7 +142,7 @@ type NavHeaderProps = {
   profileImageURL?: string
   isDisplayingShadow?: boolean
   isVisible?: boolean
-  isFixedPosition: boolean
+  isTransparent: boolean
   toolbarControl?: JSX.Element
   alwaysDisplayToolbar?: boolean
 }
@@ -166,7 +163,7 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           p: '0px $3 0px $3',
           height: '48px',
           position: 'fixed',
-          bg: 'transparent',
+          bg: props.isTransparent ? 'transparent' : '$grayBase',
           '@smDown': {
             p: '0px 18px 0px 16px',
           },

packages/web/components/templates/LoginForm.tsx

@@ -8,7 +8,6 @@ import {
   appleAuthRedirectURI,
 } from '../../lib/appConfig'
 import AppleLogin from 'react-apple-login'
-import { formatMessage } from '../../locales/en/messages'
 
 export type LoginFormProps = {
   errorMessage?: string

packages/web/components/templates/LoginLayout.tsx

@@ -1,14 +1,8 @@
 import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { LoginForm } from './LoginForm'
 import type { LoginFormProps } from './LoginForm'
-import Image from 'next/image'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
-import Link from 'next/link'
-import { Star } from 'phosphor-react'
-import { Button } from '../elements/Button'
-import { googleID } from '../../lib/appConfig'
-import { useEffect, useState } from 'react'
 
 export function LoginLayout(props: LoginFormProps): JSX.Element {
   return (
@@ -64,8 +58,9 @@ function MediumLoginLayout(props: LoginFormProps) {
       alignment="center"
       distribution="start"
       css={{
-        height: '100vh',
         width: '100vw',
+        height: '100%',
+        minHeight: '100vh',
         bg: '$omnivoreYellow',
         overflowY: 'clip'
       }}

packages/web/components/templates/PrimaryLayout.tsx

@@ -75,7 +75,7 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           hideHeader={props.hideHeader}
           userInitials={viewerData?.me?.name.charAt(0) ?? ''}
           profileImageURL={viewerData?.me?.profile.pictureUrl}
-          isFixedPosition={true}
+          isTransparent={true}
           scrollElementRef={props.scrollElementRef}
           toolbarControl={props.headerToolbarControl}
           alwaysDisplayToolbar={props.alwaysDisplayToolbar}

packages/web/components/templates/SettingsLayout.tsx

@@ -1,6 +1,4 @@
-import Link from 'next/link'
-import { HStack, VStack, Box } from '../elements/LayoutPrimitives'
-import { StyledText } from '../elements/StyledText'
+import { Box } from '../elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { PrimaryHeader } from '../patterns/PrimaryHeader'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
@@ -46,7 +44,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
       <PageMetaData path='settings' title='Settings' />
         <PrimaryHeader
           user={viewerData?.me}
-          isFixedPosition={false}
+          isTransparent={false}
           userInitials={viewerData?.me?.name.charAt(0) ?? ''}
           profileImageURL={viewerData?.me?.profile.pictureUrl}
           setShowLogoutConfirmation={setShowLogoutConfirmation}