fix: fixed high level layouting

2026-04-24 03:00:09 -04:00 · 2022-02-03 20:41:01 +05:30
parent 4b41d5c187
commit bb67c95a5f
23 changed files with 415 additions and 551 deletions
--- a/packages/design-system/src/SelectTimeZone.tsx
+++ b/packages/design-system/src/SelectTimeZone.tsx
@@ -41,7 +41,7 @@ const timeZoneSelectStyles: typeof chakraesqueStyles = {
  control: (styles, props) => ({
    ...styles,
    ...chakraesqueStyles.control?.(styles, props),
-    width: '17em',
+    width: '100%',
    maxWidth: 'calc(100vw - 2rem)',
  }),
 };
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -144,6 +144,7 @@ export {
  Spacer,
  Spinner,
  Stack,
+  StackProps,
  Stat,
  StatArrow,
  StatGroup,
--- a/packages/design-system/src/theme/index.ts
+++ b/packages/design-system/src/theme/index.ts
@@ -16,6 +16,7 @@ const breakpoints = createBreakpoints({
  xl: '80em',
  '2xl': '96em',
 });
+
 export const theme: Theme = extendTheme({
  breakpoints,
  styles: {
--- a/packages/web/components/Container.tsx
+++ b/packages/web/components/Container.tsx
@@ -1,29 +1,54 @@
-import { Flex } from '@metafam/ds';
-import BackgroundImage from 'assets/main-background.jpg';
-import React from 'react';
+import { Flex, FlexProps, Stack, StackProps } from '@metafam/ds';
+import { HeadComponent } from 'components/Seo';

-type Props = React.ComponentProps<typeof Flex>;
-
-export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
+export const PageContainer: React.FC<FlexProps> = ({ children, ...props }) => (
  <Flex
-    bgSize="cover"
-    bgAttachment="fixed"
-    w="full"
-    minH="100vh"
-    px={[4, 8, 12]}
-    pt={[4, 8, 12]}
-    pb={[20, 20, 20, 12]}
+    w="100%"
+    h="100%"
+    p={{ base: 8, lg: 12 }}
    direction="column"
    align="center"
-    backgroundImage={`url(${BackgroundImage})`}
+    pos="relative"
    {...props}
  >
    {children}
  </Flex>
 );

-export const FlexContainer: React.FC<Props> = ({ children, ...props }) => (
-  <Flex align="center" justify="center" direction="column" {...props}>
+export const FlexContainer: React.FC<StackProps> = ({ children, ...props }) => (
+  <Stack
+    w="100%"
+    align="center"
+    justify="center"
+    direction="column"
+    spacing={8}
+    {...props}
+  >
    {children}
+  </Stack>
+);
+
+type EmbedProps = {
+  title: string;
+  description: string;
+  url: string;
+} & FlexProps;
+
+export const EmbedContainer: React.FC<EmbedProps> = ({
+  title,
+  description,
+  url,
+  ...props
+}) => (
+  <Flex w="100%" h="100%" direction="column" {...props}>
+    <HeadComponent title={title} description={description} url={url} />
+    <iframe
+      title={title}
+      src={url}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    />
  </Flex>
 );
--- a/packages/web/components/EditProfileForm.tsx
+++ b/packages/web/components/EditProfileForm.tsx
@@ -815,13 +815,15 @@ export const EditProfileForm: React.FC<ProfileEditorProps> = ({
              name="timeZone"
              defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
              render={({ field: { onChange, ref, ...props } }) => (
-                <SelectTimeZone
-                  labelStyle="abbrev"
-                  onChange={(tz) => {
-                    onChange(tz.value);
-                  }}
-                  {...props}
-                />
+                <Box w="100%" minW="16rem">
+                  <SelectTimeZone
+                    labelStyle="abbrev"
+                    onChange={(tz) => {
+                      onChange(tz.value);
+                    }}
+                    {...props}
+                  />
+                </Box>
              )}
            />
            <Box minH="3em">
--- a/packages/web/components/MegaMenu/MegaMenu.tsx
+++ b/packages/web/components/MegaMenu/MegaMenu.tsx
@@ -61,7 +61,7 @@ import { Player } from 'graphql/autogen/types';
 import { useUser, useWeb3 } from 'lib/hooks';
 import { usePSeedBalance } from 'lib/hooks/balances';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MenuLinkItem, MenuLinkSet, MenuSectionLinks } from 'utils/menuLinks';
 import { getPlayerURL } from 'utils/playerHelpers';

@@ -452,24 +452,11 @@ const PlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
 export const MegaMenu: React.FC = () => {
  const { connected, connect } = useWeb3();
  const router = useRouter();
-
-  const handleLoginClick = useCallback(async () => {
-    await connect();
-  }, [connect]);
  const { user, fetching } = useUser();
  const { player } = user ?? {};

  const { isOpen, onOpen, onClose } = useDisclosure();
-  const menuToggle = () => {
-    if (isOpen) {
-      document.body.style.height = 'auto';
-      document.body.style.overflowY = 'scroll';
-      return onClose();
-    }
-    document.body.style.height = '100%';
-    document.body.style.overflow = 'hidden';
-    return onOpen();
-  };
+  const menuToggle = () => (isOpen ? onClose() : onOpen());

  return (
    <Stack
@@ -482,7 +469,7 @@ export const MegaMenu: React.FC = () => {
    >
      <Flex
        justifyContent="space-between"
-        minH={{ base: '76px', md: '76px' }}
+        minH="5rem"
        borderBottom="1px"
        bg="rgba(0,0,0,0.5)"
        borderColor="#2B2244"
@@ -494,16 +481,17 @@ export const MegaMenu: React.FC = () => {
          onClick={menuToggle}
          flexWrap="nowrap"
          alignItems="center"
-          h="fit-content"
-          w="fit-content"
+          cursor="pointer"
+          h="2rem"
+          w="2rem"
          display={{ base: 'flex', lg: 'none' }}
          p={2}
          my="auto"
        >
          {isOpen ? (
-            <CloseIcon color="#FFF" ml={2} />
+            <CloseIcon fontSize="1.5rem" color="#FFF" ml={2} />
          ) : (
-            <HamburgerIcon color="#FFF" ml={2} />
+            <HamburgerIcon fontSize="2rem" color="#FFF" ml={2} />
          )}
        </Flex>
        <Flex
@@ -532,7 +520,7 @@ export const MegaMenu: React.FC = () => {
                  my="10px"
                  px="24px"
                  ml="90px"
-                  onClick={handleLoginClick}
+                  onClick={connect}
                >
                  Connect
                </MetaButton>
@@ -543,17 +531,16 @@ export const MegaMenu: React.FC = () => {
      </Flex>
      <Stack
        display={{ base: isOpen ? 'block' : 'none', xl: 'none' }}
-        position="absolute"
-        top={76}
+        position="fixed"
+        top="4.5rem"
        zIndex={1}
-        overflowY="scroll"
+        overflowX="hidden"
        w="100vw"
        bg="rgba(0, 0, 0, 0.8)"
-        h="calc(100vh - 160px)"
+        h="calc(100vh - 10rem)"
        sx={{ backdropFilter: 'blur(10px)' }}
-        p="0px 16px 16px"
+        p="1rem"
        border="none"
-        mt={0}
      >
        {MenuSectionLinks.map((section) => (
          <Stack pt={1} key={section.label}>
--- a/packages/web/components/MegaMenu/PlayerStatsBar.tsx
+++ b/packages/web/components/MegaMenu/PlayerStatsBar.tsx
@@ -0,0 +1,156 @@
+import {
+  Dashboard,
+  Flex,
+  HStack,
+  Image,
+  LogOut,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Profile,
+  Stack,
+  Text,
+  Tooltip,
+} from '@metafam/ds';
+import { numbers } from '@metafam/utils';
+import SeedMarket from 'assets/seed-icon.svg';
+import XPStar from 'assets/xp-star.svg';
+import { MetaLink } from 'components/Link';
+import { LoginButton } from 'components/LoginButton';
+import { PlayerAvatar } from 'components/Player/PlayerAvatar';
+import { useUser, useWeb3 } from 'lib/hooks';
+import { usePSeedBalance } from 'lib/hooks/balances';
+import React from 'react';
+import { getPlayerName, getPlayerURL } from 'utils/playerHelpers';
+
+const { amountToDecimal } = numbers;
+
+// Display player XP and Seed
+export const PlayerStatsBar = () => {
+  const { disconnect } = useWeb3();
+  const { user } = useUser();
+  const { player } = user ?? {};
+  const { pSeedBalance } = usePSeedBalance();
+
+  return (
+    <Flex
+      align="center"
+      display={{ base: 'flex', lg: 'none' }}
+      pos="fixed"
+      left={0}
+      bottom={0}
+      justify={player ? 'space-between' : 'center'}
+      w="100%"
+      h="5rem"
+      bg="rgba(0,0,0,0.75)"
+      borderColor="#2B2244"
+      px="1rem"
+      sx={{ backdropFilter: 'blur(10px)' }}
+    >
+      {!player ? (
+        <LoginButton />
+      ) : (
+        <>
+          <Menu>
+            <MenuButton
+              bg="transparent"
+              ariaLabel="menu options"
+              _focus={{ outline: 'none', bg: 'transparent' }}
+              _hover={{ bg: 'transparent' }}
+              _active={{ bg: 'transparent' }}
+            >
+              <Flex>
+                <PlayerAvatar {...{ player }} w={12} h={12} m={0} />
+                <Stack my={2} ml={2} justify="center">
+                  <Text
+                    fontSize={player.rank ? 14 : 22}
+                    fontWeight="semibold"
+                    m={0}
+                    p={0}
+                    lineHeight={1}
+                  >
+                    {getPlayerName(player)}
+                  </Text>
+                  {player.rank && (
+                    <Text fontSize={12} m={0} p={0} lineHeight={1}>
+                      {player.rank}
+                    </Text>
+                  )}
+                </Stack>
+              </Flex>
+            </MenuButton>
+            <MenuList color="black">
+              <MetaLink
+                color="black"
+                href={getPlayerURL(player) ?? '/'}
+                _hover={{ textDecoration: 'none' }}
+              >
+                <MenuItem>
+                  <Profile w={4} h={4} mr={4} /> View Profile
+                </MenuItem>
+              </MetaLink>
+              <MetaLink
+                color="black"
+                href={'/dashboard'}
+                _hover={{ textDecoration: 'none' }}
+              >
+                <MenuItem>
+                  <Dashboard w={4} h={4} mr={4} color="red.500" />
+                  Dashboard
+                </MenuItem>
+              </MetaLink>
+              <MenuItem onClick={disconnect}>
+                <LogOut w={4} h={4} mr={4} />
+                Disconnect
+              </MenuItem>
+            </MenuList>
+          </Menu>
+          <HStack height="100%" justify="flex-end" px="0.5rem">
+            <Tooltip label="Total XP" hasArrow>
+              <HStack
+                bg="rgba(0,0,0,0.25)"
+                border="1px solid #2B2244"
+                borderRadius="full"
+                px="0.75rem"
+                minW="fit-content"
+              >
+                <Image
+                  src={XPStar}
+                  alignSelf="center"
+                  alt="XP"
+                  boxSize="1.5rem"
+                />
+                <Text color="#FFF" lineHeight={2} fontSize={20}>
+                  {Math.trunc(player.totalXP).toLocaleString()}
+                </Text>
+              </HStack>
+            </Tooltip>
+            <Tooltip label="pSEEDs" hasArrow>
+              <HStack
+                bg="rgba(0,0,0,0.25)"
+                border="1px solid #2B2244"
+                borderRadius="full"
+                px="0.75rem"
+                minW="fit-content"
+              >
+                <Image
+                  src={SeedMarket}
+                  alignSelf="center"
+                  alt="Seed"
+                  boxSize="1.5rem"
+                />
+                <Text color="#FFF" lineHeight={2} fontSize={20}>
+                  {parseInt(
+                    amountToDecimal(pSeedBalance || '0', 18),
+                    10,
+                  ).toLocaleString()}
+                </Text>
+              </HStack>
+            </Tooltip>
+          </HStack>
+        </>
+      )}
+    </Flex>
+  );
+};
--- a/packages/web/components/MegaMenu/index.tsx
+++ b/packages/web/components/MegaMenu/index.tsx
@@ -0,0 +1,30 @@
+import { Stack } from '@metafam/ds';
+import BackgroundImage from 'assets/main-background.jpg';
+import { MegaMenu as MegaMenuHeader } from 'components/MegaMenu/MegaMenu';
+import { PlayerStatsBar as MegaMenuFooter } from 'components/MegaMenu/PlayerStatsBar';
+
+type Props = { hideMenu?: boolean };
+export const MegaMenu: React.FC<Props> = ({ hideMenu = false, children }) => (
+  <Stack
+    h="100vh"
+    w="100%"
+    spacing={0}
+    overflow="hidden"
+    pb={{ base: hideMenu ? '0' : '5rem', lg: '0' }}
+  >
+    {!hideMenu && <MegaMenuHeader />}
+    <Stack
+      w="100%"
+      h="100%"
+      spacing={0}
+      overflowY="auto"
+      overflowX="hidden"
+      bgSize="cover"
+      bgAttachment="fixed"
+      backgroundImage={`url(${BackgroundImage})`}
+    >
+      {children}
+    </Stack>
+    {!hideMenu && <MegaMenuFooter />}
+  </Stack>
+);
--- a/packages/web/components/Player/ColorBar.tsx
+++ b/packages/web/components/Player/ColorBar.tsx
@@ -39,14 +39,28 @@ export const ColorBar = ({
  }

  return (
-    <Flex
-      direction="column-reverse"
-      w="100%"
-      maxW="100%"
-      className="color-bar"
-      {...props}
-    >
-      <Flex maxW="100%" minH="1.5rem" mt={3}>
+    <FlexContainer spacing={4} {...props}>
+      <Text color="white">{types?.[mask]?.name}</Text>
+      <Flex
+        w="100%"
+        h="1.5rem"
+        border={0}
+        borderRadius="1rem"
+        overflow="hidden"
+      >
+        {parts.map((part) =>
+          (mask & part.mask) === 0 ? null : (
+            <Flex
+              key={part.mask}
+              grow={1}
+              bg={`linear-gradient(to right, ${colors[part.mask].start}, ${
+                colors[part.mask].end
+              })`}
+            />
+          ),
+        )}
+      </Flex>
+      <Flex w="100%">
        {parts.map((part) => {
          const set = (mask & part.mask) !== 0;

@@ -65,32 +79,6 @@ export const ColorBar = ({
          );
        })}
      </Flex>
-      <Flex
-        minH="1.5rem"
-        flex="0 0 100%"
-        minW="100%"
-        border={0}
-        borderRadius="15px"
-        overflow="hidden"
-      >
-        {parts.map((part) =>
-          (mask & part.mask) === 0 ? null : (
-            <Flex
-              key={part.mask}
-              grow={1}
-              h="1.5rem"
-              bg={`linear-gradient(to right, ${colors[part.mask].start}, ${
-                colors[part.mask].end
-              })`}
-            />
-          ),
-        )}
-      </Flex>
-      <FlexContainer mb={2} minH="1.5rem">
-        <Box as="span" color="white">
-          {types?.[mask]?.name}
-        </Box>
-      </FlexContainer>
-    </Flex>
+    </FlexContainer>
  );
 };
--- a/packages/web/components/PlayerStatsBar.tsx
+++ b/packages/web/components/PlayerStatsBar.tsx
@@ -1,184 +0,0 @@
-import {
-  Badge,
-  Dashboard,
-  Flex,
-  Image,
-  LogOut,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Profile,
-  Stack,
-  Text,
-  Tooltip,
-} from '@metafam/ds';
-import { numbers } from '@metafam/utils';
-import SeedMarket from 'assets/seed-icon.svg';
-import XPStar from 'assets/xp-star.svg';
-import { MetaLink } from 'components/Link';
-import { LoginButton } from 'components/LoginButton';
-import { PlayerAvatar } from 'components/Player/PlayerAvatar';
-import { useUser, useWeb3 } from 'lib/hooks';
-import { usePSeedBalance } from 'lib/hooks/balances';
-import React from 'react';
-import { getPlayerName, getPlayerURL } from 'utils/playerHelpers';
-
-const { amountToDecimal } = numbers;
-
-// Display player XP and Seed
-const PlayerStats = () => {
-  const { disconnect } = useWeb3();
-  const { user } = useUser();
-  const { player } = user ?? {};
-  const { pSeedBalance } = usePSeedBalance();
-
-  return (
-    <Flex
-      align="center"
-      display={{ base: 'flex', lg: 'none' }}
-      justifyContent={player ? 'space-between' : 'center'}
-      flex={1}
-      minW="100vw"
-      height="72px"
-      bg="rgba(0,0,0,0.75)"
-      borderColor="#2B2244"
-      sx={{ backdropFilter: 'blur(10px)' }}
-      position="fixed"
-      bottom={0}
-      zIndex={200}
-      boxSizing="border-box"
-      my="auto"
-      mr={0}
-    >
-      {!player ? (
-        <LoginButton />
-      ) : (
-        <>
-          <Flex py={1} px={2}>
-            <Menu strategy="fixed" offset={[-7, 9]}>
-              <MenuButton
-                bg="transparent"
-                aria-label="Options"
-                _focus={{ outline: 'none', bg: 'transparent' }}
-                _hover={{ bg: 'transparent' }}
-                _active={{ bg: 'transparent' }}
-              >
-                <Flex>
-                  <PlayerAvatar {...{ player }} w={12} h={12} m={0} />
-                  <Stack my={2} ml={2} justify="center">
-                    <Text
-                      fontSize={player.rank ? 14 : 22}
-                      fontWeight="semibold"
-                      m={0}
-                      p={0}
-                      lineHeight={1}
-                    >
-                      {getPlayerName(player)}
-                    </Text>
-                    {player.rank && (
-                      <Text fontSize={12} m={0} p={0} lineHeight={1}>
-                        {player.rank}
-                      </Text>
-                    )}
-                  </Stack>
-                </Flex>
-              </MenuButton>
-              <MenuList color="black">
-                <MetaLink
-                  color="black"
-                  href={getPlayerURL(player) ?? '/'}
-                  _hover={{ textDecoration: 'none' }}
-                >
-                  <MenuItem>
-                    <Profile w={4} h={4} mr={4} /> View Profile
-                  </MenuItem>
-                </MetaLink>
-                <MetaLink
-                  color="black"
-                  href={'/dashboard'}
-                  _hover={{ textDecoration: 'none' }}
-                >
-                  <MenuItem>
-                    <Dashboard w={4} h={4} mr={4} color="red.500" />
-                    Dashboard
-                  </MenuItem>
-                </MetaLink>
-                <MenuItem onClick={disconnect}>
-                  <LogOut w={4} h={4} mr={4} />
-                  Disconnect
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          </Flex>
-          <Flex
-            mr={2}
-            mt={2}
-            flexWrap="wrap"
-            height="100%"
-            alignSelf="baseline"
-            justifyContent="flex-end"
-          >
-            <Tooltip label="Total XP" hasArrow>
-              <Badge
-                display="flex"
-                minH="fill"
-                minW="fit-content"
-                py={2}
-                px={4}
-                mb={2}
-                bg="rgba(0,0,0,0.25)"
-                border="1px solid #2B2244"
-                borderRadius={50}
-              >
-                <Image
-                  src={XPStar}
-                  alignSelf="center"
-                  alt="XP"
-                  h={7}
-                  w={7}
-                  mr={[1, 3]}
-                />
-                <Text color="#FFF" lineHeight={2} fontSize={20}>
-                  {Math.trunc(player.totalXP).toLocaleString()}
-                </Text>
-              </Badge>
-            </Tooltip>
-            <Tooltip label="pSEEDs" hasArrow>
-              <Badge
-                display="flex"
-                minH="fill"
-                minW="fit-content"
-                py={2}
-                px={4}
-                mx={[0, 2]}
-                mb={2}
-                bg="rgba(0,0,0,0.25)"
-                border="1px solid #2B2244"
-                borderRadius={50}
-                alignSelf="center"
-              >
-                <Image
-                  src={SeedMarket}
-                  alignSelf="center"
-                  alt="Seed"
-                  h={7}
-                  w={6}
-                  mr={[1, 3]}
-                />
-                <Text color="#FFF" lineHeight={2} fontSize={20}>
-                  {parseInt(
-                    amountToDecimal(pSeedBalance || '0', 18),
-                    10,
-                  ).toLocaleString()}
-                </Text>
-              </Badge>
-            </Tooltip>
-          </Flex>
-        </>
-      )}
-    </Flex>
-  );
-};
-
-export const PlayerStatsBar: React.FC = () => <PlayerStats />;
--- a/packages/web/components/Setup/SetupPersonalityType.tsx
+++ b/packages/web/components/Setup/SetupPersonalityType.tsx
@@ -141,7 +141,7 @@ export const SetupPersonalityType: React.FC<SetupPersonalityTypeProps> = ({
  };

  return (
-    <FlexContainer>
+    <FlexContainer spacing={8}>
      <Flex direction="column">
        {isWizard && (
          <MetaHeading mb={5} textAlign="center">
@@ -168,14 +168,7 @@ export const SetupPersonalityType: React.FC<SetupPersonalityTypeProps> = ({
          .
        </Text>
      </Flex>
-      <FlexContainer
-        grow={1}
-        spacing={8}
-        maxW="70rem"
-        direction="row"
-        wrap="wrap"
-        id="colors"
-      >
+      <Wrap spacing={2} justify="center" maxW="70rem">
        {Object.keys(types).length &&
          Object.entries(BaseImages)
            .reverse()
@@ -185,74 +178,76 @@ export const SetupPersonalityType: React.FC<SetupPersonalityTypeProps> = ({
              const selected = ((colorMask ?? 0) & mask) > 0;

              return (
-                <Button
-                  key={mask}
-                  display="flex"
-                  direction="row"
-                  justifyContent="start"
-                  p={6}
-                  m={2}
-                  h="auto"
-                  w={{ base: '100%', md: 'auto' }}
-                  spacing={4}
-                  borderRadius={8}
-                  cursor="pointer"
-                  onClick={() => toggleMaskElement(mask)}
-                  autoFocus={idx === 0} // Doesn't work
-                  ref={(input) => {
-                    if (idx === 0 && !input?.getAttribute('focused-once')) {
-                      input?.focus();
-                      input?.setAttribute('focused-once', 'true');
-                    }
-                  }}
-                  onKeyPress={(e) => {
-                    if (e.key === 'Enter') {
-                      if (isWizard) handleNextPress();
-                      if (isEdit) save();
-                      e.preventDefault();
-                    }
-                  }}
-                  transition="background 0.25s, filter 0.5s"
-                  bgColor={selected ? 'purpleBoxDark' : 'purpleBoxLight'}
-                  _hover={{
-                    filter: 'hue-rotate(25deg)',
-                  }}
-                  _focus={{
-                    borderColor: '#FFFFFF55',
-                    outline: 'none',
-                  }}
-                  _active={{
-                    bg: selected ? 'purpleBoxDark' : 'purpleBoxLight',
-                  }}
-                  borderWidth={2}
-                  borderColor={selected ? 'purple.400' : 'transparent'}
-                >
-                  <Image
-                    w="100%"
-                    maxW={16}
-                    h={16}
-                    mr={2}
-                    src={image}
-                    alt={option.name}
-                    filter="drop-shadow(0px 0px 3px black)"
-                  />
-                  <FlexContainer align="stretch" ml={2}>
-                    <Text color="white" casing="uppercase" textAlign="left">
-                      {option.name}
-                    </Text>
-                    <Text
-                      color="blueLight"
-                      fontWeight="normal"
-                      whiteSpace="initial"
-                      textAlign="left"
-                    >
-                      {option.description}
-                    </Text>
-                  </FlexContainer>
-                </Button>
+                <WrapItem>
+                  <Button
+                    key={mask}
+                    display="flex"
+                    direction="row"
+                    justifyContent="start"
+                    p={6}
+                    m={2}
+                    h="auto"
+                    w={{ base: '100%', md: 'auto' }}
+                    spacing={4}
+                    borderRadius={8}
+                    cursor="pointer"
+                    onClick={() => toggleMaskElement(mask)}
+                    autoFocus={idx === 0} // Doesn't work
+                    ref={(input) => {
+                      if (idx === 0 && !input?.getAttribute('focused-once')) {
+                        input?.focus();
+                        input?.setAttribute('focused-once', 'true');
+                      }
+                    }}
+                    onKeyPress={(e) => {
+                      if (e.key === 'Enter') {
+                        if (isWizard) handleNextPress();
+                        if (isEdit) save();
+                        e.preventDefault();
+                      }
+                    }}
+                    transition="background 0.25s, filter 0.5s"
+                    bgColor={selected ? 'purpleBoxDark' : 'purpleBoxLight'}
+                    _hover={{
+                      filter: 'hue-rotate(25deg)',
+                    }}
+                    _focus={{
+                      borderColor: '#FFFFFF55',
+                      outline: 'none',
+                    }}
+                    _active={{
+                      bg: selected ? 'purpleBoxDark' : 'purpleBoxLight',
+                    }}
+                    borderWidth={2}
+                    borderColor={selected ? 'purple.400' : 'transparent'}
+                  >
+                    <Image
+                      w="100%"
+                      maxW={16}
+                      h={16}
+                      mr={2}
+                      src={image}
+                      alt={option.name}
+                      filter="drop-shadow(0px 0px 3px black)"
+                    />
+                    <FlexContainer align="stretch" ml={2}>
+                      <Text color="white" casing="uppercase" textAlign="left">
+                        {option.name}
+                      </Text>
+                      <Text
+                        color="blueLight"
+                        fontWeight="normal"
+                        whiteSpace="initial"
+                        textAlign="left"
+                      >
+                        {option.description}
+                      </Text>
+                    </FlexContainer>
+                  </Button>
+                </WrapItem>
              );
            })}
-      </FlexContainer>
+      </Wrap>

      <ColorBar
        mask={colorMask ?? null}
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -1,6 +1,5 @@
 import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
 import { MegaMenu } from 'components/MegaMenu';
-import { PlayerStatsBar } from 'components/PlayerStatsBar';
 import { CONFIG } from 'config';
 import { Web3ContextProvider } from 'contexts/Web3Context';
 import { wrapUrqlClient } from 'graphql/client';
@@ -53,9 +52,9 @@ const App: React.FC<WithUrqlProps> = ({
      )}
    </Head>
    <Web3ContextProvider {...{ resetUrqlClient }}>
-      {!pageProps.hideTopMenu && <MegaMenu />}
-      {!pageProps.hideTopMenu && <PlayerStatsBar />}
-      <Component {...pageProps} />
+      <MegaMenu hideMenu={pageProps.hideMenu}>
+        <Component {...pageProps} />
+      </MegaMenu>
    </Web3ContextProvider>
  </ChakraProvider>
 );
--- a/packages/web/pages/community/events.tsx
+++ b/packages/web/pages/community/events.tsx
@@ -1,24 +1,12 @@
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

 const EventsPage: React.FC = () => (
-  <PageContainer p={0} position="fixed">
-    <HeadComponent
-      title="MetaGame Events"
-      description={descriptions.events}
-      url={`https://wiki.metagame.wtf/docs/great-houses/house-of-daos`}
-    />
-    <iframe
-      title="MetaGame Events"
-      src="https://wiki.metagame.wtf/docs/great-houses/house-of-daos"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </PageContainer>
+  <EmbedContainer
+    title="MetaGame Events"
+    description={descriptions.events}
+    url={`https://wiki.metagame.wtf/docs/great-houses/house-of-daos`}
+  />
 );

 export default EventsPage;
--- a/packages/web/pages/community/players.tsx
+++ b/packages/web/pages/community/players.tsx
@@ -74,7 +74,7 @@ const Players: React.FC<Props> = () => {
  return (
    <PageContainer>
      <HeadComponent url="https://my.metagame.wtf/community/players" />
-      <VStack w="100%" spacing={{ base: 4, md: 8 }} pb={{ base: 16, lg: 0 }}>
+      <VStack w="100%" spacing={{ base: 4, md: 8 }} pb={8}>
        <PlayerFilter
          {...{
            fetching,
--- a/packages/web/pages/invest/becomeapatron.tsx
+++ b/packages/web/pages/invest/becomeapatron.tsx
@@ -1,24 +1,12 @@
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

 const BecomeAPatronPage: React.FC = () => (
-  <PageContainer p={0} position="fixed">
-    <HeadComponent
-      title="MetaGame: Become a Patron"
-      description={descriptions.becomeapatron}
-      url="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
-    />
-    <iframe
-      title="MetaGame: Become a Patron"
-      src="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </PageContainer>
+  <EmbedContainer
+    title="MetaGame: Become a Patron"
+    description={descriptions.becomeapatron}
+    url="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
+  />
 );

 export default BecomeAPatronPage;
--- a/packages/web/pages/invest/buyseeds.tsx
+++ b/packages/web/pages/invest/buyseeds.tsx
@@ -1,31 +1,12 @@
-import { LoadingState } from '@metafam/ds';
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React, { useState } from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

-const BuySeedsPage: React.FC = () => {
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <PageContainer p={0} position="fixed">
-      {loading && <LoadingState position="absolute" />}
-      <HeadComponent
-        title="MetaGame: Buy Seeds"
-        description={descriptions.buyseeds}
-        url="https://polygon.balancer.fi/#/trade"
-      />
-      <iframe
-        title="MetaGame: Buy Seeds"
-        src="https://polygon.balancer.fi/#/trade"
-        onLoad={() => setLoading(false)}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-      />
-    </PageContainer>
-  );
-};
+const BuySeedsPage: React.FC = () => (
+  <EmbedContainer
+    title="MetaGame: Buy Seeds"
+    description={descriptions.buyseeds}
+    url="https://polygon.balancer.fi/#/trade"
+  />
+);

 export default BuySeedsPage;
--- a/packages/web/pages/invest/grants.tsx
+++ b/packages/web/pages/invest/grants.tsx
@@ -1,31 +1,12 @@
-import { LoadingState } from '@metafam/ds';
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React, { useState } from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

-const GrantsPage: React.FC = () => {
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <PageContainer p={0} position="fixed">
-      {loading && <LoadingState position="absolute" />}
-      <HeadComponent
-        title="MetaGame: Support Grants"
-        description={descriptions.grants}
-        url="https://giveth.io/"
-      />
-      <iframe
-        title="MetaGame: Support Grants"
-        src="https://giveth.io/"
-        onLoad={() => setLoading(false)}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-      />
-    </PageContainer>
-  );
-};
+const GrantsPage: React.FC = () => (
+  <EmbedContainer
+    title="MetaGame: Support Grants"
+    description={descriptions.grants}
+    url="https://giveth.io/"
+  />
+);

 export default GrantsPage;
--- a/packages/web/pages/invest/plantseeds.tsx
+++ b/packages/web/pages/invest/plantseeds.tsx
@@ -1,31 +1,12 @@
-import { LoadingState } from '@metafam/ds';
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React, { useState } from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

-const PlantSeedsPage: React.FC = () => {
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <PageContainer p={0} position="fixed">
-      {loading && <LoadingState position="absolute" />}
-      <HeadComponent
-        title="MetaGame: Plant Seeds"
-        description={descriptions.plantseeds}
-        url="https://polygon.balancer.fi/#/pool/0x8a8fcd351ed553fc75aecbc566a32f94471f302e000100000000000000000081/invest"
-      />
-      <iframe
-        title="MetaGame: Plant Seeds"
-        src="https://polygon.balancer.fi/#/pool/0x8a8fcd351ed553fc75aecbc566a32f94471f302e000100000000000000000081/invest"
-        onLoad={() => setLoading(false)}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-      />
-    </PageContainer>
-  );
-};
+const PlantSeedsPage: React.FC = () => (
+  <EmbedContainer
+    title="MetaGame: Plant Seeds"
+    description={descriptions.plantseeds}
+    url="https://polygon.balancer.fi/#/pool/0x8a8fcd351ed553fc75aecbc566a32f94471f302e000100000000000000000081/invest"
+  />
+);

 export default PlantSeedsPage;
--- a/packages/web/pages/learn/metaradio.tsx
+++ b/packages/web/pages/learn/metaradio.tsx
@@ -1,31 +1,12 @@
-import { LoadingState } from '@metafam/ds';
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React, { useState } from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

-const MetaRadioPage: React.FC = () => {
-  const [loading, setLoading] = useState(true);
-
-  return (
-    <PageContainer p={0} position="fixed">
-      {loading && <LoadingState position="absolute" />}
-      <HeadComponent
-        title="MetaRadio by MetaFam"
-        description={descriptions.metaradio}
-        url="https://anchor.fm/MetaGame/"
-      />
-      <iframe
-        title="MetaRadio by MetaFam"
-        src="https://anchor.fm/MetaGame/"
-        onLoad={() => setLoading(false)}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-      />
-    </PageContainer>
-  );
-};
+const MetaRadioPage: React.FC = () => (
+  <EmbedContainer
+    title="MetaRadio by MetaFam"
+    description={descriptions.metaradio}
+    url="https://anchor.fm/MetaGame/"
+  />
+);

 export default MetaRadioPage;
--- a/packages/web/pages/learn/playbooks.tsx
+++ b/packages/web/pages/learn/playbooks.tsx
@@ -1,24 +1,12 @@
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

 const PlaybooksPage: React.FC = () => (
-  <PageContainer p={0} position="fixed">
-    <HeadComponent
-      title="MetaGame Playbooks"
-      description={descriptions.playbooks}
-      url="https://wiki.metagame.wtf/docs/playbooks/browse"
-    />
-    <iframe
-      title="MetaGame Playbooks"
-      src="https://wiki.metagame.wtf/docs/playbooks/browse"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </PageContainer>
+  <EmbedContainer
+    title="MetaGame Playbooks"
+    description={descriptions.playbooks}
+    url="https://wiki.metagame.wtf/docs/playbooks/browse"
+  />
 );

 export default PlaybooksPage;
--- a/packages/web/pages/learn/thegreathouses.tsx
+++ b/packages/web/pages/learn/thegreathouses.tsx
@@ -1,24 +1,12 @@
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

 const TheGreatHousesPage: React.FC = () => (
-  <PageContainer p={0} position="fixed">
-    <HeadComponent
-      title="The Great Houses of MetaGame"
-      description={descriptions.thegreathouses}
-      url="https://wiki.metagame.wtf/docs/great-houses/house-of-daos/"
-    />
-    <iframe
-      title="The Great Houses of MetaGame"
-      src="https://wiki.metagame.wtf/docs/great-houses/house-of-daos/"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </PageContainer>
+  <EmbedContainer
+    title="The Great Houses of MetaGame"
+    description={descriptions.thegreathouses}
+    url="https://wiki.metagame.wtf/docs/great-houses/house-of-daos/"
+  />
 );

 export default TheGreatHousesPage;
--- a/packages/web/pages/learn/wiki.tsx
+++ b/packages/web/pages/learn/wiki.tsx
@@ -1,24 +1,12 @@
-import { PageContainer } from 'components/Container';
-import { HeadComponent } from 'components/Seo';
-import React from 'react';
+import { EmbedContainer } from 'components/Container';
 import { descriptions } from 'utils/menuLinks';

-const WikiPage: React.FC = () => (
-  <PageContainer p={0} position="fixed">
-    <HeadComponent
-      title="MetaGame Wiki"
-      description={descriptions.forum}
-      url="https://wiki.metagame.wtf/docs/wtf-is-metagame/wtf-is-metagame"
-    />
-    <iframe
-      title="MetaGame Wiki"
-      src="https://wiki.metagame.wtf/docs/wtf-is-metagame/wtf-is-metagame"
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </PageContainer>
+const WikiEmbedPage: React.FC = () => (
+  <EmbedContainer
+    title="MetaGame Wiki"
+    description={descriptions.wiki}
+    url="https://wiki.metagame.wtf/docs/wtf-is-metagame/wtf-is-metagame"
+  />
 );

-export default WikiPage;
+export default WikiEmbedPage;
--- a/packages/web/pages/player/[username].tsx
+++ b/packages/web/pages/player/[username].tsx
@@ -80,7 +80,7 @@ export const PlayerPage: React.FC<Props> = ({
  if (!player) return <Page404 />;

  return (
-    <PageContainer pt={0} px={[0, 4, 8]}>
+    <PageContainer p={0} px={[0, 4, 8]}>
      <HeadComponent
        title={`MetaGame Player Profile: ${getPlayerName(player)}`}
        description={(getPlayerDescription(player) ?? '').replace('\n', ' ')}