From 97b47415eea7bfe1306ef939d963119a561f75d3 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Sat, 16 Nov 2024 09:00:10 +0700
Subject: [PATCH] update: change component file upload to responsive

---
 .../fileUpload/fileUpload.tsx                     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx b/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx
index e2b6cfa..22d896d 100644
--- a/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx
+++ b/apps/frontend/src/modules/assessmentManagement/fileUpload/fileUpload.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { TbUpload } from 'react-icons/tb';
-import { Text, Stack, Group, CloseButton, Flex } from '@mantine/core';
+import { Text, Stack, Group, Flex } from '@mantine/core';
 import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
 
 interface Question {
@@ -41,7 +41,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     return (
-        <div className="mx-11">
+        <div className="mx-11 sm:mx-8 md:mx-11">
             {question.needFile && (
                 <div
                     className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"} shadow-lg`}
@@ -54,11 +54,14 @@ const FileUpload: React.FC<FileUploadProps> = ({
                     }}
                 >
                     <Flex align="center" justify="space-between" gap="sm">
-                        <TbUpload size={24} style={{ marginLeft: "8px", marginRight: "8px" }} />
+                        {/* Upload Icon */}
+                        <TbUpload size={24} className="text-gray-500 md:w-6 md:h-6" />
                         <div className="flex-grow text-right">
-                            <Text className="font-bold">Klik untuk unggah atau geser file disini</Text>
-                            <Text className="text-sm text-gray-400">PNG, JPG, PDF</Text>
-                            <Text className="text-sm text-gray-400">(Max.File size : 64 MB)</Text>
+                            <Text className="font-bold text-xs sm:text-sm md:text-base">
+                                Klik untuk unggah atau geser file disini
+                            </Text>
+                            <Text className="text-xs sm:text-sm text-gray-400">PNG, JPG, PDF</Text>
+                            <Text className="text-xs sm:text-sm text-gray-400">(Max.File size : 64 MB)</Text>
                         </div>
                     </Flex>
                     <input