chore: Restrict image uploads to JPG and PNG formats

Updated file input to accept only .jpg, .jpeg, and .png files in the UploadImageModal component.

src/pages/Questions/UploadImage/UploadImageModal.tsx

@@ -1,29 +1,17 @@
-import {
+import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } from "@mui/material";
-    Typography,
-    Box,
-    useTheme,
-    ButtonBase,
-    Modal,
-    TextField,
-    InputAdornment,
-} from "@mui/material";
 import UploadIcon from "../../../assets/icons/UploadIcon";
 import SearchIcon from "../../../assets/icons/SearchIcon";
 import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
 import { useRef, useState, type DragEvent } from "react";
 
-
 interface ModalkaProps {
   isOpen: boolean;
   onClose: () => void;
   handleImageChange: (file: File) => void;
+  description?: string;
 }
 
-export const UploadImageModal: React.FC<ModalkaProps> = ({
+export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
-    handleImageChange,
-    isOpen,
-    onClose,
-}) => {
   const theme = useTheme();
   const dropZone = useRef<HTMLDivElement>(null);
   const [ready, setReady] = useState(false);
@@ -72,24 +60,20 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
             background: theme.palette.background.default,
           }}
         >
-                    <Typography
+          <Typography sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}>
-                        sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
-                    >
             Добавьте изображение
           </Typography>
           <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
             <input
               onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
               hidden
-                            accept="image/*"
+              accept=".jpg, .jpeg, .png"
               multiple
               type="file"
               data-cy="upload-image-input"
             />
             <Box
-                            onDragOver={(event: DragEvent<HTMLDivElement>) =>
+              onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
-                                event.preventDefault()
-                            }
               onDrop={handleDrop}
               ref={dropZone}
               sx={{
@@ -110,7 +94,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
                   Загрузите или перетяните сюда файл
                 </Typography>
                 <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                                    Принимает JPG, PNG, и GIF формат — максимум 5mb
+                  {description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
                 </Typography>
               </Box>
             </Box>
@@ -146,8 +130,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
               "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
                 border: "1px solid rgba(0, 0, 0, 0.23)",
               },
-                            "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":
+              "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-                            {
                 borderColor: "rgba(0, 0, 0, 0.23)",
               },
             }}

src/pages/startPage/FaviconDropZone.tsx

@@ -6,7 +6,6 @@ import { useState } from "react";
 import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
 import { useDisclosure } from "../../utils/useDisclosure";
 
-
 const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
 interface Props {
@@ -42,19 +41,22 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
   };
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
         display: "flex",
         gap: "10px",
-        }}>
+      }}
+    >
       <UploadImageModal
         isOpen={isImageUploadOpen}
         onClose={closeImageUploadModal}
         handleImageChange={handleImageUpload}
+        description="Принимает JPG, PNG — максимум 5mb"
       />
       <Box
         onDragEnter={() => !imageUrl && setIsDropReady(true)}
         onDragExit={() => setIsDropReady(false)}
-                onDragOver={e => e.preventDefault()}
+        onDragOver={(e) => e.preventDefault()}
         onDrop={onDrop}
         sx={{
           width: "48px",
@@ -62,7 +64,8 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
           backgroundColor: theme.palette.background.default,
           border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
           borderRadius: "8px",
-                }}>
+        }}
+      >
         <ButtonBase
           onClick={imageUrl ? undefined : openImageUploadModal}
           sx={{
@@ -75,7 +78,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
             overflow: "hidden",
           }}
         >
-                    {imageUrl ?
+          {imageUrl ? (
             <img
               src={imageUrl}
               style={{
@@ -84,17 +87,19 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
                 objectFit: "scale-down",
               }}
             />
-                        :
+          ) : (
             <UploadIcon />
-                    }
+          )}
         </ButtonBase>
       </Box>
-            <Box sx={{
+      <Box
+        sx={{
           display: "flex",
           flexDirection: "column",
           alignItems: "start",
-            }}>
+        }}
-                {imageUrl &&
+      >
+        {imageUrl && (
           <ButtonBase onClick={onDeleteClick}>
             <Typography
               sx={{
@@ -107,7 +112,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
               Удалить
             </Typography>
           </ButtonBase>
-                }
+        )}
         <Typography
           sx={{
             color: theme.palette.orange.main,
@@ -122,4 +127,4 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
       </Box>
     </Box>
   );
-};
+}