style(GlobalHeader): Use theme variable for header height

* Uses headerHeight variable.

Author: codecaaron

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>
+    </>
+  );
+};