Fixes for the appearance of the Patrons Join page (#1442)

Ref: https://github.com/MetaFam/TheGame/issues/1442
2026-04-24 03:00:09 -04:00 · 2023-01-16 22:32:42 +08:00
parent f66d02ed86
commit da5927e174
8 changed files with 182 additions and 180 deletions
--- a/packages/web/components/Patron/Join/BecomePatron.tsx
+++ b/packages/web/components/Patron/Join/BecomePatron.tsx
@@ -6,6 +6,7 @@ import {
  Image,
  MetaButton,
  Text,
+  VStack,
 } from '@metafam/ds';
 import PatronCircle from 'assets/patron/patron-circle.png';
 import Seed from 'assets/patron/seed.png';
@@ -24,132 +25,110 @@ export const BecomePatron: React.FC = () => (
    </Heading>

    <Flex
-      direction={{ base: 'column', md: 'row' }}
+      direction={{ base: 'column', lg: 'row' }}
+      alignItems={{ base: 'center', lg: 'stretch' }}
      justifyContent="center"
-      alignItems="center"
    >
-      <Flex direction="column" width="100%" align="center">
-        <Flex
-          direction="column"
-          bg="whiteAlpha.200"
-          backdropFilter="blur(7px)"
-          rounded="lg"
-          p={6}
-          maxW="25rem" // (2 / 3.5) = ~0.571 aspect ratio desired
-          w="full"
-          h="full"
-          align="stretch"
-          position="relative"
-          overflow="hidden"
-          justify="space-between"
-          my={12}
-          height="40em"
-        >
-          <Flex justify="center" align="center">
-            <Image src={Seed.src} height="auto" maxW="16rem" my="6" />
-          </Flex>
-          <Text textAlign="center" fontSize="xl" as="p" marginBottom="8">
+      <Box
+        className="mg-patron-join-card-bg" // CSS class defined in packages/web/pages/Guild/Join/index.tsx
+        maxW={{ base: 'md', lg: '24rem' }}
+        p={6}
+      >
+        <VStack spacing={4}>
+          <Image
+            src={Seed.src}
+            alt="Seed icon"
+            mx="auto"
+            maxH={{ md: '20rem', lg: '12rem' }}
+            width="auto"
+          />
+          <Text color="white" fontFamily="mono" fontSize="lg">
            Water Seeds yourself
          </Text>
-          <Text mb={4}>
-            Watering Seeds means adding Ether & RAI to the Seed pool aka
+          <Text color="white">
+            Watering Seeds means adding Ether &amp; RAI to the Seed pool aka
            plantation. You’ll need to have some Ether on Polygon, add it to the
-            pool, join Discord & talk to the CollabLand bot to let you in.
+            pool, join Discord &amp; talk to the CollabLand bot to let you in.
          </Text>
          <Text>Want a more detailed guide?</Text>
+          <Box mt="auto">
+            <MetaButton
+              as="a"
+              bg="#E839B7"
+              borderRadius={0}
+              color="white"
+              href="/play/paths/patrons-path"
+              minW="10rem"
+              my={2}
+              px={6}
+              _hover={{
+                backgroundColor: 'rgba(232, 57, 183, 0.6)',
+              }}
+              _active={{
+                backgroundColor: 'rgba(232, 57, 183, 0.6)',
+                transform: 'scale(0.8)',
+              }}
+            >
+              YES PLS!
+            </MetaButton>
+          </Box>
+        </VStack>
+      </Box>

-          <Flex mt="6" justifyContent="center">
-            <Box mt={6} mb={4} px={2}>
-              <MetaButton
-                maxW=""
-                as="a"
-                bg="#E839B7"
-                borderRadius={0}
-                color="white"
-                href="/play/paths/patrons-path"
-                minW="10rem"
-                mt={8}
-                px={6}
-                textTransform="uppercase"
-                _hover={{
-                  backgroundColor: 'rgba(232, 57, 183, 0.6)',
-                }}
-                _active={{
-                  backgroundColor: 'rgba(232, 57, 183, 0.6)',
-                  transform: 'scale(0.8)',
-                }}
-              >
-                YES PLS!
-              </MetaButton>
-            </Box>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      <Flex height="100%" justifyContent="center">
-        <Text my="12" fontSize="lg" fontWeight="bold" as="h3">
+      <Box textAlign="center" p={9} alignSelf="center">
+        <Text color="white" fontFamily="mono" fontSize="lg">
          OR
        </Text>
-      </Flex>
+      </Box>

-      <Flex direction="column" width="100%" align="center">
-        <Flex
-          direction="column"
-          bg="whiteAlpha.200"
-          backdropFilter="blur(7px)"
-          rounded="lg"
-          p={6}
-          maxW="25rem" // (2 / 3.5) = ~0.571 aspect ratio desired
-          w="full"
-          h="full"
-          align="stretch"
-          position="relative"
-          overflow="hidden"
-          justify="space-between"
-          my={12}
-          height="40em"
-        >
-          <Flex justify="center" align="center">
-            <Image src={PatronCircle.src} height="auto" maxW="16rem" my="6" />
-          </Flex>
-          <Text textAlign="center" fontSize="xl" as="p" marginBottom="8">
-            Buy & forget about it
+      <Box
+        className="mg-patron-join-card-bg"
+        maxW={{ base: 'md', lg: '24rem' }}
+        p={6}
+      >
+        <VStack spacing={4}>
+          <Image
+            src={PatronCircle.src}
+            alt="Cloaked figure with staff"
+            mx="auto"
+            maxH={{ md: '20rem', lg: '12rem' }}
+            width="auto"
+          />
+          <Text color="white" fontFamily="mono" fontSize="lg">
+            Buy &amp; forget about it
          </Text>
-          <Text mb={4}>
-            Too busy for buying the esoteric Rai, bridging over to Polygon &
+          <Text color="white">
+            Too busy for buying the esoteric Rai, bridging over to Polygon &amp;
            patiently watering Seeds over a long period of time so as to not
-            overwater & slip?
+            overwater &amp; slip?
          </Text>
          <Text>
            We got you covered! You can buy a chunk directly from MetaFam, just
            ask.
          </Text>
-          <Flex mt={6} justifyContent="center">
-            <Box mt={12} mb={4} px={2}>
-              <MetaButton
-                maxW=""
-                bg="#E839B7"
-                borderRadius={0}
-                color="white"
-                href="https://form.typeform.com/to/mAmXKSAc"
-                minW="10rem"
-                mt={8}
-                px={6}
-                textTransform="uppercase"
-                _hover={{
-                  backgroundColor: 'rgba(232, 57, 183, 0.6)',
-                }}
-                _active={{
-                  backgroundColor: 'rgba(232, 57, 183, 0.6)',
-                  transform: 'scale(0.8)',
-                }}
-              >
-                Perfect!
-              </MetaButton>
-            </Box>
-          </Flex>
-        </Flex>
-      </Flex>
+          <Box>
+            <MetaButton
+              as="a"
+              bg="#E839B7"
+              borderRadius={0}
+              color="white"
+              href="https://form.typeform.com/to/mAmXKSAc"
+              minW="10rem"
+              my={2}
+              px={6}
+              _hover={{
+                backgroundColor: 'rgba(232, 57, 183, 0.6)',
+              }}
+              _active={{
+                backgroundColor: 'rgba(232, 57, 183, 0.6)',
+                transform: 'scale(0.8)',
+              }}
+            >
+              PERFECT!
+            </MetaButton>
+          </Box>
+        </VStack>
+      </Box>
    </Flex>
  </Container>
 );
--- a/packages/web/components/Patron/Join/LeagueCardItem.tsx
+++ b/packages/web/components/Patron/Join/LeagueCardItem.tsx
@@ -7,10 +7,21 @@ type ItemProps = {
 };

 export const LeagueCardItem: React.FC<ItemProps> = ({ text }: ItemProps) => (
-  <Flex width="100%" flexDirection="row" justifyContent="space-between">
-    <Text color="white" fontSize="lg" fontWeight="light">
+  <Flex
+    width="100%"
+    flexDirection="row"
+    alignItems="center"
+    justifyContent="space-between"
+  >
+    <Text color="white" fontSize="md" lineHeight={1.3}>
      {text}
    </Text>
-    <Image src={CheckMark.src} width="1.75rem" height="1.75rem" m={1} />
+    <Image
+      src={CheckMark.src}
+      width="1.5rem"
+      height="1.5rem"
+      marginLeft={2}
+      my={1}
+    />
  </Flex>
 );
--- a/packages/web/components/Patron/Join/PerksCard.tsx
+++ b/packages/web/components/Patron/Join/PerksCard.tsx
@@ -31,8 +31,8 @@ export const PerksCard: React.FC<Props> = ({
      pSeeds={pSeeds}
      amountUsd={amountUsd}
    />
-    <Box p={4} width="100%" color="white">
-      <Flex width="100%" flexDirection="row" flexWrap="wrap">
+    <Box px={6} paddingBottom={6} paddingTop={4} width="100%" color="white">
+      <Flex width="100%" flexDirection="row" flexWrap="wrap" gap={2}>
        {list.map((text: string, index: number) => (
          <LeagueCardItem key={index} text={text} />
        ))}
--- a/packages/web/components/Patron/Join/PerksHeader.tsx
+++ b/packages/web/components/Patron/Join/PerksHeader.tsx
@@ -20,7 +20,7 @@ export const PerksHeader = ({ title, count, pSeeds, amountUsd }: Props) => {
    : pSeedLabel;
  let amountDisplay = (
    <Text color="white" fontSize="md">
-      current req: {amountLabel}
+      Current req: {amountLabel}
    </Text>
  );
  if (amountUsd != null) {
@@ -28,17 +28,27 @@ export const PerksHeader = ({ title, count, pSeeds, amountUsd }: Props) => {
  }
  return (
    <Flex
+      alignItems="baseline"
      direction={{ base: 'column', sm: 'row' }}
      justify="space-between"
-      p="4"
-      roundedTop="lg"
+      px={6}
+      paddingTop={6}
      width="100%"
    >
-      <Flex align="center">
-        <Text color="white" fontWeight="bold" mr={8}>
+      <Flex alignItems="baseline">
+        <Text
+          color="white"
+          fontSize="md"
+          fontWeight="bold"
+          mr={{
+            base: '2',
+            md: '4',
+          }}
+          textTransform="uppercase"
+        >
          {title}
        </Text>
-        <Text color="landing450" fontSize="sm" fontWeight="bold">
+        <Text color="landing450" fontSize="sm" whiteSpace="nowrap">
          {typeof count === 'number'
            ? `(total of ${count.toLocaleString()})`
            : `(${count})`}
--- a/packages/web/components/Patron/Join/RankedLeagues.tsx
+++ b/packages/web/components/Patron/Join/RankedLeagues.tsx
@@ -80,7 +80,7 @@ const PerksList = [
    rank: PlayerRank_Enum.Silver,
  },
  {
-    title: 'Gold League',
+    title: 'Golden League',
    list: GoldLeagueList,
    rank: PlayerRank_Enum.Gold,
  },
@@ -129,23 +129,25 @@ export const RankedLeagues: React.FC<Props> = ({
        fontWeight={700}
        mb={[4, 4, 4, 12]}
      >
-        Ranked Leagues &amp; Perks
+        Leagues &amp; Perks
      </Heading>

-      <VStack>
-        <Flex justify="center">
-          <Box p="4" maxW="45rem" className="mg-patron-join-card-bg">
-            <Text>
-              The total number of Patrons in Phase I is limited to 150. The rank
-              requirements are subject to change based on top 150 pSeed hodlors
-              &amp; most perks (besides seasonal) will only be unlocked in the
-              transition to Phase II — set for Q3 2023.
-            </Text>
-          </Box>
-        </Flex>
-        <Flex pt={'2'}>
-          <Text fontSize={'4xl'}>👇</Text>
-        </Flex>
+      <VStack spacing={8}>
+        <Box p={6} maxW="3xl" className="mg-patron-join-card-bg">
+          <Text as="p" mb={3}>
+            Becoming a patron also comes with some perks!
+          </Text>
+          <Text as="p">
+            The total number of Patrons in Phase I is limited to 150. The rank
+            requirements are subject to change based on top 150 pSeed hodlors
+            &amp; most perks (besides seasonal) will only be unlocked in the
+            transition to Phase II — set for Q3 2023.
+          </Text>
+        </Box>
+
+        <Text fontSize="4xl" pb={2} textAlign="center">
+          👇
+        </Text>
      </VStack>

      <Flex mb={'6'} direction={'column'} align={'center'}>
@@ -182,7 +184,7 @@ export const RankedLeagues: React.FC<Props> = ({
        <Box
          className={'mg-patron-join-card-bg'}
          borderRadius={8}
-          maxW="2xl"
+          maxW="3xl"
          my={4}
        >
          <PerksHeader
@@ -191,8 +193,14 @@ export const RankedLeagues: React.FC<Props> = ({
            pSeeds={topHodlerPSeeds}
            amountUsd={pSeedPrice != null ? topHodlerPSeeds * pSeedPrice : null}
          />
-          <Box p={4} width="100%" color="white">
-            <Flex width="100%" flexDirection="row" flexWrap="wrap">
+          <Box
+            color="white"
+            px={6}
+            paddingBottom={6}
+            paddingTop={4}
+            width="100%"
+          >
+            <Flex width="100%" flexDirection="row" flexWrap="wrap" gap={2}>
              {No1PatronList.map((text: string, index: number) => (
                <LeagueCardItem key={index} text={text} />
              ))}
@@ -203,11 +211,12 @@ export const RankedLeagues: React.FC<Props> = ({
        <Box
          className={'mg-patron-join-card-bg'}
          borderRadius={8}
-          maxW="2xl"
+          maxW="3xl"
          my={2}
          p={4}
+          width="100%"
        >
-          <Text fontWeight="light" fontSize="lg" textAlign="center">
+          <Text fontSize="md" textAlign="center" width="100%">
            Note: Yes, you get what the previous league gets + your own league
            perks!
          </Text>
--- a/packages/web/components/Patron/Join/WateringSeeds.tsx
+++ b/packages/web/components/Patron/Join/WateringSeeds.tsx
@@ -17,16 +17,9 @@ export const WateringSeeds: React.FC = () => (
    </Heading>

    <Flex direction="column" width="100%" align="center">
-      <Image
-        src={SeedsDiagram.src}
-        height="auto"
-        width="80vw"
-        my="6"
-        maxW="50rem"
-      />
+      <Image alt="Diagram of the Seeds concept" src={SeedsDiagram.src} my="6" />
      <Box mb={4} px={2}>
        <MetaButton
-          maxW=""
          as="a"
          bg="#E839B7"
          borderRadius={0}
--- a/packages/web/components/Patron/Join/WhatsTheProduct.tsx
+++ b/packages/web/components/Patron/Join/WhatsTheProduct.tsx
@@ -1,16 +1,8 @@
-import {
-  Box,
-  Container,
-  Flex,
-  Heading,
-  ListItem,
-  Text,
-  UnorderedList,
-} from '@metafam/ds';
+import { Container, Heading, ListItem, Text, UnorderedList } from '@metafam/ds';
 import React from 'react';

 export const WhatsTheProduct: React.FC = () => (
-  <Container as="section" className="mg-patron-join-section" my={[4, 4, 4, 12]}>
+  <Container as="section" className="mg-patron-join-section">
    <Heading
      as="h2"
      color="white"
@@ -20,14 +12,19 @@ export const WhatsTheProduct: React.FC = () => (
    >
      So what’s the product, what’s the revenue model???
    </Heading>
-    <Flex justify="center" mb={24}>
-      <Text p="4" maxW="45rem" className="mg-patron-join-card-bg">
-        There are a few, actually, along with various monetization &
+
+    <Container
+      className="mg-patron-join-card-bg" // CSS class defined in packages/web/pages/Patron/Join/index.tsx
+      maxW="3xl"
+      p={6}
+    >
+      <Text>
+        There are a few, actually, along with various monetization &amp;
        sustainability strategies. If you want to dig deeper, it might be best
-        to dig down the raids section & ask some questions or read the
+        to dig down the raids section &amp; ask some questions or read the
        Purplepaper 🙃
      </Text>
-    </Flex>
+    </Container>

    <Heading
      as="h2"
@@ -35,25 +32,28 @@ export const WhatsTheProduct: React.FC = () => (
      fontFamily="mono"
      fontWeight={700}
      mb={[4, 4, 4, 12]}
+      mt={{ base: 8, md: 20 }} // Match the spacing of the VStack that wraps all of these headings+boxes
    >
      Why you should become a Patron of MetaGame?
    </Heading>

-    <Flex justify="center">
-      <Box p="4" maxW="45rem" className="mg-patron-join-card-bg">
-        <Text>
-          We prefer our patrons inrinsically motivated, so the main reason you'd
-          want to become a patron is just the fact you love this whole idea of
-          MetaGame & want to see it succeed.
-        </Text>
-        <UnorderedList>
-          <ListItem>
-            If you weren’t so damn busy, you’d probably join in on building it,
-            but at this point, its easier for you to just pitch in a bucket of
-            water & support the movement passively.
-          </ListItem>
-        </UnorderedList>
-      </Box>
-    </Flex>
+    <Container
+      className="mg-patron-join-card-bg" // CSS class defined in packages/web/pages/Patron/Join/index.tsx
+      maxW="3xl"
+      p={6}
+    >
+      <Text>
+        We prefer our patrons inrinsically motivated, so the main reason you'd
+        want to become a patron is just the fact you love this whole idea of
+        MetaGame &amp; want to see it succeed.
+      </Text>
+      <UnorderedList>
+        <ListItem>
+          If you weren’t so damn busy, you’d probably join in on building it,
+          but at this point, its easier for you to just pitch in a bucket of
+          water &amp; support the movement passively.
+        </ListItem>
+      </UnorderedList>
+    </Container>
  </Container>
 );
--- a/packages/web/components/Patron/Join/WhoArePatrons.tsx
+++ b/packages/web/components/Patron/Join/WhoArePatrons.tsx
@@ -3,7 +3,7 @@ import PatronMage from 'assets/patron/patron-mage.png';
 import React from 'react';

 export const WhoArePatrons: React.FC = () => (
-  <Container as="section" className="mg-patron-join-section" my={[4, 4, 4, 12]}>
+  <Container as="section" className="mg-patron-join-section">
    <Heading
      as="h2"
      color="white"