Merge pull request #4 from gpul-org/develop

feat: add tooltips to CV and 'why do you want to participate' fields in registration form

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

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}

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>