Closes #619 badge container new style

components/u/BadgeContainer.tsx

@@ -1,14 +1,14 @@
 import { Image as ChakraImage } from "@chakra-ui/image";
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useState } from "react";
 import { CSSVariables } from "utils/CSSVariables";
-import { Fragment } from "react";
 
 const BadgeContainer = ({
   showInfo,
   showBadges,
   badges,
 }: {
-  showInfo: boolean;
+  showInfo?: boolean;
   showBadges: boolean;
   badges: {
     src: string;
@@ -16,62 +16,81 @@ const BadgeContainer = ({
     count: number;
   }[];
 }) => {
+  const [badgeInfoShown, setBadgeInfoShown] = useState("");
   return (
-    <Flex
-      flexDir={showInfo ? "column" : "row"}
-      flexWrap="wrap"
-      align="center"
-      justify="center"
-      bg="black"
-      color="white"
-      rounded="lg"
-      maxW={48}
-      mx="auto"
-      my={3}
-    >
-      {showBadges &&
-        badges.flatMap((badge, i) => {
-          const isLast = i === badges.length - 1;
-          if (showInfo)
-            return (
-              <Fragment key={badge.src}>
-                <Flex justify="center" align="center" my={2}>
-                  <ChakraImage
-                    w={10}
-                    h={10}
-                    m={4}
-                    src={`/badges/${badge.src}`}
-                  />{" "}
-                  <Text fontSize="sm">{badge.description}</Text>
+    <>
+      <Flex
+        flexDir={showInfo ? "column" : "row"}
+        flexWrap="wrap"
+        justify="center"
+        color="white"
+        rounded="lg"
+        mx="auto"
+        mt={2}
+      >
+        {showBadges &&
+          badges.flatMap((badge) => {
+            if (showInfo)
+              return (
+                <Flex my={2} key={badge.src} align="center">
+                  <Box background="black" borderRadius="5px">
+                    <ChakraImage
+                      w={10}
+                      h={10}
+                      m={1}
+                      src={`/badges/${badge.src}`}
+                    />
+                  </Box>{" "}
+                  <Text ml={4} fontSize="sm" color={CSSVariables.textColor}>
+                    {badge.description}
+                  </Text>
                 </Flex>
-              </Fragment>
-            );
-          return (
-            <Fragment key={badge.src}>
-              <ChakraImage
-                key={`${badge.src}`}
-                w={10}
-                h={10}
-                m={1}
-                src={`/badges/${badge.src}`}
-              />
-              <Text
-                style={{
-                  marginLeft: -3,
-                  marginTop: -25,
-                  paddingRight: isLast ? 0 : 5,
-                  fontSize: "0.7rem",
-                  fontWeight: "bold",
-                  color: CSSVariables.themeColor,
-                }}
-                display={badge.count === 1 ? "none" : "block"}
+              );
+            return (
+              <Box
+                key={badge.src}
+                background="black"
+                borderRadius="5px"
+                m={2}
+                onMouseEnter={() => setBadgeInfoShown(`${badge.description}`)}
+                onClick={() => setBadgeInfoShown(`${badge.description}`)}
               >
-                {`x${badge.count}`}
-              </Text>
-            </Fragment>
-          );
-        })}
-    </Flex>
+                <ChakraImage
+                  key={`${badge.src}`}
+                  w={10}
+                  h={10}
+                  m={1}
+                  src={`/badges/${badge.src}`}
+                />
+                <Text
+                  style={{
+                    marginTop: -58,
+                    marginLeft: 41,
+                    fontSize: "0.7rem",
+                    fontWeight: "bold",
+                    color: CSSVariables.themeColor,
+                  }}
+                  display={badge.count === 1 ? "none" : "block"}
+                  position="absolute"
+                  background="black"
+                  borderRadius="50%"
+                  padding={1}
+                >
+                  {`x${badge.count}`}
+                </Text>
+              </Box>
+            );
+          })}
+      </Flex>
+      <Box
+        fontSize="sm"
+        textAlign="center"
+        color={CSSVariables.themeGray}
+        visibility={badgeInfoShown ? "visible" : "hidden"}
+      >
+        {badgeInfoShown || "Placeholder"}
+      </Box>
+    </>
   );
 };
 

components/u/Badges.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@chakra-ui/button";
 import { useEffect, useMemo, useState } from "react";
 import { wonITZCount } from "utils/constants";
 import BadgeContainer from "./BadgeContainer";
@@ -227,14 +226,15 @@ const Badges = ({
   patreonTier,
   peakXP,
   presentationMode = false,
+  showInfo,
 }: {
   userId: number;
   userDiscordId: string;
   patreonTier: number | null;
   peakXP?: number;
   presentationMode?: boolean;
+  showInfo?: boolean;
 }) => {
-  const [showInfo, setShowInfo] = useState(false);
   const [imgsLoaded, setImgsLoaded] = useState(false);
 
   const badges = useMemo(
@@ -267,23 +267,11 @@ const Badges = ({
   if (badges.length === 0) return null;
 
   return (
-    <>
-      <BadgeContainer
-        badges={badges}
-        showBadges={imgsLoaded}
-        showInfo={showInfo}
-      />
-      <Button
-        my={3}
-        mx="auto"
-        size="xs"
-        display="block"
-        variant="ghost"
-        onClick={() => setShowInfo(!showInfo)}
-      >
-        {showInfo ? "Hide info" : "Show info"}
-      </Button>
-    </>
+    <BadgeContainer
+      badges={badges}
+      showBadges={imgsLoaded}
+      showInfo={showInfo}
+    />
   );
 };
 

components/u/ProfileOwnersButton.tsx

@@ -52,13 +52,15 @@ const ProfileOwnersButtons = ({
           </Button>
         ) : null}
       </HStack>
-      <Box mt={4} fontSize="xs" color={CSSVariables.themeGray}>
-        Editing profile colors is available for{" "}
-        <MyLink href="https://www.patreon.com/sendou" isExternal>
-          patrons
-        </MyLink>{" "}
-        of tier &quot;Supporter&quot; ($5 dollar tier)
-      </Box>
+      {!isColorEditorsButtonClickable ? (
+        <Box mt={4} fontSize="xs" color={CSSVariables.themeGray}>
+          Editing profile colors is available for{" "}
+          <MyLink href="https://www.patreon.com/sendou" isExternal>
+            patrons
+          </MyLink>{" "}
+          of tier &quot;Supporter&quot; ($5 dollar tier)
+        </Box>
+      ) : null}
     </>
   );
 };

pages/faq.tsx

@@ -47,6 +47,7 @@ const questionsAndAnswers = [
           userDiscordId="-1"
           patreonTier={-1}
           presentationMode
+          showInfo
         />
       </>
     ),