Change div to button and add lower margin (#186)

frontend/src/components/files/UploadImage.tsx

@@ -2,6 +2,7 @@ import imageCompression from "browser-image-compression";
 import TCButton from "components/files/TCButton";
 import { api } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
+import { useTheme } from "hooks/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { Alert, Col } from "react-bootstrap";
 
@@ -19,6 +20,7 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
   const [dragOver, setDragOver] = useState<boolean>(false);
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
+  const { theme } = useTheme();
   const MAX_FILE_SIZE = 25 * 1024 * 1024;
   const validFileTypes = ["image/png", "image/jpeg", "image/jpg"];
 
@@ -150,32 +152,22 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
   return (
     <Col md="6">
       <div
+        className="mb-3"
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         style={{
           border: dragOver ? "2px dashed #000" : "2px dashed transparent",
-          padding: "10px",
           borderRadius: "5px",
-          textAlign: "center",
-          marginBottom: "20px",
         }}
       >
-        <div
+        <TCButton
+          className="mb-3"
           onClick={triggerFileInput}
-          style={{
-            cursor: "pointer",
-            background: "black",
-            border: "1px solid #ccc",
-            borderRadius: "5px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: "40px",
-          }}
+          variant={theme === "dark" ? "outline-light" : "outline-dark"}
         >
           {selectedFile ? selectedFile.name : "No file chosen"}
-        </div>
+        </TCButton>
         <input
           type="file"
           accept=".png,.jpg,.jpeg"