added custom select to step 2

src/assets/icons/arrow_down.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#7E2AEA;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<g>
+	<path class="st0" d="M18,36L18,36C8.1,36,0,27.9,0,18l0,0C0,8.1,8.1,0,18,0l0,0c9.9,0,18,8.1,18,18l0,0C36,27.9,27.9,36,18,36z"/>
+</g>
+<path class="st1" d="M10.9,15.2L18,23l7-7.8"/>
+</svg>

src/components/CustomSelect/CustomSelect.css

@@ -0,0 +1,22 @@
+.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
+  border: 0;
+}
+
+.MuiPaper-root.MuiMenu-paper {
+  padding-top: 50px;
+  margin-top: -50px;
+  border-radius: 28px;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root {
+  display: block;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root > div:first-child,
+.MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-icon {
+  display: none;
+}
+
+.MuiMenu-root.MuiModal-root {
+  z-index: 0;
+}

src/components/CustomSelect/CustomSelect.tsx

@@ -0,0 +1,126 @@
+import {
+  Avatar,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import Box from "@mui/material/Box";
+import { useCallback, useEffect, useRef, useState } from "react";
+import "./CustomSelect.css";
+import arrow_down from "../../assets/icons/arrow_down.svg";
+
+type CustomSelectProps = {
+  items: string[];
+  selectedItem: number | null;
+  setSelectedItem: (num: number) => void;
+};
+
+export const CustomSelect = ({
+  items,
+  selectedItem,
+  setSelectedItem,
+}: CustomSelectProps) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const [opened, setOpened] = useState<boolean>(false);
+  const [currentValue, setCurrentValue] = useState<string | null>(null);
+  const [placeholder, setPlaceholder] = useState<string | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setCurrentValue(selectedItem !== null ? items[selectedItem] : null);
+    setPlaceholder(
+      selectedItem === null ? "Выберите ответственного за сделку" : null,
+    );
+  }, [selectedItem, items]);
+
+  const selectItem = useCallback(
+    (event: SelectChangeEvent<HTMLDivElement>) => {
+      setCurrentValue(items[Number(event.target.value)]);
+      setSelectedItem(Number(event.target.value));
+      setPlaceholder(null);
+    },
+    [items, setSelectedItem],
+  );
+
+  const toggleOpened = useCallback(() => {
+    setOpened((isOpened) => !isOpened);
+  }, []);
+
+  return (
+    <Box>
+      <Box
+        sx={{
+          zIndex: 1,
+          position: "relative",
+          width: "100%",
+          height: "56px",
+          padding: "5px",
+          color: selectedItem === null ? "#9A9AAF" : "#7E2AEA",
+          border: "2px solid #ffffff",
+          borderRadius: "30px",
+          background: "#EFF0F5",
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer",
+        }}
+        onClick={() => ref.current?.click()}
+      >
+        <Avatar sx={{ width: 46, height: 46, marginRight: 1 }} />
+        <Typography
+          sx={{
+            marginLeft: isMobile ? "10px" : "20px",
+            fontWeight: selectedItem === null ? "400" : "500",
+            fontSize: isMobile ? "14px" : "16px",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            flexGrow: 1,
+          }}
+        >
+          {placeholder || currentValue}
+        </Typography>
+        <img
+          src={arrow_down}
+          alt="check"
+          style={{
+            position: "absolute",
+            top: "50%",
+            right: "10px",
+            transform: `translateY(-50%) rotate(${opened ? "180deg" : "0deg"}`,
+            height: "36px",
+            width: "36px",
+          }}
+          className={`select-icon ${opened ? "opened" : ""}`}
+        />
+      </Box>
+      <Select
+        ref={ref}
+        className="select"
+        value=""
+        open={opened}
+        MenuProps={{
+          disablePortal: true,
+          PaperProps: {
+            style: {
+              maxHeight: "300px",
+              overflow: "auto",
+            },
+          },
+        }}
+        sx={{ width: "100%" }}
+        onChange={selectItem}
+        onClick={toggleOpened}
+      >
+        {items.map((item, index) => (
+          <MenuItem key={item + index} value={index} sx={{ padding: "12px" }}>
+            {item}
+          </MenuItem>
+        ))}
+      </Select>
+    </Box>
+  );
+};

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx

