инфо открывается при наведении

src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
+import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
 import { useState } from "react";
@@ -15,7 +15,7 @@ interface GenderAndAgeSelectorProps {
 export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) {
   const theme = useTheme();
   const [age, setAge] = useState<string>('');
-  const [gender, setGender] = useState<string[]>([]);
+  const [gender, setGender] = useState<string>('');
   const [selectOpen, setSelectOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
@@ -32,7 +32,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       const [result, error] = await auditoryAdd({
         quizId: quiz.backendId,
         body: {
-          sex: gender.includes("male"),
+          sex: gender === "male",
           age
         }
       });
@@ -46,13 +46,13 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
         handleAdd({
           id: result.ID,
           quiz_id: quiz.backendId,
-          sex: gender.includes("male"),
+          sex: gender === "male",
           age,
           deleted: false,
         });
         enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
         // Очищаем форму
-        setGender([]);
+        setGender('');
         setAge('');
       }
     } catch (error) {
@@ -79,9 +79,9 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 mr: '3px',
               }}
               component="legend">Пол</FormLabel>
-            <InfoPopover />
+            {/* <InfoPopover /> */}
           </Box>
-          <FormGroup
+          <RadioGroup
             sx={{
               width: "155px",
               justifyContent: "space-between",
@@ -89,6 +89,10 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
               ml: "-9px"
             }}
             row
+            aria-label="gender"
+            name="row-radio-buttons-group"
+            value={gender}
+            onChange={(e) => setGender(e.target.value)}
           >
             <FormControlLabel
               sx={{
@@ -115,20 +119,8 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              control={
+              value="male"
-                <Checkbox 
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
-                  checked={gender.includes('male')}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setGender([...gender, 'male']);
-                    } else {
-                      setGender(gender.filter(g => g !== 'male'));
-                    }
-                  }}
-                  icon={<CheckboxIcon />}
-                  checkedIcon={<CheckboxIcon checked />}
-                />
-              }
               label="М"
             />
             <FormControlLabel
@@ -155,23 +147,11 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              control={
+              value="female"
-                <Checkbox 
+              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
-                  checked={gender.includes('female')}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setGender([...gender, 'female']);
-                    } else {
-                      setGender(gender.filter(g => g !== 'female'));
-                    }
-                  }}
-                  icon={<CheckboxIcon />}
-                  checkedIcon={<CheckboxIcon checked />}
-                />
-              }
               label="Ж"
             />
-          </FormGroup>
+          </RadioGroup>
         </FormControl>
 
         <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">
@@ -189,7 +169,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 color: '#4D4D4D',
               },
             }}>Возраст</FormLabel>
-            <InfoPopover />
+            {/* <InfoPopover /> */}
           </Box>
           <AgeInputWithSelect value={age} onChange={setAge} onErrorChange={setAgeError} />
         </FormControl>
@@ -198,7 +178,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       <Button
         onClick={addItem}
         variant="contained"
-        disabled={gender.length === 0 || !age || ageError}
+        disabled={!gender || !age || ageError}
         sx={{
           bgcolor: theme.palette.brightPurple.main,
           borderRadius: "8px",

src/pages/PersonalizationAI/GenderButton.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import MaleIcon from '@mui/icons-material/Male';
-import FemaleIcon from '@mui/icons-material/Female';
-import PeopleIcon from '@mui/icons-material/People';
-
-interface GenderButtonProps {
-  selected: boolean;
-  onClick: () => void;
-  icon: 'male' | 'female' | 'both';
-  label: string;
-}
-
-export const GenderButton: React.FC<GenderButtonProps> = ({ selected, onClick, icon, label }) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const getIcon = () => {
-    switch (icon) {
-      case 'male':
-        return <MaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      case 'female':
-        return <FemaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      case 'both':
-        return <PeopleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Box
-      onClick={onClick}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: isMobile ? '8px 12px' : '10px 16px',
-        borderRadius: '8px',
-        cursor: 'pointer',
-        bgcolor: selected ? theme.palette.brightPurple.main : 'transparent',
-        border: `1px solid ${selected ? theme.palette.brightPurple.main : theme.palette.grey[300]}`,
-        '&:hover': {
-          bgcolor: selected ? theme.palette.brightPurple.main : theme.palette.grey[100],
-        },
-      }}
-    >
-      {getIcon()}
-      <Typography
-        sx={{
-          fontSize: isMobile ? '14px' : '16px',
-          fontWeight: 500,
-          color: selected ? theme.palette.common.white : theme.palette.text.primary,
-        }}
-      >
-        {label}
-      </Typography>
-    </Box>
-  );
-}; 

src/pages/PersonalizationAI/PersonalizationAI.tsx

@@ -73,7 +73,7 @@ export default function PersonalizationAI() {
     }
   }
 
-  const handleAdd = (item:AuditoryItem) => {
+  const handleAdd = (item: AuditoryItem) => {
     setAuditory(old => ([...old, item]))
   }
 
@@ -103,7 +103,7 @@ export default function PersonalizationAI() {
 
   return (
     <>
-      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px"}}>
+      <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px" }}>
         <Typography variant="h5" color={theme.palette.grey3.main} fontWeight={700} sx={{ fontSize: 24, letterSpacing: "-0.2px" }}>
           Персонализация вопросов с помощью AI
         </Typography>
@@ -114,9 +114,7 @@ export default function PersonalizationAI() {
           wordSpacing: "0.1px",
           lineHeight: "21.4px"
         }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Данный раздел позволяет вам создавать персонализированный опрос под каждую целевую аудиторию отдельно, наш AI перефразирует ваши вопросы согласно настройкам. Для этого нужно выбрать пол и возраст вашей аудитории и получите персональную ссылку с нужными настройками в списке ниже. Так же вы можете обогатить свою ссылку UTM метками        </Typography>
-        </Typography>
-
         {/* Первый белый блок */}
         <Box sx={{
           bgcolor: "#fff",
@@ -185,8 +183,8 @@ export default function PersonalizationAI() {
             alignItems: "center"
           }}
         >
-          <Typography sx={{ width: "100%" ,textAlign: "center", mb: "25px"}}>Уверены, что хотите удалить ссылку?</Typography>
+          <Typography sx={{ width: "100%", textAlign: "center", mb: "25px" }}>Уверены, что хотите удалить ссылку?</Typography>
-          <Button sx={{mb: "20px"}} onClick={handleDelete}>Удалить</Button>
+          <Button sx={{ mb: "20px" }} onClick={handleDelete}>Удалить</Button>
           <Button variant="contained" onClick={() => setDeleteModal(0)} >Отмена</Button>
         </Box>
       </Modal>

src/ui_kit/Toolbars/TooltipClickInfo.tsx

@@ -12,6 +12,7 @@ export default function TooltipClickInfo({ title }: { title: string }) {
   const handleTooltipOpen = () => {
     setOpen(true);
   };
+
   return (
     <>
       <ClickAwayListener onClickAway={handleTooltipClose}>
@@ -23,14 +24,13 @@ export default function TooltipClickInfo({ title }: { title: string }) {
             placement="top"
             onClose={handleTooltipClose}
             open={open}
-            disableFocusListener
+            title={title}
-            disableHoverListener
+            onMouseEnter={handleTooltipOpen}
-            disableTouchListener
+            onMouseLeave={handleTooltipClose}
             sx={{
               fontSize: "12px",
               p:"10px"
             }}
-            title={title}
           >
             <IconButton onClick={handleTooltipOpen}>
               <InfoIcon />