From 5177774aed24b740ceb6a89f4deb03cd5479d1db Mon Sep 17 00:00:00 2001
From: Aaron <aaron@codecademy.com>
Date: Thu, 4 Mar 2021 20:57:43 -0500
Subject: [PATCH] Use theme var for header height

---
 .../src/experimental/GlobalHeader/index.tsx   | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/index.tsx
index 72a418007d9..9a49ea6a748 100644
--- a/packages/gamut-labs/src/experimental/GlobalHeader/index.tsx
+++ b/packages/gamut-labs/src/experimental/GlobalHeader/index.tsx
@@ -1,4 +1,5 @@
 import { Box } from '@codecademy/gamut';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 
 import { AppHeader } from '../AppHeader';
@@ -93,22 +94,28 @@ const getMobileAppHeaderItems = (
   }
 };
 
-export const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => (
-  <>
-    <Box display={{ base: 'none', md: 'block' }} height="80">
-      <AppHeader action={props.action} items={getAppHeaderItems(props)} />
-    </Box>
-    <Box
-      display={{ base: 'block', md: 'none' }}
-      height="64"
-      position="relative"
-      zIndex={0}
-    >
-      <AppHeaderMobile
-        action={props.action}
-        items={getMobileAppHeaderItems(props)}
-        renderSearch={props.renderSearch?.mobile}
-      />
-    </Box>
-  </>
-);
+export const GlobalHeader: React.FC<GlobalHeaderProps> = (props) => {
+  const theme = useTheme();
+  return (
+    <>
+      <Box
+        display={{ base: 'none', md: 'block' }}
+        height={theme.elements.headerHeight}
+      >
+        <AppHeader action={props.action} items={getAppHeaderItems(props)} />
+      </Box>
+      <Box
+        display={{ base: 'block', md: 'none' }}
+        height={theme.elements.headerHeight}
+        position="relative"
+        zIndex={0}
+      >
+        <AppHeaderMobile
+          action={props.action}
+          items={getMobileAppHeaderItems(props)}
+          renderSearch={props.renderSearch?.mobile}
+        />
+      </Box>
+    </>
+  );
+};