fix: message appearance, trash, and message color in import view

frontend/src/components/general/form/types/FileUpload.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect, useRef } from "react";
 import { Trash2 } from "lucide-react";
+import { MessageType, type } from "@/enum/MessageTypes";
+
 
 interface FileUploadProps {
   fileType: string;
   name: string;
   message?: string;
-  showDeleteButton: boolean;
+  isFileSelected: boolean;
   clearFileInput: () => void;
+  messageType : MessageType; 
   handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -16,7 +19,8 @@ const FileUpload: React.FC<FileUploadProps> = ({
   message = "",
   handleFileChange,
   clearFileInput,
-  showDeleteButton,
+  isFileSelected,
+  messageType, 
 }) => {
   const inputFileRef = useRef<HTMLInputElement | null>(null);
 
@@ -47,21 +51,33 @@ const FileUpload: React.FC<FileUploadProps> = ({
 
         <button
           type="button"
-          className={`${showDeleteButton ? 'block' : 'hidden'} `}
+          className={`${isFileSelected ? 'block' : 'hidden'} `}
           onClick={handleClearInput}
         >
           <Trash2 className="text-dark-600" />
           <span className="sr-only">Datei unselektieren</span>
         </button>
       </div>
 
-      {message && (
-        <div className="mt-4 text-red font-semibold text-sm">
+      {message && !isFileSelected && (
+        <div className={`mt-4 ${getClassNameForMessageType(messageType)}
+        font-semibold text-sm`}>
           {message}
         </div>
       )}
     </>
   );
 };
-
-export default FileUpload;
+const getClassNameForMessageType = (messageType: MessageType) => {
+  switch (messageType) {
+    case type.success:
+      return 'text-green-dark';
+    case type.warning:
+      return 'text-yellow';
+    case type.error:
+      return 'text-red';
+    default:
+      return '';
+  }
+};
+export default FileUpload;

frontend/src/enum/MessageTypes.tsx

@@ -0,0 +1,7 @@
+export const type = {
+    warning: "warning",
+    error: "error",
+    success: "success",
+  } as const;
+
+  export type MessageType = typeof type[keyof typeof type];

frontend/src/routes/_protected/settings/import.tsx

@@ -8,13 +8,15 @@ import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-q
 import { treeQuery } from '@/api/queries'
 import { importApi } from '@/api/backendApi'
 import useToast from '@/hooks/useToast'
+import { MessageType, type } from '@/enum/MessageTypes'
 
 export const Route = createFileRoute('/_protected/settings/import')({
   component: ImportFile,
   meta: () => [{ title: 'Bäume importieren' }],
 })
 
 function ImportFile() {
+  const [messageType, setMessageType] = useState<MessageType>(type.warning);
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [file, setFile] = useState<File | null>(null)
   const [message, setMessage] = useState('')
@@ -29,10 +31,13 @@ function ImportFile() {
       queryClient.invalidateQueries(treeQuery())
       setMessage('Die Bäume wurden erfolgreich importiert.')
       showToast('Die Bäume wurden erfolgreich importiert.')
+      setFile(null)
+      setMessageType(type.success)
     },
     onError: (error) => {
       console.error(error)
       setMessage('Es ist ein Fehler beim Importieren aufgetreten.')
+      setMessageType(type.error)
     },
   })
 
@@ -48,6 +53,7 @@ function ImportFile() {
     const file = event.target.files[0]
     if (file.type !== 'text/csv') {
       setMessage('Es sind nur CSV-Dateien erlaubt.')
+      setMessageType(type.error)
       return
     }
 
@@ -116,9 +122,9 @@ function ImportFile() {
             fileType=".csv"
             message={message}
             handleFileChange={handleFileChange}
-            showDeleteButton={file !== null}
+            isFileSelected={file !== null}
             clearFileInput={() => setFile(null)}
-          />
+            messageType={messageType} />
         </form>
 
         <PrimaryButton
@@ -139,4 +145,4 @@ function ImportFile() {
       </div>
     </div>
   )
-}
+}