closes #180 show tooltip build card icons

components/builds/BuildCard.tsx

@@ -11,6 +11,7 @@ import {
 import { Plural, t, Trans } from "@lingui/macro";
 import { Ability, Prisma } from "@prisma/client";
 import ModeImage from "components/common/ModeImage";
+import MyIconButton from "components/common/MyIconButton";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import { getEmojiFlag } from "countries-list";
@@ -114,13 +115,12 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
             ) : null}
           </Flex>
           <Flex mt="0.3em">
-            <IconButton
+            <MyIconButton
               variant="ghost"
-              isRound
               onClick={() => setApView(!apView)}
-              aria-label="Set build card view"
-              fontSize="20px"
+              popup={apView ? t`Show abilities` : t`Show ability points`}
               icon={<FiTarget />}
+              fontSize="20px"
               mr="0.5em"
             />
             <Link
@@ -129,10 +129,9 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
               )}
             >
               <a>
-                <IconButton
+                <MyIconButton
                   variant="ghost"
-                  isRound
-                  aria-label="Show build stats view"
+                  popup={t`Show in Build Analyzer`}
                   fontSize="20px"
                   icon={<FiBarChart2 />}
                   mr="0.5em"
@@ -141,13 +140,11 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
             </Link>
             <Description />
             {onEdit && (
-              <IconButton
-                variant="ghost"
-                isRound
+              <MyIconButton
+                popup={t`Edit build`}
                 onClick={() => onEdit(build)}
-                aria-label="Edit build"
-                fontSize="20px"
                 icon={<FiEdit />}
+                fontSize="20px"
                 ml="0.5em"
               />
             )}
@@ -201,7 +198,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
     if (build.modes.length === 0 && !build.description) return null;
 
     return (
-      <Popover placement="top">
+      <Popover placement="top" trigger="hover">
         <PopoverTrigger>
           <IconButton
             variant="ghost"

components/common/MyIconButton.tsx

@@ -0,0 +1,45 @@
+import {
+  IconButton,
+  IconButtonProps,
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from "@chakra-ui/react";
+import { useMyTheme } from "lib/useMyTheme";
+
+interface Props {
+  onClick?: () => void;
+  icon: React.ReactElement;
+  popup: string;
+}
+
+const MyIconButton: React.FC<Props & Omit<IconButtonProps, "aria-label">> = ({
+  onClick,
+  icon,
+  popup,
+  ...props
+}) => {
+  const { secondaryBgColor } = useMyTheme();
+  return (
+    <Popover trigger="hover" variant="responsive">
+      <PopoverTrigger>
+        <IconButton
+          variant="ghost"
+          isRound
+          onClick={onClick}
+          aria-label={popup}
+          icon={icon}
+          {...props}
+        />
+      </PopoverTrigger>
+      <PopoverContent bg={secondaryBgColor}>
+        <PopoverHeader fontWeight="semibold">{popup}</PopoverHeader>
+        <PopoverArrow bg={secondaryBgColor} />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default MyIconButton;

locale/de/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/el/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/en/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock",
   "Intensity": "Intensity",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "Maker of the build has finished in the top 500 of X Rank with this weapon",
+  "Show abilities": "Show abilities",
+  "Show ability points": "Show ability points",
+  "Show in Build Analyzer": "Show in Build Analyzer",
+  "Edit build": "Edit build",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}",
   "Included": "Included",
   "Min AP": "Min AP",

locale/es/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/fr/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/it/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/ja/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/ko/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/nl/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/pt/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/ru/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",

locale/sv/messages.json

@@ -7,6 +7,10 @@
   "Enemy has not reached the 50 point mark or there is more than 30 seconds on the clock": "",
   "Intensity": "Intensitet",
   "Maker of the build has finished in the top 500 of X Rank with this weapon": "",
+  "Show abilities": "",
+  "Show ability points": "",
+  "Show in Build Analyzer": "",
+  "Edit build": "",
   "{otherBuildCount, plural, one {Show # more build by {username}} other {Show # more builds by {username}}}": "",
   "Included": "",
   "Min AP": "",