fix: result styles

2023-10-16 17:23:44 +03:00 · 2023-10-16 17:23:44 +03:00 · 7b052ddd96
commit 7b052ddd96
parent 4507c71ba0
7 changed files with 201 additions and 93 deletions
--- a/src/pages/Result/DescriptionForm/DescriptionForm.tsx
+++ b/src/pages/Result/DescriptionForm/DescriptionForm.tsx
@ -31,7 +31,7 @@ export const DescriptionForm = () => {
  return (
    <Box
      sx={{
-        width: "796px",
+        maxWidth: "796px",
        height: "100%",
        bgcolor: "#FFFFFF",
        borderRadius: "12px",
@ -57,7 +57,10 @@ export const DescriptionForm = () => {
        </Box>

        <Box sx={{ display: "flex" }}>
-          <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
+          <PriceButtons
+            ButtonsActive={buttonsActive}
+            priceButtonsActive={priceButtonsActive}
+          />
          <DiscountButtons />
        </Box>

@ -85,7 +88,10 @@ export const DescriptionForm = () => {
        {priceButtonsType === "smooth" ? (
          <Box sx={{ mb: "20px" }}>
            <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
-              <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
+              <Typography
+                component={"h6"}
+                sx={{ weight: "500", fontSize: "18px" }}
+              >
                Призыв к действию
              </Typography>
              <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
@ -127,8 +133,13 @@ export const DescriptionForm = () => {
              </Button>
              {forwarding ? (
                <Box sx={{ ml: "20px", mt: "-36px" }}>
-                  <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
-                    <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
+                  <Box
+                    sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
+                  >
+                    <Typography
+                      component={"h6"}
+                      sx={{ weight: "500", fontSize: "18px" }}
+                    >
                      Переадресация
                    </Typography>
                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
--- a/src/pages/Result/DescriptionForm/DiscountButtons.tsx
+++ b/src/pages/Result/DescriptionForm/DiscountButtons.tsx
@ -14,7 +14,10 @@ export default function DiscountButtons() {
          <DeleteIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
      </Box>
-      <Box component="div" sx={{ mb: "20px" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", gap: "8px", flexWrap: "wrap", mb: "20px" }}
+      >
        <Button
          variant="contained"
          sx={{
--- a/src/pages/Result/DescriptionForm/PriceButton.tsx
+++ b/src/pages/Result/DescriptionForm/PriceButton.tsx
@ -1,8 +1,16 @@
-import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  SxProps,
+  Theme,
+  Typography,
+} from "@mui/material";

 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

-const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
+const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
+  [
    {
      title: "10000 ₽",
      type: "10000 ₽",
@ -18,7 +26,6 @@ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
      sx: {
        width: "94px",
        height: "48px",
-      ml: "8px",
        border: "1px solid #9A9AAF",
      },
    },
@ -28,7 +35,6 @@ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
      sx: {
        width: "93px",
        height: "48px",
-      ml: "8px",
        border: "1px solid #9A9AAF",
        whiteSpace: "nowrap",
      },
@ -39,7 +45,6 @@ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
      sx: {
        width: "38px",
        height: "48px",
-      ml: "8px",
        border: "1px solid #9A9AAF",
      },
    },
@ -50,7 +55,6 @@ const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
        width: "93px",
        height: "48px",
        border: "1px solid #9A9AAF",
-      ml: "8px",
      },
    },
  ];
@ -60,7 +64,10 @@ type Props = {
  priceButtonsActive: number | undefined;
 };

-export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Props) {
+export default function PriceButtons({
+  ButtonsActive,
+  priceButtonsActive,
+}: Props) {
  return (
    <Box>
      <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
@ -71,7 +78,10 @@ export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Prop
          <DeleteIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
      </Box>
-      <Box component="div" sx={{ mb: "20px" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexWrap: "wrap", gap: "8px", mb: "20px" }}
+      >
        {priceButtonsArray.map(({ title, type, sx }, index) => (
          <Button
            onClick={() => ButtonsActive(index, type)}
--- a/src/pages/Result/ResultListForm.tsx
+++ b/src/pages/Result/ResultListForm.tsx
@ -12,9 +12,11 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";

 export const ResultListForm = () => {
  const [alignType, setAlignType] = useState<"left" | "right">("left");
-  const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
+  const [proportions, setProportions] = useState<
+    "oneOne" | "twoOne" | "oneTwo"
+  >("oneOne");
  return (
-    <Box sx={{ width: "796px", mb: "30px" }}>
+    <Box sx={{ maxWidth: "796px", mb: "30px" }}>
      <Box
        sx={{
          height: "100%",
@ -31,9 +33,17 @@ export const ResultListForm = () => {
            mb: "20px",
          }}
        >
-          <Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
+          <Typography sx={{ color: "#9A9AAF" }}>
+            Показывать результат
+          </Typography>
          <IconButton>
-            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
              <rect width="30" height="30" rx="6" fill="#EEE4FC" />
              <path
                d="M22.5 11.25L15 18.75L7.5 11.25"
@ -175,7 +185,7 @@ export const ResultListForm = () => {
          />
        </Box>
        <Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
-          <CustomCheckbox label={"Кнопка \"Не знаю, что выбрать\""}/>
+          <CustomCheckbox label={'Кнопка "Не знаю, что выбрать"'} />
          <Info />
        </Box>
      </Box>
--- a/src/pages/Result/Setting.tsx
+++ b/src/pages/Result/Setting.tsx
@ -15,11 +15,11 @@ export const Setting = () => {
  const { listQuizes, updateQuizesList } = quizStore();
  const params = Number(useParams().quizId);
  const handleNext = () => {
-        updateQuizesList(params, {step: listQuizes[params].step + 1})
-    }
+    updateQuizesList(params, { step: listQuizes[params].step + 1 });
+  };
  const theme = useTheme();
  return (
-    <Box sx={{ width: "796px" }}>
+    <Box sx={{ maxWidth: "796px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
        <Typography sx={{ pr: "10px" }} variant="h5">
          Настройки результатов
@ -46,7 +46,9 @@ export const Setting = () => {
      </Box>
      <CustomWrapper sx={{ mt: "30px" }} text="Показывать результат" />
      <CustomWrapper sx={{ mt: "30px" }} text="Настройки почты" />
-      <Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
+      <Box
+        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
+      >
        <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
          Создайте результат
        </Typography>
@ -70,22 +72,39 @@ export const Setting = () => {
        </Button>
      </Box>
      <CustomWrapper result={true} text="Показывать результат" />
-      <Box sx={{ width: "850px", display: "flex", alignItems: "center" }}>
-        <Typography sx={{ color: "#7E2AEA", cursor: "default" }}>
-          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-          - - - - - - -
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          columnGap: "10px",
+        }}
+      >
+        <Box
+          sx={{
+            boxSizing: "border-box",
+            width: "100%",
+            height: "1px",
+            backgroundPosition: "bottom",
+            backgroundRepeat: "repeat-x",
+            backgroundSize: "20px 1px",
+            backgroundImage:
+              "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
+          }}
+        />
        <IconPlus />
-        </Typography>
      </Box>
-
      <CustomWrapper result={true} text="Настройки почты" />
      <Box sx={{ pt: "30px", display: "flex", alignItems: "center" }}>
        <Plus />
        <Typography component="div" sx={{ ml: "auto" }}>
-            <Button variant='outlined' sx={{padding: '10px 20px', borderRadius: '8px'}}>
+          <Button
+            variant="outlined"
+            sx={{ padding: "10px 20px", borderRadius: "8px" }}
+          >
            <ArrowLeft />
          </Button>
-          <Button variant="contained" sx={{ml: "10px",}} onClick={handleNext}>
+          <Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
            Настроить форму
          </Button>
        </Typography>
--- a/src/pages/Result/SettingForm.tsx
+++ b/src/pages/Result/SettingForm.tsx
@ -1,5 +1,14 @@
 import { useState } from "react";
-import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  SxProps,
+  Theme,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import { SwitchSetting } from "./SwichResult";

 import Info from "@icons/Info";
@ -10,17 +19,35 @@ import ArrowCounterClockWise from "@icons/ArrowCounterClockWise.svg";

 const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
  {
-    sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      backgroundColor: "#7E2AEA",
+      color: "white",
+      width: "237px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
    title: "До формы контактов",
    type: "toContactForm",
  },
  {
-    sx: { backgroundColor: "#F2F3F7", color: "#9A9AAF", width: "266px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      backgroundColor: "#F2F3F7",
+      color: "#9A9AAF",
+      width: "266px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
    title: "После формы контактов",
    type: "afterСontactForm",
  },
  {
-    sx: { color: "#9A9AAF", backgroundColor: "#F2F3F7", width: "233px", height: "44px", border: "1px solid #9A9AAF" },
+    sx: {
+      color: "#9A9AAF",
+      backgroundColor: "#F2F3F7",
+      width: "233px",
+      height: "44px",
+      border: "1px solid #9A9AAF",
+    },
    title: "Отправить на E-mail",
    type: "e-mail",
  },
@ -29,6 +56,8 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
 export const SettingForm = () => {
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const [typeActive, setTypeActive] = useState<string>("toContactForm");
+  const theme = useTheme();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1100));

  const active = (index: number, type: string) => {
    setActiveIndex(index);
@ -36,7 +65,7 @@ export const SettingForm = () => {
  };

  return (
-    <Box component="section" sx={{ width: "796px" }}>
+    <Box component="section" sx={{ maxWidth: "796px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
        <Typography sx={{ pr: "10px" }} variant="h5">
          Настройки результатов
@ -63,7 +92,13 @@ export const SettingForm = () => {
            Показывать результат
          </Typography>
          <IconButton>
-            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
              <rect width="30" height="30" rx="6" fill="#EEE4FC" />
              <path
                d="M22.5 11.25L15 18.75L7.5 11.25"
@ -75,7 +110,15 @@ export const SettingForm = () => {
            </svg>
          </IconButton>
        </Box>
-        <Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: isSmallMonitor ? "column" : "row",
+            justifyContent: "space-between",
+            gap: "20px",
+            mb: "20px",
+          }}
+        >
          {buttonSetting.map(({ sx, title, type }, index) => (
            <Button
              disableRipple
@ -85,6 +128,7 @@ export const SettingForm = () => {
                ...sx,
                bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
                color: activeIndex === index ? " white" : "#9A9AAF",
+                minWidth: isSmallMonitor ? "300px" : "auto",
              }}
            >
              {title}
@ -92,16 +136,27 @@ export const SettingForm = () => {
          ))}
        </Box>
        {typeActive === "e-mail" ? (
-          <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
+          <SwitchSetting
+            icon={listChecks}
+            text="Показывать несколько результатов"
+          />
        ) : (
          <>
-            <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
+            <SwitchSetting
+              icon={listChecks}
+              text="Показывать несколько результатов"
+            />
            <SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
-            <SwitchSetting icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
+            <SwitchSetting
+              icon={ArrowCounterClockWise}
+              text="Кнопка `Пройти тест заново`"
+            />
          </>
        )}
      </Box>
-      <Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
+      <Box
+        sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}
+      >
        <Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
          Создайте результат
        </Typography>
--- a/src/ui_kit/CustomWrapper.tsx
+++ b/src/ui_kit/CustomWrapper.tsx
@ -22,7 +22,7 @@ export default function CustomWrapper({ text, sx, result }: Props) {
  return (
    <Box
      sx={{
-        width: "796px",
+        maxWidth: "796px",

        overflow: "hidden",
        borderRadius: "12px",