From 84cb51f468f0c486e4d9e5da8601d9b9ad7b13c8 Mon Sep 17 00:00:00 2001
From: Delthia <git@delthia.com>
Date: Fri, 22 Nov 2024 21:53:35 +0100
Subject: [PATCH] feat: add tooltips to CV and 'why do you want to participate'
 fields in registration form

---
 src/components/register/Form.tsx          |  3 ++-
 src/components/register/InputFile.tsx     | 23 ++++++++++++++++++-----
 src/components/register/InputTextArea.tsx |  2 +-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/register/Form.tsx b/src/components/register/Form.tsx
index da7c0a6..277e11d 100644
--- a/src/components/register/Form.tsx
+++ b/src/components/register/Form.tsx
@@ -158,9 +158,10 @@ export default function Form() {
         label="¿Por qué quieres participar en HackUDC?"
         placeholder="Para retarme, conocer gente nueva y..."
         required
+        tooltip="Explica brevemente por qué quieres participar. En caso de que haya más solicitudes que plazas, además de la fecha de inscripción y el CV, esto nos ayudará a aceptar a los participantes que mejor encajen y creamos que aprovecharán el hackathon."
         icon={faPen}
       />
-      <InputFile id="cvInput" label="Adjuntar CV (PDF)" required accept=".pdf" />
+      <InputFile id="cvInput" label="Adjuntar CV (PDF)" required accept=".pdf" tooltip="Añade aquí tu CV. Nos ayudará a seleccionar a aquellos participantes que mejor encajen en caso de tener más solicitudes que plazas (además del campo '¿Por qué quieres participar?' y la fecha de inscripción), también puedes compartirlo con las empresas patrocinadoras del evento. Si aún no tienes un CV y no sabes que poner, no te preocupes, indica tus estudios, tus intereses y pon un enlace a tus proyectos y a tu perfil de github."/>
       <div className="col-span-2 flex flex-col gap-4">
         <InputCheckbox id="cvCheckbox" label="Quiero compartir mi CV con las empresas patrocinadoras (recomendado)." />
         <InputCheckbox
diff --git a/src/components/register/InputFile.tsx b/src/components/register/InputFile.tsx
index 9de3bce..9dc014e 100644
--- a/src/components/register/InputFile.tsx
+++ b/src/components/register/InputFile.tsx
@@ -1,17 +1,30 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 interface InputFileProps {
   id: string
   label: string
   required?: boolean
   accept?: string
+  tooltip?: string
 }
 
-export default function InputFile({ id, label, required = false, accept }: InputFileProps) {
+export default function InputFile({ id, label, required = false, accept, tooltip }: InputFileProps) {
   return (
     <div className="flex flex-col gap-1">
-      <label htmlFor={id} className="text-sm font-light text-white/75">
-        {required && <span className="text-red-500">* </span>}
-        {label}
-      </label>
+      <div className="m-1 flex items-center space-x-1">
+        <label htmlFor={id} className="text-sm font-light text-white/75">
+          {required && <span className="text-red-500">* </span>}
+          {label}
+        </label>
+        {tooltip && (
+          <div className="group relative flex items-center" tabIndex={0}>
+            <FontAwesomeIcon icon={faInfoCircle} className="h-4 w-4 cursor-pointer text-white/50" />
+            <div className="absolute left-0 top-full z-10 mt-1 hidden w-max max-w-xs rounded-lg bg-gray-800/90 p-2 text-xs text-white shadow-md group-hover:block group-focus:block">
+              {tooltip}
+            </div>
+          </div>
+        )}
+      </div>
       <div className="relative">
         <input
           id={id}
diff --git a/src/components/register/InputTextArea.tsx b/src/components/register/InputTextArea.tsx
index bd9e0e5..61116fb 100644
--- a/src/components/register/InputTextArea.tsx
+++ b/src/components/register/InputTextArea.tsx
@@ -23,7 +23,7 @@ export default function InputText({ id, label, required = false, placeholder = '
         {tooltip && (
           <div className="group relative flex items-center" tabIndex={0} aria-label={tooltip}>
             <FontAwesomeIcon icon={faInfoCircle} className="h-4 w-4 cursor-pointer text-white/50" />
-            <div className="absolute left-0 top-full z-10 mt-1 hidden w-max max-w-xs rounded-lg bg-black p-2 text-xs text-white shadow-md group-hover:block group-focus:block">
+            <div className="absolute left-0 top-full z-10 mt-1 hidden w-max max-w-xs rounded-lg bg-gray-800/90 p-2 text-xs text-white shadow-md group-hover:block group-focus:block">
               {tooltip}
             </div>
           </div>