From b1568d21fd19ca3a22f6bfe8494086f5e89d1e91 Mon Sep 17 00:00:00 2001
From: Joshua Cold <joshua.cold@securitymetrics.com>
Date: Wed, 5 Feb 2025 22:31:03 -0700
Subject: [PATCH] feat(ui): file upload button has a tooltip showing csv style
 formatting.

- refactor(tooltip): InfoTooltip turns into ToolTipIcon which accepts
  and Icon prop that is a lucide component for customizability

  - fix size prop
  - add prop for cursor style
---
 .../Admin/AdminSettings/BuzzerSoundSettings.jsx          | 6 +++---
 src/components/Admin/GameLoader.jsx                      | 8 +++++++-
 src/components/ui/tooltip.jsx                            | 9 +++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx b/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx
index 0b7fc675..6b26b222 100644
--- a/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx
+++ b/src/components/Admin/AdminSettings/BuzzerSoundSettings.jsx
@@ -1,4 +1,4 @@
-import InfoTooltip from "@/components/ui/tooltip";
+import ToolTipIcon from "@/components/ui/tooltip";
 import { useTranslation } from "react-i18next";
 
 function BuzzerSoundSettings({ game, setGame, send }) {
@@ -9,7 +9,7 @@ function BuzzerSoundSettings({ game, setGame, send }) {
       <div className="flex flex-col">
         <div className="flex flex-row items-center space-x-5">
           <div className="flex flex-row items-center space-x-2">
-            <InfoTooltip message={t("Allow players to hear sound on their devices when they press their buzzer")} />
+            <ToolTipIcon message={t("Allow players to hear sound on their devices when they press their buzzer")} />
             <p className="text-xl normal-case text-foreground">{t("Player Buzzer Sounds")}</p>
           </div>
           <input
@@ -31,7 +31,7 @@ function BuzzerSoundSettings({ game, setGame, send }) {
       <div className={`flex flex-col ${!game.settings.player_buzzer_sound ? "opacity-50" : ""}`}>
         <div className="flex flex-row items-center space-x-5">
           <div className="flex flex-row items-center space-x-2">
-            <InfoTooltip message={t("Only play sound for the first player to buzz in")} />
+            <ToolTipIcon message={t("Only play sound for the first player to buzz in")} />
             <p className="text-xl normal-case text-foreground">{t("First Press Only")}</p>
           </div>
           <input
diff --git a/src/components/Admin/GameLoader.jsx b/src/components/Admin/GameLoader.jsx
index 187b75e6..20924f68 100644
--- a/src/components/Admin/GameLoader.jsx
+++ b/src/components/Admin/GameLoader.jsx
@@ -1,3 +1,4 @@
+import ToolTipIcon from "@/components/ui/tooltip";
 import { ERROR_CODES } from "@/i18n/errorCodes";
 import { handleCsvFile, handleJsonFile, isValidFileType } from "@/lib/utils";
 import { FileUp } from "lucide-react";
@@ -90,7 +91,12 @@ const GameLoader = ({ gameSelector, send, setError, setCsvFileUpload, setCsvFile
         <div id="gamePickerFileUploadButton">
           <label htmlFor="gamePickerFileUpload">
             <div className="flow-row flex items-center space-x-2">
-              <FileUp className="cursor-pointer text-secondary-900 hover:text-secondary-500" size={38} />
+              <ToolTipIcon
+                Icon={FileUp}
+                size={32}
+                cursor="pointer"
+                message={`CSV ${t("Expected format")}: ${t("Question")}, ${t("Answer")}, ${t("Points")}, ${t("Answer")}, ${t("Points")} ...`}
+              />
               <div>
                 <p className="text-s text-secondary-900">{t("upload game")}</p>
                 <p className="text-xs text-secondary-900">.json, .csv</p>
diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.jsx
index 3a30c560..50e891b6 100644
--- a/src/components/ui/tooltip.jsx
+++ b/src/components/ui/tooltip.jsx
@@ -1,13 +1,14 @@
 import { Info } from "lucide-react";
 import { useState } from "react";
 
-const InfoTooltip = ({ message }) => {
+const ToolTipIcon = ({ message, Icon = Info, size = 20, cursor = "default" }) => {
   const [isVisible, setIsVisible] = useState(false);
 
   return (
     <div className="relative inline-block">
-      <Info
-        className="size-5 text-secondary-900 transition-colors hover:text-secondary-700"
+      <Icon
+        className={`cursor-${cursor} text-secondary-900 transition-colors hover:text-secondary-700`}
+        size={size}
         onMouseEnter={() => setIsVisible(true)}
         onMouseLeave={() => setIsVisible(false)}
       />
@@ -24,4 +25,4 @@ const InfoTooltip = ({ message }) => {
   );
 };
 
-export default InfoTooltip;
+export default ToolTipIcon;