diff --git a/src/App.tsx b/src/App.tsx index fdeb61ff..5705effb 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { CssBaseline, ThemeProvider } from "@mui/material"; +import { CssBaseline } from "@mui/material"; import { styled } from "@mui/material/styles"; import CreateQuiz from "./components/CreateQuiz/CreateQuiz"; import FirstQuiz from "./pages/startPage/FirstQuiz"; @@ -6,33 +6,32 @@ import MyQuizzes from "./components/MyQuizzes"; import Navbar from "./components/Navbar/Navbar"; import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz"; import QuizGallery from "./components/QuizGallery"; -// import lightTheme from "./utils/themes/light"; -// import darkTheme from "./utils/themes/dark"; +import lightTheme from "./utils/themes/light"; +import darkTheme from "./utils/themes/dark"; const Divider = styled("div")(() => ({ - height: "30px", - backgroundColor: "black", + height: "30px", + backgroundColor: "black", })); function App() { + return ( + <> + + + + - return ( - <> - - - - + + - - + + - - - - - - - ); + + + + ); } export default App; diff --git a/src/components/CustomWrapper.tsx b/src/components/CustomWrapper.tsx index 5c41dda8..e2309094 100644 --- a/src/components/CustomWrapper.tsx +++ b/src/components/CustomWrapper.tsx @@ -1,7 +1,6 @@ import { useState } from "react"; -import { Box, IconButton, SvgIcon, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; -import ClearIcon from "@mui/icons-material/Clear"; import CrossedEyeIcon from "@icons/CrossedEyeIcon"; import CopyIcon from "@icons/CopyIcon"; import TrashIcon from "@icons/TrashIcon"; @@ -188,26 +187,6 @@ export default function CustomWrapper({ text, sx, result }: Props) { > 10 руб. - {upSm ? ( - - Удалить - - ) : ( - - )} )} diff --git a/src/components/DescriptionForm/ButtinsOptionsForm.tsx b/src/components/DescriptionForm/ButtinsOptionsForm.tsx index b1d439e9..85747f82 100644 --- a/src/components/DescriptionForm/ButtinsOptionsForm.tsx +++ b/src/components/DescriptionForm/ButtinsOptionsForm.tsx @@ -1,12 +1,14 @@ -import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import React from "react"; -import SettingIcon from "@icons/questionsPage/settingIcon"; -import Clue from "@icons/questionsPage/clue"; -import Branching from "@icons/questionsPage/branching"; import { Box, IconButton, useTheme } from "@mui/material"; + +import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; + +import SettingIcon from "@icons/questionsPage/settingIcon"; +import Branching from "@icons/questionsPage/branching"; import HideIcon from "@icons/questionsPage/hideIcon"; import CopyIcon from "@icons/questionsPage/CopyIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; + import StarIconPoints from "./StarIconsPoints"; interface Props { @@ -16,6 +18,7 @@ interface Props { export default function ButtonsOptionsForm({ SSHC, switchState }: Props) { const theme = useTheme(); + const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [ { icon: , @@ -50,19 +53,19 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) { gap: "10px", }} > - {buttonSetting.map((e, i) => ( + {buttonSetting.map(({ icon, title, value }, index) => ( { - SSHC(e.value); + SSHC(value); }} sx={{ - backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent", - color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main, + backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", + color: switchState === value ? "#ffffff" : theme.palette.grey3.main, }} > - {e.icon} - {e.title} + {icon} + {title} ))} diff --git a/src/components/DescriptionForm/DescriptionForm.tsx b/src/components/DescriptionForm/DescriptionForm.tsx index caade152..197223e7 100644 --- a/src/components/DescriptionForm/DescriptionForm.tsx +++ b/src/components/DescriptionForm/DescriptionForm.tsx @@ -1,30 +1,31 @@ +import React from "react"; import { useState } from "react"; import { Box, IconButton, TextField, Typography } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import DeleteIcon from "@icons/questionsPage/deleteIcon"; + import CustomButton from "../CustomButton"; +import SwitchAnswerOptions from "./SwitchAnswerOptions"; +import ButtonsOptionsForm from "./ButtinsOptionsForm"; import PriceButtons from "./PriceButton"; import DiscountButtons from "./DiscountButtons"; -import ButtonsOptions from "../../pages/Questions/ButtonsOptions"; import CustomTextField from "@ui_kit/CustomTextField"; import OneIcon from "@icons/questionsPage/OneIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; import PointsIcon from "@icons/questionsPage/PointsIcon"; -import ImageAndVideoButtons from "./ImageAndVideoButtons"; import Info from "@icons/Info"; -import SwitchAnswerOptions from "./SwitchAnswerOptions"; -import ButtonsOptionsForm from "./ButtinsOptionsForm"; -export default function DescriptionForm() { - const [switchState, setSwitchState] = useState("setting"); - const [callToAction, setCallToAction] = useState(false); +import ImageAndVideoButtons from "./ImageAndVideoButtons"; + +export const DescriptionForm = () => { + const [switchState, setSwitchState] = useState(""); const [priceButtonsActive, setPriceButtonsActive] = useState(0); const [priceButtonsType, setPriceButtonsType] = useState(); const [forwarding, setForwarding] = useState(false); - const ButtonsActive = (index: number, type: string) => { + const buttonsActive = (index: number, type: string) => { setPriceButtonsActive(index); setPriceButtonsType(type); }; @@ -53,13 +54,11 @@ export default function DescriptionForm() { - + ) : ( - "" + )} ) : ( setCallToAction(true)} variant="contained" sx={{ mb: "20px", @@ -190,4 +186,4 @@ export default function DescriptionForm() { ); -} +}; diff --git a/src/components/ResultListPage.tsx b/src/components/ResultListForm.tsx similarity index 99% rename from src/components/ResultListPage.tsx rename to src/components/ResultListForm.tsx index 0f737447..745729fb 100644 --- a/src/components/ResultListPage.tsx +++ b/src/components/ResultListForm.tsx @@ -9,7 +9,7 @@ import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21"; import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11"; import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12"; -export default function ResultListPage() { +export const ResultListForm = () => { const [alignType, setAlignType] = useState<"left" | "right">("left"); const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne"); return ( @@ -193,4 +193,4 @@ export default function ResultListPage() { ); -} +}; diff --git a/src/components/SettingForm.tsx b/src/components/SettingForm.tsx index 046f4c5f..35d9f118 100644 --- a/src/components/SettingForm.tsx +++ b/src/components/SettingForm.tsx @@ -1,17 +1,18 @@ +import { useState } from "react"; import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material"; -import Info from "@icons/Info"; import CustomButton from "./CustomButton"; -import SwichResult from "./SwichResult"; +import { SwitchSetting } from "./SwichResult"; + +import Info from "@icons/Info"; import listChecks from "../assets/icon/listChecks.svg"; import ShareNetwork from "../assets/icon/ShareNetwork.svg"; import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg"; -import { useState } from "react"; const buttonSetting: { title: string; sx: SxProps; type: string }[] = [ { - sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px" }, + sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" }, title: "До формы контактов", type: "toContactForm", }, @@ -27,7 +28,7 @@ const buttonSetting: { title: string; sx: SxProps; type: string }[] = [ }, ]; -export default function SettingForm() { +export const SettingForm = () => { const [activeIndex, setActiveIndex] = useState(); const [typeActive, setTypeActive] = useState(); @@ -37,7 +38,7 @@ export default function SettingForm() { }; return ( - + Настройки результатов @@ -60,7 +61,9 @@ export default function SettingForm() { mb: "20px", }} > - Показывать результат + + Показывать результат + @@ -91,12 +94,12 @@ export default function SettingForm() { ))} {typeActive === "e-mail" ? ( - + ) : ( <> - - - + + + )} @@ -125,4 +128,4 @@ export default function SettingForm() { ); -} +}; diff --git a/src/components/SwichResult.tsx b/src/components/SwichResult.tsx index f2cde03f..d6938cec 100644 --- a/src/components/SwichResult.tsx +++ b/src/components/SwichResult.tsx @@ -5,7 +5,7 @@ type Props = { text: string; icon: any; }; -export default function SwichResult({ text, icon }: Props) { +export const SwitchSetting = ({ text, icon }: Props) => { const [active, setActive] = useState(false); return ( ); -} +}; diff --git a/src/index.tsx b/src/index.tsx index e53a6ec9..ca3131f9 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,24 +1,19 @@ import React from "react"; -import ReactDOM from "react-dom/client"; -import "./index.css"; -import App from "./App"; import { BrowserRouter, Route, Routes } from "react-router-dom"; -import lightTheme from "./utils/themes/light"; +import ReactDOM from "react-dom/client"; import { ThemeProvider } from "@mui/material"; -import CreateQuiz from "./components/CreateQuiz/CreateQuiz"; -import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz"; -import darkTheme from "./utils/themes/dark"; -import HorizontalLinearStepper from "./ui_kit/Stepper"; -import Create from "./pages/createQuize/Create"; -import Quizes from "./pages/createQuize/Quizes"; -import Projects from "./pages/createQuize/Projects"; -import Gallery from "./pages/createQuize/Gallery"; +import { Setting } from "./pages/Setting"; + import StartPage from "./pages/startPage/StartPage"; import Main from "./pages/main"; import FirstQuiz from "./pages/startPage/FirstQuiz"; import QuestionsPage from "./pages/Questions/QuestionsPage"; -import Result from "./pages/Result"; +import { Result } from "./pages/Result/Result"; + +import lightTheme from "./utils/themes/light"; + +import "./index.css"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( @@ -31,6 +26,7 @@ root.render( } /> } /> } /> + } /> diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 6b5206cd..4fd33be1 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -49,19 +49,19 @@ export default function ButtonsOptions({ SSHC, switchState }: Props) { gap: "10px", }} > - {buttonSetting.map((e, i) => ( + {buttonSetting.map(({ icon, title, value }) => ( { - SSHC(e.value); + SSHC(value); }} sx={{ - backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent", - color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main, + backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", + color: switchState === value ? "#ffffff" : theme.palette.grey3.main, }} > - {e.icon} - {e.title} + {icon} + {title} ))} diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index b38c7bcf..295de4b7 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -35,6 +35,7 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) { ml: 0, }, "&:hover": { + border: "none", borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main, }, }} diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index c27c7ad0..509cc321 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -1,8 +1,9 @@ -import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material"; -import CustomCheckbox from "@ui_kit/CustomCheckbox"; -import InfoIcon from "@icons/InfoIcon"; import React from "react"; -import RatingStar from "@icons/questionsPage/ratingStar"; +import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material"; + +import CustomCheckbox from "@ui_kit/CustomCheckbox"; + +import InfoIcon from "@icons/InfoIcon"; import TropfyIcon from "@icons/questionsPage/tropfyIcon"; import FlagIcon from "@icons/questionsPage/FlagIcon"; import HeartIcon from "@icons/questionsPage/heartIcon"; @@ -11,51 +12,58 @@ import LightbulbIcon from "@icons/questionsPage/lightbulbIcon"; import HashtagIcon from "@icons/questionsPage/hashtagIcon"; import StarIconMini from "@icons/questionsPage/StarIconMini"; - - export default function SettingSlider() { - const theme = useTheme(); - const [current, setCurrent] = React.useState(1) - const buttonRatingForm: {icon: JSX.Element} [] =[ - {icon: }, - {icon: }, - {icon: }, - {icon: }, - {icon: }, - {icon: }, - {icon: }, - ] + const theme = useTheme(); + const [current, setCurrent] = React.useState(1); + const buttonRatingForm: { icon: JSX.Element }[] = [ + { icon: }, + { icon: }, + { icon: }, + { icon: }, + { icon: }, + { icon: }, + { icon: }, + ]; - return ( - - - Настройки рейтинга - Форма - - {buttonRatingForm.map( (e,i) => ( - {setCurrent(i)}} - sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent', - color: current === i ? '#ffffff' : theme.palette.grey3.main, - width: '40px', - height: '40px', - borderRadius: '4px' - }} - > - {e.icon} - - ))} - - Количество - - - - - Настройки вопросов - - - + return ( + + + Настройки рейтинга + Форма + + {buttonRatingForm.map((element, index) => ( + { + setCurrent(index); + }} + sx={{ + backgroundColor: current === index ? theme.palette.brightPurple.main : "transparent", + color: current === index ? "#ffffff" : theme.palette.grey3.main, + width: "40px", + height: "40px", + borderRadius: "4px", + }} + > + {element.icon} + + ))} - ); -}; \ No newline at end of file + Количество + + + + Настройки вопросов + + + + + ); +} diff --git a/src/pages/Result.tsx b/src/pages/Result.tsx deleted file mode 100644 index 8fd320b8..00000000 --- a/src/pages/Result.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import CreationFullCard from "../components/CreationFullCard"; -import image from "../assets/Rectangle 110.png"; -import { Box, useTheme } from "@mui/material"; -import CustomButton from "../components/CustomButton"; -import { useState } from "react"; -import ResultSetting from "../components/ResultSetting"; - -import Info from "@icons/Info"; - -export default function Result() { - const theme = useTheme(); - - const [settings, setSettings] = useState(false); - return ( - - {settings ? ( - - ) : ( - <> - - - setSettings(true)} - variant="contained" - sx={{ - backgroundColor: theme.palette.brightPurple.main, - mr: "23px", - minWidth: "258px", - }} - > - Создать результаты - - - - - )} - - ); -} diff --git a/src/pages/Result/Result.tsx b/src/pages/Result/Result.tsx new file mode 100644 index 00000000..46bdbe6a --- /dev/null +++ b/src/pages/Result/Result.tsx @@ -0,0 +1,38 @@ +import { Link } from "react-router-dom"; +import { Box, useTheme } from "@mui/material"; + +import CustomButton from "../../components/CustomButton"; +import CreationFullCard from "../../components/CreationFullCard"; + +import Info from "@icons/Info"; + +import image from "../../assets/Rectangle 110.png"; + +export const Result = () => { + const theme = useTheme(); + return ( + + + + + + Создать результаты + + + + + + + ); +}; diff --git a/src/components/ResultSetting.tsx b/src/pages/Setting.tsx similarity index 84% rename from src/components/ResultSetting.tsx rename to src/pages/Setting.tsx index 320804a5..ed14f87b 100644 --- a/src/components/ResultSetting.tsx +++ b/src/pages/Setting.tsx @@ -1,20 +1,18 @@ import { Box, Button, Typography, useTheme } from "@mui/material"; -import CustomWrapper from "./CustomWrapper"; -import CustomButton from "./CustomButton"; -import BackButton from "./Button/BackButton"; +import { SettingForm } from "../components/SettingForm"; +import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm"; +import { ResultListForm } from "../components/ResultListForm"; + +import CustomWrapper from "../components/CustomWrapper"; +import CustomButton from "../components/CustomButton"; +import BackButton from "../components/Button/BackButton"; import Plus from "@icons/Plus"; import Info from "@icons/Info"; import IconPlus from "@icons/IconPlus"; -import SettingForm from "./SettingForm"; -import DescriptionForm from "./DescriptionForm/DescriptionForm"; -import ResultListPage from "./ResultListPage"; -type Props = { - setSettings: React.Dispatch>; -}; -export default function ResultSetting({ setSettings }: Props) { +export const Setting = () => { const theme = useTheme(); return ( @@ -24,7 +22,6 @@ export default function ResultSetting({ setSettings }: Props) {