From ec032307c697767537281be7e03fe38ff64acb8c Mon Sep 17 00:00:00 2001
From: Antoine D <antoine.dufils@yahoo.fr>
Date: Fri, 27 Sep 2024 11:14:10 +0200
Subject: [PATCH] fix: image input fix color

---
 src/components/UI/FileInput.module.scss      | 2 +-
 src/components/UI/FileInput.tsx              | 5 ++++-
 src/components/dashboard/ItemModal.tsx       | 1 +
 src/components/dashboard/PartnerModal.tsx    | 1 +
 src/components/dashboard/TournamentModal.tsx | 3 +++
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/FileInput.module.scss b/src/components/UI/FileInput.module.scss
index 6f1cc0b0..0a87fb43 100644
--- a/src/components/UI/FileInput.module.scss
+++ b/src/components/UI/FileInput.module.scss
@@ -51,7 +51,7 @@
 
         >p {
             position: absolute;
-            color: black;
+            color: white;
             font-weight: 600;
             top: 50%;
             left: 50%;
diff --git a/src/components/UI/FileInput.tsx b/src/components/UI/FileInput.tsx
index 7c59f47a..f5a61063 100644
--- a/src/components/UI/FileInput.tsx
+++ b/src/components/UI/FileInput.tsx
@@ -6,6 +6,7 @@ import { ChangeEvent, useRef, useState } from 'react';
  * Renders a component that allows the user to upload a file.
  */
 const FileUpload = ({
+  textColor = 'white',
   label,
   value = '',
   onChange,
@@ -13,6 +14,8 @@ const FileUpload = ({
   className = '',
   bg = 'white',
 }: {
+  /** The text color when there no image has been uploaded */
+  textColor?: string;
   /** The label to display. */
   label: string;
   /** The value of the file. */
@@ -77,7 +80,7 @@ const FileUpload = ({
           </>
         )}
 
-        <p className={error || (value === '' && preview === null) ? 'black' : ''}>
+        <p style={{ color: textColor }} className={error || (value === '' && preview === null) ? 'black' : ''}>
           Choisir un fichier{' '}
           {type
             .map((t) => `.${t}`)
diff --git a/src/components/dashboard/ItemModal.tsx b/src/components/dashboard/ItemModal.tsx
index 1278f2f6..ef107d52 100644
--- a/src/components/dashboard/ItemModal.tsx
+++ b/src/components/dashboard/ItemModal.tsx
@@ -135,6 +135,7 @@ const ItemModal = ({
         />
         <Textarea label="Description" value={infos ?? ''} onChange={setInfos} />
         <FileInput
+          textColor="black"
           label="Logo"
           value={item && item?.image ? getItemImageLink(item.id) : ''}
           onChange={setLogo}
diff --git a/src/components/dashboard/PartnerModal.tsx b/src/components/dashboard/PartnerModal.tsx
index e0b08c4b..0c3dee08 100644
--- a/src/components/dashboard/PartnerModal.tsx
+++ b/src/components/dashboard/PartnerModal.tsx
@@ -77,6 +77,7 @@ const PartnerModal = ({
         <Input label="Lien" value={link ?? ''} onChange={setLink} />
         <Textarea label="Description" value={description ?? ''} onChange={setDescription} />
         <FileInput
+          textColor="black"
           label="Logo"
           value={partner ? getPartnerLogoLink(partner.id) : ''}
           onChange={setLogo}
diff --git a/src/components/dashboard/TournamentModal.tsx b/src/components/dashboard/TournamentModal.tsx
index de75527f..4e8b7325 100644
--- a/src/components/dashboard/TournamentModal.tsx
+++ b/src/components/dashboard/TournamentModal.tsx
@@ -141,18 +141,21 @@ const TournamentModal = ({
         </div>
 
         <FileInput
+          textColor="black"
           label="Image"
           value={tournament ? getTournamentImageLink(tournament.id) : ''}
           onChange={setImage}
           type={['jpg']}
         />
         <FileInput
+          textColor="black"
           label="Image de fond"
           value={tournament ? getTournamentBackgroundLink(tournament.id) : ''}
           onChange={setBackgroundImage}
           type={['jpg']}
         />
         <FileInput
+          textColor="black"
           label="Règles"
           value={tournament ? getTournamentRulesLink(tournament.id) : ''}
           onChange={setRules}