fix: UploadImage

src/pages/Questions/UploadImage.tsx

@@ -1,8 +1,19 @@
-import { Typography, Box, useTheme, ButtonBase, Modal } from "@mui/material";
+import {
+  Typography,
+  Box,
+  useTheme,
+  ButtonBase,
+  Modal,
+  TextField,
+  InputAdornment,
+} from "@mui/material";
 import UploadBox from "@ui_kit/UploadBox";
 import UploadIcon from "../../assets/icons/UploadIcon";
+import SearchIcon from "../../assets/icons/SearchIcon";
 import * as React from "react";
 
+import UnsplashIcon from "../../assets/icons/Unsplash.svg";
+
 interface ModalkaProps {
   imgHC: (imgInp: HTMLInputElement) => void;
 }
@@ -40,31 +51,94 @@ const Modalka: React.FC<ModalkaProps> = ({ imgHC }) => {
           background: theme.palette.background.default,
         }}
       >
-        <Typography>Добавьте изображение</Typography>
+        <Typography
+          sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
+        >
+          Добавьте изображение
+        </Typography>
         <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-          <input onChange={(event) => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
+          <input
+            onChange={(event) => imgHC(event.target)}
+            hidden
+            accept="image/*"
+            multiple
+            type="file"
+          />
           <Box
             ref={dropZone}
             sx={{
               width: "580px",
-              padding: "33px",
+              padding: "33px 10px 33px 55px",
               display: "flex",
-              justifyContent: "space-between",
               alignItems: "center",
               backgroundColor: theme.palette.background.default,
               border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
               borderRadius: "8px",
+              gap: "55px",
             }}
             onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
           >
             <UploadIcon />
             <Box>
-              <Typography>Загрузите или перетяните сюда файл</Typography>
-              <Typography>Принимает JPG, PNG, и GIF формат — максимум 5mb</Typography>
+              <Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
+                Загрузите или перетяните сюда файл
+              </Typography>
+              <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+                Принимает JPG, PNG, и GIF формат — максимум 5mb
+              </Typography>
             </Box>
           </Box>
         </ButtonBase>
-        <Typography>Или выберите на фотостоке</Typography>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            margin: "20px 0",
+          }}
+        >
+          <Typography
+            sx={{
+              fontWeight: "bold",
+              color: "#4D4D4D",
+            }}
+          >
+            Или выберите на фотостоке
+          </Typography>
+          <img src={UnsplashIcon} alt="" />
+        </Box>
+        <TextField
+          id="search-in-unsplash"
+          placeholder="Ищите изображения на английском языка"
+          sx={{
+            "& .MuiInputBase-input": {
+              height: "48px",
+              padding: "0 10px 0 0",
+            },
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderRadius: "8px",
+            },
+            "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid rgba(0, 0, 0, 0.23)",
+            },
+            "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":
+              {
+                borderColor: "rgba(0, 0, 0, 0.23)",
+              },
+          }}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment
+                position="start"
+                sx={{
+                  outline: "none",
+                  "& svg > path": { stroke: "#9A9AAF" },
+                }}
+              >
+                <SearchIcon />
+              </InputAdornment>
+            ),
+          }}
+        />
       </Box>
     </Box>
   );
@@ -87,14 +161,28 @@ export default function UploadImage() {
 
   return (
     <Box sx={{ padding: "20px" }}>
-      <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
+      <Typography
+        sx={{
+          fontWeight: 500,
+          color: theme.palette.grey3.main,
+          mt: "11px",
+          mb: "14px",
+        }}
+      >
         Загрузить изображение
       </Typography>
-      <ButtonBase onClick={handleOpen} sx={{ width: "100%", maxWidth: "260px" }}>
+      <ButtonBase
+        onClick={handleOpen}
+        sx={{ width: "100%", maxWidth: "260px" }}
+      >
         {img ? (
           <img width="400" src={img} />
         ) : (
-          <UploadBox sx={{ maxWidth: "260px" }} icon={<UploadIcon />} text="5 MB максимум" />
+          <UploadBox
+            sx={{ maxWidth: "260px" }}
+            icon={<UploadIcon />}
+            text="5 MB максимум"
+          />
         )}
       </ButtonBase>
       <Modal