Closes #609 Display color editing info text as div

components/u/ProfileOwnersButton.tsx

@@ -1,15 +1,7 @@
-import {
-  Button,
-  HStack,
-  IconButton,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-} from "@chakra-ui/react";
+import { Box, Button, HStack } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import MyLink from "components/common/MyLink";
-import { FiEdit, FiInfo } from "react-icons/fi";
+import { FiEdit } from "react-icons/fi";
 import { IoColorPalette } from "react-icons/io5";
 import { RiTShirtLine } from "react-icons/ri";
 import { CSSVariables } from "utils/CSSVariables";
@@ -28,62 +20,46 @@ const ProfileOwnersButtons = ({
   setShowColorSelectors: (isOpen: boolean) => void;
 }) => {
   return (
-    <HStack spacing={4}>
-      <Button
-        leftIcon={<FiEdit />}
-        variant="outline"
-        onClick={() => setShowProfileModal(true)}
-        size="sm"
-      >
-        <Trans>Edit profile</Trans>
-      </Button>
-      {canPostBuilds && (
+    <>
+      <HStack spacing={4}>
         <Button
-          leftIcon={<RiTShirtLine />}
+          leftIcon={<FiEdit />}
           variant="outline"
-          onClick={() => setBuildToEdit(true)}
+          onClick={() => setShowProfileModal(true)}
           size="sm"
         >
-          <Trans>Add build</Trans>
+          <Trans>Edit profile</Trans>
         </Button>
-      )}
-      <Button
-        leftIcon={<IoColorPalette />}
-        variant="outline"
-        disabled={!isColorEditorsButtonClickable}
-        onClick={() => setShowColorSelectors(true)}
-        size="sm"
-      >
-        Edit profile colors
-      </Button>
-      {!isColorEditorsButtonClickable ? (
-        <Popover placement="top" trigger="hover">
-          <PopoverTrigger>
-            <IconButton
-              variant="ghost"
-              isRound
-              aria-label="Show description"
-              fontSize="20px"
-              icon={<FiInfo />}
-              marginLeft="5px !important"
-            />
-          </PopoverTrigger>
-          <PopoverContent
-            zIndex={4}
-            width="220px"
-            backgroundColor={CSSVariables.secondaryBgColor}
+        {canPostBuilds && (
+          <Button
+            leftIcon={<RiTShirtLine />}
+            variant="outline"
+            onClick={() => setBuildToEdit(true)}
+            size="sm"
           >
-            <PopoverBody whiteSpace="pre-wrap">
-              Editing profile colors is available for{" "}
-              <MyLink href="https://www.patreon.com/sendou" isExternal>
-                patrons
-              </MyLink>{" "}
-              of tier &quot;Supporter&quot; ($5 dollar tier)
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-      ) : null}
-    </HStack>
+            <Trans>Add build</Trans>
+          </Button>
+        )}
+        {isColorEditorsButtonClickable ? (
+          <Button
+            leftIcon={<IoColorPalette />}
+            variant="outline"
+            disabled={!isColorEditorsButtonClickable}
+            onClick={() => setShowColorSelectors(true)}
+            size="sm"
+          >
+            Edit profile colors
+          </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>
+    </>
   );
 };