@@ -1,4 +1,10 @@
-import { Box, Button, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { FC } from "react";
 import { object, string } from "yup";
 import InputTextfield from "@ui_kit/InputTextfield";
@@ -29,6 +35,9 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
   handleNextStep,
 }) => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
   const formik = useFormik<Values>({
     initialValues,
     validationSchema,
@@ -38,12 +47,15 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
       try {
         // Simulate a network request
         await new Promise((resolve) => setTimeout(resolve, 2000));
-        console.log("Simulated network request completed");
         handleNextStep();
       } catch (error) {
-        console.error("Errr");
         formikHelpers.setSubmitting(false);
-        formikHelpers.setErrors({ submit: error.message });
+        if (error instanceof Error) {
+          formikHelpers.setErrors({
+            login: error.message,
+            password: error.message,
+          });
+        }
       }
     },
   });
@@ -56,7 +68,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
       sx={{
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        alignItems: isMobile ? "start" : "center",
         height: "100%",
         flexGrow: 1,
       }}
@@ -64,7 +76,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
       <Box
         sx={{
           marginTop: "68px",
-          width: "500px",
+          width: isMobile ? "100%" : "500px",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
@@ -102,7 +114,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
           gap="10px"
         />
       </Box>
-      <Box sx={{ marginTop: "30px", width: "500px" }}>
+      <Box sx={{ marginTop: "30px", width: isMobile ? "100%" : "500px" }}>
         <Typography
           sx={{
             fontSize: "16px",

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep2/IntegrationStep2.tsx

@@ -1,6 +1,7 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { FC } from "react";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { FC, useState } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
 
 type IntegrationStep2Props = {
   handlePrevStep: () => void;
@@ -12,7 +13,19 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
   handleNextStep,
 }) => {
   const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
+  const [selectedItem, setSelectedItem] = useState<number | null>(null);
+  const itemsMock = [
+    "Ангелина Полякова",
+    "Петр Иванов",
+    "Алексей Звягинцев",
+    "Никита Стрельцов",
+    "Инна Ким",
+    "Дмитрий Морозов",
+    "Арсен Тадевосян",
+  ];
 
   return (
     <Box
@@ -24,11 +37,13 @@ export const IntegrationStep2: FC<IntegrationStep2Props> = ({
         flexGrow: 1,
       }}
     >
-      <Typography
-        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
-      >
-        step 2
-      </Typography>
+      <Box sx={{ width: "100%", marginTop: "20px" }}>
+        <CustomSelect
+          selectedItem={selectedItem}
+          items={itemsMock}
+          setSelectedItem={setSelectedItem}
+        />
+      </Box>
       <StepButtonsBlock
         handleNextStep={handleNextStep}
         handlePrevStep={handlePrevStep}

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

@@ -104,12 +104,17 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
     >
       <Box
         sx={{
+          width: "100%",
           height: "68px",
           backgroundColor: theme.palette.background.default,
         }}
       >
         <Typography
-          sx={{ fontSize: "24px", fontWeight: "500", padding: "20px" }}
+          sx={{
+            fontSize: isMobile ? "20px" : "24px",
+            fontWeight: "500",
+            padding: "20px",
+          }}
         >
           Интеграция с {companyName ? companyName : "партнером"}
         </Typography>
@@ -132,7 +137,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
         sx={{
           display: "flex",
           flexDirection: "column",
-          width: "920px",
+          width: isTablet ? "100%" : "920px",
           height: "600px",
           padding: "15px 20px 15px",
           flexGrow: 1, // Add this line
@@ -140,7 +145,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
       >
         <Typography
           sx={{
-            fontSize: "24px",
+            fontSize: isMobile ? "18px" : "24px",
             color: "#4D4D4D",
             fontWeight: "500",
             lineHeight: "1",
@@ -159,7 +164,7 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
         >
           Шаг {step + 1}
         </Typography>
-        <Box sx={{ flexGrow: 1 }}>{steps[step].component}</Box>
+        <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
       </Box>
     </Dialog>
   );