Move SEED Ticker to left side (#282)

MetaGame logo was redundant and SEED ticker often gets covered by the App Drawer

packages/web/components/PageHeader.tsx

@@ -15,7 +15,6 @@ import {
 const MetaBox = '/assets/drawer/desktop-box.png';
 const MetaDrawer = '/assets/drawer/desktop.gradient.png';
 const MetaGameLogo = '/assets/logo.alt.png';
-const MetaGameImage = '/assets/metagame.png';
 
 const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
   children,
@@ -80,9 +79,9 @@ const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
         margin={3}
         className="filter-effect"
         // backgroundImage={`url(${MetaBoxButton})`}
-        _hover={{ 
+        _hover={{
           textDecoration: 'none',
-          backgroundColor: 'rgba(255,255,255,0.1)'
+          backgroundColor: 'rgba(255,255,255,0.1)',
         }}
       >
         {children}
@@ -111,16 +110,9 @@ export const PageHeader: React.FC = () => {
         }
       `}</style>
 
-      <MetaLink href="/" display="block" mr="10">
-        <Box mt={2}>
-          <NextImage
-            src={MetaGameImage}
-            alt="MetaGame"
-            width={144}
-            height={62}
-          />
-        </Box>
-      </MetaLink>
+      <Box>
+        <Ticker />
+      </Box>
 
       <Stack
         width="48rem"
@@ -197,7 +189,6 @@ export const PageHeader: React.FC = () => {
       </Stack>
 
       <Flex justifyContent="center" alignItems="center">
-        <Ticker />
         <LoginButton />
       </Flex>
 

packages/web/components/Ticker.tsx

@@ -1,5 +1,4 @@
-import { Flex, Heading, Image } from '@metafam/ds';
-import MetaGameLogo from 'assets/logo.png';
+import { Heading, VStack } from '@metafam/ds';
 import fetch from 'node-fetch';
 import React, { useEffect, useState } from 'react';
 
@@ -15,21 +14,11 @@ export const Ticker: React.FC = () => {
   }, [price, setPrice]);
 
   return (
-    <Flex
-      alignItems="center"
-      margin="15px"
-      display={price > 0 ? 'flex' : 'none'}
-    >
-      <Image
-        src={MetaGameLogo}
-        alt="MetaGameLogo"
-        objectFit="contain"
-        boxSize="2rem"
-        margin="0 15px 0 0"
-      />
-      <Heading size="xs" color="white" margin="0 15px 0 0">
-        SEED ${price.toFixed(2)}
+    <VStack my="4">
+      <Heading size="xs" fontFamily="mono" color="purple.200">
+        $SEED PRICE
       </Heading>
-    </Flex>
+      <Heading size="xs">${price ? price.toFixed(2) : '$--.--'}</Heading>
+    </VStack>
   );
 };