diff --git a/src/assets/icons/ClockWiseIcon.tsx b/src/assets/icons/ClockWiseIcon.tsx
new file mode 100644
index 00000000..b43bb2cc
--- /dev/null
+++ b/src/assets/icons/ClockWiseIcon.tsx
@@ -0,0 +1,14 @@
+export const ClockWiseIcon = () => (
+
+);
diff --git a/src/pages/QuizAnswersPage/CardAnswer.tsx b/src/pages/QuizAnswersPage/CardAnswer.tsx
index d61f7f70..e7888248 100644
--- a/src/pages/QuizAnswersPage/CardAnswer.tsx
+++ b/src/pages/QuizAnswersPage/CardAnswer.tsx
@@ -18,129 +18,113 @@ export const CardAnswer: FC = () => {
setIsOpen(!isOpen)}
sx={{
+ borderRadius: "12px",
maxWidth: isTablet ? "450px" : "auto",
width: "100%",
- display: "flex",
- justifyContent: "space-between",
- flexDirection: isTablet ? "column" : "-moz-initial",
+ boxShadow:
+ "0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
}}
>
-
-
- 1
-
-
-
-
-
- Сегодня в 18:59 Россия, Москва
-
-
-
-
-
-
-
- Екатерина
-
-
-
-
-
- exampleemail@gmail.com
-
-
-
-
-
- +79876543210
-
-
-
-
- {!isTablet && (
-
- Новая
-
- )}
-
+
+
+ 1
+
+
+
-
- {isTablet ? (
- <>
+ Сегодня в 18:59 Россия, Москва
+
+
+
+
+
+
+
+ Екатерина
+
+
+
+
+
+ exampleemail@gmail.com
+
+
+
+
+
+ +79876543210
+
+
+
+
+ {!isTablet && (
+ {
>
Новая
-
-
-
+
+
+ {isTablet ? (
+ <>
+
-
-
-
- ) : (
-
- )}
+ >
+ Новая
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
{isOpen && (
{
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+ const isMobile = useMediaQuery(theme.breakpoints.down(600));
+ const [filterModalOpen, setFilterModalOpen] = useState(false);
+ const [exportContactsModalOpen, setExportContactsModalOpen] =
+ useState(false);
return (
-
+
@@ -64,6 +75,7 @@ export const QuizAnswersPage: FC = () => {
>
setExportContactsModalOpen(true)}
sx={{
width: "44px",
height: "44px",
@@ -86,7 +98,9 @@ export const QuizAnswersPage: FC = () => {
{isTablet && (
setFilterModalOpen(true)}
sx={{
+ background: "#fff",
width: "44px",
height: "44px",
borderRadius: "8px",
@@ -183,6 +197,15 @@ export const QuizAnswersPage: FC = () => {
+
+ setFilterModalOpen(false)}
+ />
+ setExportContactsModalOpen(false)}
+ />
);
};
diff --git a/src/ui_kit/CheckboxSelect.tsx b/src/ui_kit/CheckboxSelect.tsx
index d50c0904..25b6b67b 100644
--- a/src/ui_kit/CheckboxSelect.tsx
+++ b/src/ui_kit/CheckboxSelect.tsx
@@ -3,11 +3,10 @@ import {
FormControl,
MenuItem,
Select,
- Checkbox,
- ListItemText,
SelectChangeEvent,
} from "@mui/material";
import ArrowDown from "@icons/ArrowDownIcon";
+import CustomCheckbox from "./CustomCheckbox";
type CheckboxSelectProps = {
options: { label: string; value: string }[];
@@ -58,7 +57,7 @@ export const CheckboxSelect: React.FC = ({
mt: "8px",
p: "4px",
borderRadius: "8px",
- backgroundColor: "#F5F2FF",
+ backgroundColor: "#fff",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
@@ -70,7 +69,7 @@ export const CheckboxSelect: React.FC = ({
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
- backgroundColor: "#F5F2FF",
+ backgroundColor: "#fff",
color: "#7E2AEA",
},
},
@@ -109,17 +108,16 @@ export const CheckboxSelect: React.FC = ({
}}
value="SelectAll"
>
-
-
{options.map((option) => (
diff --git a/src/ui_kit/Modal/ExportContactsModal.tsx b/src/ui_kit/Modal/ExportContactsModal.tsx
new file mode 100644
index 00000000..d8eed7bf
--- /dev/null
+++ b/src/ui_kit/Modal/ExportContactsModal.tsx
@@ -0,0 +1,190 @@
+import {
+ Box,
+ Button,
+ Modal,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from "@mui/material";
+import { FC } from "react";
+import { DatePicker } from "@mui/x-date-pickers";
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CalendarIcon from "@icons/CalendarIcon";
+
+interface Iprops {
+ open: boolean;
+ handleClose: () => void;
+}
+
+export const ExportContactsModal: FC = ({ open, handleClose }) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+
+ const style = {
+ position: "absolute" as "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "100%",
+ maxWidth: isMobile ? 343 : 620,
+ bgcolor: "background.paper",
+ boxShadow: 24,
+ borderRadius: "12px",
+ };
+
+ return (
+
+
+
+
+ Настройте фильтры отображения
+
+
+
+
+ c
+ ,
+ }}
+ slotProps={{
+ openPickerButton: {
+ sx: {
+ p: 0,
+ },
+ "data-cy": "open-datepicker",
+ },
+ }}
+ sx={{
+ p: "10px",
+ "& .MuiInputBase-root": {
+ maxWidth: "250px",
+ width: "100%",
+ backgroundColor: "#F2F3F7",
+ borderRadius: "10px",
+ pr: "31px",
+ "& input": {
+ py: "11px",
+ pl: "13px",
+ lineHeight: "19px",
+ },
+ "& fieldset": {
+ borderColor: "#9A9AAF",
+ },
+ },
+ }}
+ />
+
+
+ до
+
+ ,
+ }}
+ slotProps={{
+ openPickerButton: {
+ sx: {
+ p: 0,
+ },
+ "data-cy": "open-datepicker",
+ },
+ }}
+ sx={{
+ p: "10px",
+ "& .MuiInputBase-root": {
+ maxWidth: "250px",
+ width: "100%",
+ backgroundColor: "#F2F3F7",
+ borderRadius: "10px",
+ pr: "31px",
+ "& input": {
+ py: "11px",
+ pl: "13px",
+ lineHeight: "19px",
+ },
+ "& fieldset": {
+ borderColor: "#9A9AAF",
+ },
+ },
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/ui_kit/Modal/FilterModal/FilterModal.tsx b/src/ui_kit/Modal/FilterModal/FilterModal.tsx
new file mode 100644
index 00000000..9f1758ed
--- /dev/null
+++ b/src/ui_kit/Modal/FilterModal/FilterModal.tsx
@@ -0,0 +1,148 @@
+import {
+ Box,
+ Button,
+ Modal,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from "@mui/material";
+import { CheckboxSelect } from "@ui_kit/CheckboxSelect";
+import { Select } from "../../../pages/Questions/Select";
+import { FC } from "react";
+import { ClockWiseIcon } from "@icons/ClockWiseIcon";
+
+const options = [
+ { label: "Муром (1)", value: "option1" },
+ { label: "Москва (1)", value: "option2" },
+];
+
+interface Iprops {
+ open: boolean;
+ handleClose: () => void;
+}
+
+export const FilterModal: FC = ({ open, handleClose }) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+
+ const style = {
+ position: "absolute" as "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "100%",
+ maxWidth: isMobile ? 343 : 620,
+ bgcolor: "background.paper",
+ boxShadow: 24,
+ borderRadius: "12px",
+ };
+
+ return (
+
+
+
+
+ Настройте фильтры отображения
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};