работа над страницей форма контактов

src/pages/ContactFormPage/ButtonSettingForms.tsx

@@ -1,6 +1,10 @@
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import React from "react";
 import SettingIcon from "@icons/questionsPage/settingIcon";
+import Clue from "@icons/questionsPage/clue";
+import HideIcon from "@icons/questionsPage/hideIcon";
+import CopyIcon from "@icons/questionsPage/CopyIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import Branching from "@icons/questionsPage/branching";
 import {Box, useTheme} from "@mui/material";
 import SupplementIcon from "@icons/ContactFormIcon/supplementIcon";
@@ -10,7 +14,7 @@ interface Props {
     SSHC: (data:string) => void
 }
 
-export default function ButtonSettingForms ({SSHC, switchState}:Props) {
+export default function ButtonsOptions ({SSHC, switchState}:Props) {
     const theme = useTheme();
     const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
         {icon: <SettingIcon color={switchState === 'setting' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Настройки', value: 'setting'},

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -1,19 +1,13 @@
 import React from "react";
 import Stepper from '@ui_kit/Stepper';
-import {Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField} from '@mui/material';
+import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CustomTextField from "@ui_kit/CustomTextField";
 import OneIcon from "../../components/icons/questionsPage/OneIcon";
+import PointsIcon from "../../components/icons/questionsPage/PointsIcon";
 import AddPlus from "../../components/icons/questionsPage/addPlus";
 import ArrowLeft from "../../components/icons/questionsPage/arrowLeft";
 import InfoIcon from "@icons/InfoIcon";
-import ButtonSettingForms from "./ButtonSettingForms";
-import SwitchContactForm from "./switchContactForm";
-import DrawerNewField from "./DrawerParent";
-import WindowNewField from "./NewField/WindowNewField";
-import WindowMessengers from "./Massengers/WindowMessengers";
-
-
 
 export default function ContactFormPage() {
 
@@ -28,12 +22,6 @@ export default function ContactFormPage() {
         setActiveStep((prevActiveStep) => prevActiveStep - 1);
     };
 
-    const [drawerNewField, setDrawerNewField] = React.useState(false);
-    const [drawerMessenger, setDrawerMessenger] = React.useState(false);
-
-    const drawerNewFieldHC = (bool:boolean) => {setDrawerNewField(bool)}
-    const drawerMessengerHC = (bool:boolean) => {setDrawerMessenger(bool)}
-
     const theme = useTheme();
     return (
         <>
@@ -46,99 +34,7 @@ export default function ContactFormPage() {
                     textDecorationColor: theme.palette.brightPurple.main
                 }}>Как собрать данные посетителя</Link> <InfoIcon/>
             </Box>
-            <ContactFormParent>
-                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
-                    <OneIcon/>
-                    <IconButton> <ExpandMoreIcon /> </IconButton>
-                </Box>
-                <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '10px 20px'}}>
-                    <Typography>Имя*</Typography>
-                    <CustomTextField placeholder="Дмитрий" text={""} />
-                    <Typography>E-mail*</Typography>
-                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-                    <Typography>Телефон*</Typography>
-                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-                    <Button onClick={() => drawerNewFieldHC(true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                        Добавить поле +
-                    </Button>
-                    <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}><WindowNewField/></DrawerNewField>
-                    <Link
-                        component='button'
-                        onClick={() => drawerMessengerHC(true)}
-                        sx={{
-                        fontSize: "16px",
-                        lineHeight: "19px",
-                        color: theme.palette.brightPurple.main,
-                        textDecorationColor: theme.palette.brightPurple.main,
-                            textAlign: 'left'
-                    }}>Добавить мессенджеры</Link>
-                    <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
-
-                    <WindowMessengers/>
-                    </DrawerNewField>
-
-                    <Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
-                        Название кнопки
-                    </Button>
-
-                </Box>
-            </ContactFormParent>
-
-
-            <ContactFormParent>
-                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
-                    <OneIcon/>
-                    <IconButton> <ExpandMoreIcon /> </IconButton>
-                </Box>
-                <Button variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                    Добавить поле +
-                </Button>
-                <Box sx={{display: 'flex'}}>
-                    <Typography sx={{color: theme.palette.orange.main}}>Будут показаны поля по умолчанию</Typography>
-                    <InfoIcon/>
-                </Box>
-                <Link sx={{
-                    mt: "20px",
-                    fontSize: "16px",
-                    lineHeight: "19px",
-                    color: theme.palette.brightPurple.main,
-                    textDecorationColor: theme.palette.brightPurple.main
-                }}>Добавить мессенджеры</Link>
-                <Button variant='contained' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
-                    Название кнопки
-                </Button>
-            </ContactFormParent>
-            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
-                <IconButton>
-                    <AddPlus/>
-                </IconButton>
-                <Box sx={{display: 'flex', gap: '8px'}}>
-                    <Button variant='outlined'>
-                        <ArrowLeft/>
-                    </Button>
-                    <Button variant='contained' sx={{padding: '10px 20px'}}>
-                        Установка квиза
-                    </Button>
-                </Box>
-            </Box>
-        </>
-    )
-}
-
-interface Props {
-    outerContainerSx?: SxProps<Theme>;
-    children?: React.ReactNode;
-}
-
-function ContactFormParent({outerContainerSx: sx, children }: Props) {
-    const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
-    const SSHC = (data: string) => {
-        setSwitchState(data)
-    }
-    return(
-        <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex', flexDirection: 'column'}}>
-            <Box sx={{width: '100%', display: 'flex'}} >
+            <Paper sx={{maxWidth: '796px', width: '100%', borderRadius: '12px', margin: '20px 0', display: 'flex',}}>
                 <Box
                     sx={{
                         borderRight: `1px solid ${theme.palette.grey2.main}`,
@@ -150,30 +46,64 @@ function ContactFormParent({outerContainerSx: sx, children }: Props) {
                         gap: '20px'
                     }}>
                     <CustomTextField placeholder="Заголовок формы" text={""}/>
-                    <TextField
-                        id="outlined-multiline-static"
-                        multiline
-                        rows={8}
-                        placeholder="Дополнительный текст формы"
-                        sx={{
-                            backgroundColor: theme.palette.background.default,
+                    <CustomTextField placeholder="Дополнительный текст формы" text={""}
+                                     sx={{
+                                         "& .MuiInputBase-root": {
+                                             height: "48px",
+                                             borderRadius: "10px",
+                                             minHeight: '287px',
+                                             alignItems: 'start',
+                                         },
+                                     }} />
+                </Box>
+                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%'}}>
+                    <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'end'}}>
+                        <OneIcon/>
+                        <IconButton> <ExpandMoreIcon /> </IconButton>
+                    </Box>
+                    <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px', padding: '10px 20px'}}>
+                        <Typography>Имя*</Typography>
+                        <CustomTextField placeholder="Дмитрий" text={""} />
+                        <Typography>E-mail*</Typography>
+                        <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                        <Typography>Телефон*</Typography>
+                        <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                        <Button variant='main' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
+                            Добавить поле +
+                        </Button>
+                        <Link sx={{
+                            mt: "20px",
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            color: theme.palette.brightPurple.main,
+                            textDecorationColor: theme.palette.brightPurple.main
+                        }}>Добавить мессенджеры</Link>
+                        <Button variant='main' sx={{padding: '10px 20px', maxWidth: 'fit-content',}}>
+                            Название кнопки
+                        </Button>
+                    </Box>
+                </Box>
 
-                            "& .MuiInputBase-root": {
-                                borderRadius: "10px",
-                                alignItems: 'start',
-                                color: theme.palette.grey2.main,
-                            },
-                        }}
-                    />
-                </Box>
-                <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px', width: '100%', gap: '20px'}}>
-                    {children}
+                {/*<Box*/}
+                {/*    sx={{width: '100%', maxWidth: "760px", display: 'flex', alignItems: 'center', gap: '10px', padding: '20px' }}*/}
+                {/*>*/}
+                {/*</Box>*/}
+
+
+            </Paper>
+            <Box sx={{display: 'flex',justifyContent: 'space-between', maxWidth: '796px'}}>
+                <IconButton>
+                    <AddPlus/>
+                </IconButton>
+                <Box sx={{display: 'flex', gap: '8px'}}>
+                    <Button variant='outmain'>
+                        <ArrowLeft/>
+                    </Button>
+                    <Button variant='main' sx={{padding: '10px 20px'}}>
+                        Установка квиза
+                    </Button>
                 </Box>
             </Box>
-            <Box>
-                <ButtonSettingForms switchState={switchState} SSHC={SSHC}/>
-                <SwitchContactForm switchState={switchState}/>
-            </Box>
-        </Paper>
+        </>
     )
 }

src/pages/ContactFormPage/switchContactForm.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import SettingForm from "./settingForm";
-import BranchingForm from "./BranchingForm";
 
 
 
@@ -8,17 +6,17 @@ interface Props {
     switchState: string,
 }
 
-export default function SwitchContactForm({switchState = 'setting' }: Props) {
+export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
 
     switch (switchState) {
         case 'setting':
-            return (<SettingForm/>);
+            // return (<ResponseSettings/>);
             break;
         case 'branching':
-            return (<BranchingForm/>);
+            // return (<BranchingQuestions/>);
             break;
         case 'supplement':
-            return (<></>);
+            // return (<UploadImage/>);
             break;
         default:
             return (<></>)

src/ui_kit/CustomTextField.tsx

@@ -2,7 +2,7 @@ import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
 
 interface CustomTextFieldProps {
     placeholder: string;
-    text?: string;
+    text: string;
     sx?: SxProps<Theme>;
 }
 
@@ -16,12 +16,12 @@ export default function CustomTextField({ placeholder, text, sx}: CustomTextFiel
             sx={{ p: 0 }}
         >
             <TextField
-                value={text}
+                // value={text}
                 fullWidth
                 placeholder={placeholder}
                 sx={{
+                    backgroundColor: theme.palette.background.default,
                     "& .MuiInputBase-root": {
-                        backgroundColor: theme.palette.background.default,
                         height: "48px",
                         borderRadius: "10px",
 

src/utils/themes/generic.ts

@@ -29,7 +29,7 @@ const theme = createTheme({
             variants: [
                 {
                     props: {
-                        variant: 'contained' },
+                        variant: 'main' },
                     style: {
                         backgroundColor: "#7E2AEA",
                         padding: '13px 20px',
@@ -43,7 +43,7 @@ const theme = createTheme({
                 },
                 {
                     props: {
-                        variant: 'outlined' },
+                        variant: 'outmain' },
                     style: {
                         backgroundColor: "#F2F3F7",
                         padding: '10px 20px',