From 602dbb29be362f0af2e8a55b3cac61be52220639 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 7 Apr 2022 21:11:40 -0700
Subject: [PATCH] Play with transparent header in desktop

---
 packages/web/components/patterns/PrimaryHeader.tsx  |  7 ++++---
 packages/web/components/templates/PrimaryLayout.tsx | 12 ++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index 2dde10616..9e40bf6f7 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@@ -159,16 +159,17 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           zIndex: 5,
           width: '100%',
           boxShadow: props.isDisplayingShadow ? '$panelShadow' : 'unset',
-          bg: '$grayBase',
           p: '0px $3 0px $3',
           height: '68px',
           position: 'fixed',
-          minHeight: '68px',
+          bg: 'transparent',
           '@smDown': {
             height: '48px',
-            minHeight: '48px',
             p: '0px 18px 0px 16px',
           },
+          '@lgDown': {
+            bg: '$grayBase',
+          },
         }}
       >
         <HStack alignment="center" distribution="start">
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index b3b1d1db6..3c7764c90 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -84,8 +84,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
         <Box
           ref={props.scrollElementRef}
           css={{
-            top: '68px',
-            '@smDown': { top: '48px' },
+            // top: '68px',
+            // '@smDown': { top: '48px' },
             position: 'fixed',
             overflowY: 'auto',
             height: '100%',
@@ -93,6 +93,14 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
             bg: '$grayBase',
           }}
         >
+                  <Box
+          ref={props.scrollElementRef}
+          css={{
+            height: '68px',
+            bg: '$grayBase',
+            '@smDown': { height: '48px' },
+          }}
+        ></Box>
           {props.children}
           {showLogoutConfirmation ? (
             <ConfirmationModal