Created Banner component with Sign up and Log in buttons for m…

src/v2/Apps/Components/AppShell.tsx

@@ -2,7 +2,12 @@ import { Box, Flex, Theme } from "@artsy/palette"
 import { NetworkOfflineMonitor } from "v2/Artsy/Router/NetworkOfflineMonitor"
 import { findCurrentRoute } from "v2/Artsy/Router/Utils/findCurrentRoute"
 import { useMaybeReloadAfterInquirySignIn } from "v2/Artsy/Router/Utils/useMaybeReloadAfterInquirySignIn"
-import { NAV_BAR_HEIGHT, NavBar, MOBILE_NAV_HEIGHT } from "v2/Components/NavBar"
+import {
+  NAV_BAR_HEIGHT,
+  NavBar,
+  MOBILE_NAV_HEIGHT,
+  MOBILE_LOGGED_IN_NAV_HEIGHT,
+} from "v2/Components/NavBar"
 import { Match } from "found"
 import { isFunction } from "lodash"
 import { Footer } from "v2/Components/Footer"
@@ -13,6 +18,8 @@ import { HorizontalPadding } from "v2/Apps/Components/HorizontalPadding"
 import { AppContainer } from "./AppContainer"
 import { useRouteComplete } from "v2/Utils/Hooks/useRouteComplete"
 import { useAuthIntent } from "v2/Utils/Hooks/useAuthIntent"
+import { Banner } from "v2/Components/LoginSignUpBanner"
+import { Media } from "v2/Utils/Responsive"
 
 const logger = createLogger("Apps/Components/AppShell")
 
@@ -26,12 +33,12 @@ export const AppShell: React.FC<AppShellProps> = props => {
 
   const { children, match } = props
   const routeConfig = findCurrentRoute(match)
-  const { isEigen } = useSystemContext()
+  const { user, isEigen } = useSystemContext()
   // @ts-expect-error STRICT_NULL_CHECK
   const showFooter = !isEigen && !routeConfig.hideFooter
   // @ts-expect-error STRICT_NULL_CHECK
   const appContainerMaxWidth = routeConfig.displayFullPage ? "100%" : null
-
+  const isLoggedIn = Boolean(user)
   /**
    * Check to see if a route has a prepare key; if so call it. Used typically to
    * preload bundle-split components (import()) while the route is fetching data
@@ -81,8 +88,14 @@ export const AppShell: React.FC<AppShellProps> = props => {
       minHeight="100vh"
       flexDirection="column"
     >
-      <Box pb={[MOBILE_NAV_HEIGHT, NAV_BAR_HEIGHT]}>
+      <Box
+        pb={[
+          isLoggedIn ? MOBILE_LOGGED_IN_NAV_HEIGHT : MOBILE_NAV_HEIGHT,
+          NAV_BAR_HEIGHT,
+        ]}
+      >
         <Box left={0} position="fixed" width="100%" zIndex={100}>
+          <Media at="xs">{!isLoggedIn && <Banner />}</Media>
           <NavBar />
         </Box>
       </Box>

src/v2/Components/LoginSignUpBanner/Banner.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { Flex, color } from "@artsy/palette"
+import { BannerButton } from "./Button"
+import styled from "styled-components"
+
+interface Props {}
+
+const Container = styled(Flex)`
+  width: 100%;
+  padding: 12px;
+  background-color: ${color("black100")};
+`
+
+export class Banner extends React.Component<Props> {
+  render() {
+    return (
+      <Container>
+        <BannerButton href="/sign_up" marginRight="12px">
+          Sign up
+        </BannerButton>
+        <BannerButton href="/log_in">Log in</BannerButton>
+      </Container>
+    )
+  }
+}

src/v2/Components/LoginSignUpBanner/Button.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Box, color, BoxProps } from "@artsy/palette"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import styled from "styled-components"
+
+interface Props extends BoxProps {
+  href: string
+}
+
+const Button = styled(Box).attrs({
+  flexGrow: 1,
+  py: "8px",
+})`
+  width: 50%;
+  height: 40px;
+  text-align: center;
+  background-color: ${color("black80")};
+  color: ${color("white100")};
+  font-family: "ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  font-size: 15px;
+`
+
+export class BannerButton extends React.Component<Props> {
+  render() {
+    const { href, children, ...rest } = this.props
+
+    return (
+      <Button {...rest}>
+        <RouterLink to={href} noUnderline>
+          {children}
+        </RouterLink>
+      </Button>
+    )
+  }
+}

src/v2/Components/LoginSignUpBanner/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Banner"
+export * from "./Button"

src/v2/Components/NavBar/constants.ts

@@ -3,6 +3,8 @@ import { space } from "@artsy/palette"
 export const NAV_BAR_BORDER_OFFSET = 1
 export const NAV_BAR_TOP_TIER_HEIGHT = space(6) - NAV_BAR_BORDER_OFFSET
 export const NAV_BAR_BOTTOM_TIER_HEIGHT = 44
+export const MOBILE_BANNER_HEIGHT = 64
 export const NAV_BAR_HEIGHT =
   NAV_BAR_TOP_TIER_HEIGHT + NAV_BAR_BOTTOM_TIER_HEIGHT
-export const MOBILE_NAV_HEIGHT = NAV_BAR_TOP_TIER_HEIGHT
+export const MOBILE_LOGGED_IN_NAV_HEIGHT = NAV_BAR_TOP_TIER_HEIGHT
+export const MOBILE_NAV_HEIGHT = NAV_BAR_TOP_TIER_HEIGHT + MOBILE_BANNER_HEIGHT