Drawer Images + Other Improvements (#276)

* Replaced drawer images with higher-res versions, mobile/desktop button improvements

* On drawer footer, don't show outline when clicking buttons

packages/web/components/MobileFooter.tsx

@@ -3,7 +3,6 @@ import MetaGameLogo from 'assets/logo.png';
 import { MetaLink } from 'components/Link';
 import { motion } from 'framer-motion';
 import NextImage from 'next/dist/client/image';
-import MetaBoxButton from 'public/assets/drawer/box.button.bg.png';
 import React from 'react';
 
 import {
@@ -18,7 +17,12 @@ const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
   isExternal,
 }) => {
   return (
-    <MetaLink zIndex="2" href={href} isExternal={isExternal}>
+    <MetaLink 
+      zIndex="2" 
+      href={href} 
+      isExternal={isExternal}
+      _focus={{ outline: 0 }}
+    >
       <Button
         display="flex"
         flexDirection="column"
@@ -54,15 +58,19 @@ const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
     >
       <Button
         display="flex"
+        flexDirection="column"
         alignItems="center"
         justifyContent="center"
         width="6rem"
         height="6rem"
         textDecoration="none"
+        fontWeight="normal"
+        backgroundColor="rgba(255,255,255,0.08)"
+        borderRadius="5px"
         variant="link"
+        color="whiteAlpha.700"
         margin="0.5rem"
         padding="0.5rem"
-        backgroundImage={`url(${MetaBoxButton})`}
       >
         {children}
       </Button>
@@ -76,7 +84,7 @@ export interface SubImageProps {
 }
 
 export const SubImage: React.FC<SubImageProps> = ({ src, alt }) => {
-  return <Image src={src} alt={alt} height="85%" />;
+  return <Image src={src} alt={alt} height="12" mb={2} />;
 };
 
 export const MobileFooter: React.FC = () => {
@@ -172,6 +180,7 @@ export const MobileFooter: React.FC = () => {
             return (
               <SubMenuItem href={item.href} key={item.alt}>
                 <SubImage src={item.src} alt={item.alt} />
+                {item.text}
               </SubMenuItem>
             );
           })}

packages/web/components/PageHeader.tsx

@@ -12,7 +12,6 @@ import {
   DrawerSubItems,
 } from '../utils/drawerItems';
 
-const MetaBoxButton = '/assets/drawer/box.button.bg.png';
 const MetaBox = '/assets/drawer/desktop-box.png';
 const MetaDrawer = '/assets/drawer/desktop.gradient.png';
 const MetaGameLogo = '/assets/logo.alt.png';
@@ -71,13 +70,20 @@ const SubMenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
         alignItems="center"
         width="8.25rem"
         height="8.25rem"
+        backgroundColor="rgba(255,255,255,0.08)"
+        borderRadius="5px"
         textDecoration="none"
         variant="link"
-        fontFamily="mono"
+        fontFamily="body"
+        fontWeight="normal"
         color="whiteAlpha.700"
         margin={3}
         className="filter-effect"
-        backgroundImage={`url(${MetaBoxButton})`}
+        // backgroundImage={`url(${MetaBoxButton})`}
+        _hover={{ 
+          textDecoration: 'none',
+          backgroundColor: 'rgba(255,255,255,0.1)'
+        }}
       >
         {children}
       </Button>

packages/web/utils/drawerItems.ts

@@ -1,19 +1,6 @@
-const MetaCalendarImageUrl = '/assets/drawer/calendar.png';
-const MetaDiscordImageUrl = '/assets/drawer/discord.png';
-const MetaGithubImageUrl = '/assets/drawer/github.png';
-const MetaGuildsImageUrl = '/assets/emojis/crossed-swords.png';
-const MetaSeedPoolImageUrl = '/assets/drawer/seed_pool.png';
-const MetaLeaderboardImageUrl = '/assets/drawer/leaderboard.png';
-const MetaLibraryImageUrl = '/assets/drawer/library.png';
-const MetaViewImageUrl = '/assets/drawer/metaview.png';
-const MetaNewsletterImageUrl = '/assets/drawer/newsletter.png';
-const MetaSeedmarketImageUrl = '/assets/drawer/seedmarket.png';
-const MetaTwitterImageUrl = '/assets/drawer/twitter.png';
-
-const MetaQuestsImageUrl = '/assets/drawer/quests.png';
-const MetaRaidsImageUrl = '/assets/drawer/raids.png';
-const MetaPlayersImageUrl = '/assets/drawer/players.png';
-const MetaForumImageUrl = '/assets/drawer/forum.png';
+const emojiUrl = (fileName: string): string => {
+  return `/assets/emojis/${fileName}`;
+}
 
 export interface DrawerItemType {
   href: string;
@@ -27,14 +14,14 @@ export const DrawerItemsLeft: DrawerItemType[] = [
   {
     href: '/',
     isExternal: false,
-    src: MetaPlayersImageUrl,
+    src: emojiUrl('alien.png'),
     alt: 'MetaPlayers',
     text: 'Players',
   },
   {
     href: '/guilds',
     isExternal: false,
-    src: MetaGuildsImageUrl,
+    src: emojiUrl('crossed-swords.png'),
     alt: 'MetaGuilds',
     text: 'Guilds',
   },
@@ -44,7 +31,7 @@ export const DrawerItemsRight: DrawerItemType[] = [
   {
     href: 'https://forum.metagame.wtf/',
     isExternal: true,
-    src: MetaForumImageUrl,
+    src: emojiUrl('classical-building.png'),
     alt: 'MetaForm',
     text: 'Forum',
   },
@@ -52,7 +39,7 @@ export const DrawerItemsRight: DrawerItemType[] = [
     href:
       'https://miro.com/app/live-embed/o9J_knhEt7w=/?moveToViewport=-8516,-5516,21788,13742',
     isExternal: true,
-    src: MetaRaidsImageUrl,
+    src: emojiUrl('world-map.png'),
     alt: 'MetaRaids',
     text: 'Raids',
   },
@@ -62,49 +49,49 @@ export const DrawerSubItems: DrawerItemType[] = [
   {
     href: 'https://discord.gg/WYUkVpe',
     isExternal: true,
-    src: MetaQuestsImageUrl,
+    src: emojiUrl('question-mark.png'),
     alt: 'MetaQuests',
     text: 'Quests',
   },
   {
     href: 'https://metagame.substack.com/',
     isExternal: true,
-    src: MetaNewsletterImageUrl,
+    src: emojiUrl('rolled-up-newspaper.png'),
     alt: 'MetaNewsletter',
     text: 'Newsletter',
   },
   {
     href: 'https://anchor.fm/MetaGame/',
     isExternal: true,
-    src: MetaViewImageUrl,
+    src: emojiUrl('studio-microphone.png'),
     alt: 'MetaView',
     text: 'MetaView',
   },
   {
     href: 'https://wiki.metagame.wtf/docs/home',
     isExternal: true,
-    src: MetaLibraryImageUrl,
+    src: emojiUrl('books.png'),
     alt: 'MetaLibrary',
     text: 'Library',
   },
   {
     href: 'https://twitter.com/Metafam',
     isExternal: true,
-    src: MetaTwitterImageUrl,
+    src: emojiUrl('baby-chick.png'),
     alt: 'MetaTwitter',
     text: 'Twitter',
   },
   {
     href: 'https://discord.gg/XazuypRcv6',
     isExternal: true,
-    src: MetaDiscordImageUrl,
+    src: emojiUrl('speech-balloon.png'),
     alt: 'MetaDiscord',
     text: 'Discord',
   },
   {
     href: 'https://github.com/MetaFam/TheGame',
     isExternal: true,
-    src: MetaGithubImageUrl,
+    src: emojiUrl('hammer-and-wrench.png'),
     alt: 'MetaGithub',
     text: 'Github',
   },
@@ -112,7 +99,7 @@ export const DrawerSubItems: DrawerItemType[] = [
     href:
       'https://calendar.google.com/calendar/u/1?cid=bmloNTlrdGdhZm1tNjRlZDRxazZ1ZTh2djRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ',
     isExternal: true,
-    src: MetaCalendarImageUrl,
+    src: emojiUrl('calendar.png'),
     alt: 'MetaCalendar',
     text: 'Calendar',
   },
@@ -120,7 +107,7 @@ export const DrawerSubItems: DrawerItemType[] = [
     href:
       'https://balancer.exchange/#/swap/ether/0x30cf203b48edaa42c3b4918e955fed26cd012a3f',
     isExternal: true,
-    src: MetaSeedmarketImageUrl,
+    src: emojiUrl('seedling.png'),
     alt: 'MetaSeedmarket',
     text: 'Seed Market',
   },
@@ -128,14 +115,14 @@ export const DrawerSubItems: DrawerItemType[] = [
     href:
       'https://pools.balancer.exchange/#/pool/0xea05a15dbce2eb543ffda16950e95b2bd2e40d0e/',
     isExternal: true,
-    src: MetaSeedPoolImageUrl,
+    src: emojiUrl('four-leaf-clover.png'),
     alt: 'MetaSeedPool',
     text: 'Seed Pool',
   },
   {
     href: 'https://wiki.metagame.wtf/docs/enter-metagame/leaderboard',
     isExternal: true,
-    src: MetaLeaderboardImageUrl,
+    src: emojiUrl('chart-increasing.png'),
     alt: 'MetaLeaderboard',
     text: 'Leaderboard',
   },