сделай Accordion прозрачным и более вписываемым в дизайн и сделай более приятным: import React, { useState } from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Switch,
    TextField,
    FormControlLabel,
    Divider,
    Typography,
    Box,
    Stack,
    Grid,
    Accordion,
    AccordionSummary,
    AccordionDetails,
} from '@mui/material';
import ThemeToggle from '../components/ThemeToggle';
import { styled } from '@mui/system';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

// Стилизация компонентов для соответствия стилю Apple и оптимизации пространства
const StyledDialog = styled(Dialog)(({ theme }) => ({
    '& .MuiDialog-paper': {
        borderRadius: 16,
        padding: theme.spacing(3), // Увеличен внутренний отступ
        boxShadow: theme.shadows[5],
        backgroundColor: theme.palette.background.default, // Убедитесь, что фон соответствует теме
        [theme.breakpoints.down('sm')]: {
            margin: theme.spacing(1),
            padding: theme.spacing(2),
        },
    },
}));

const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
    fontSize: '1.25rem',
    fontWeight: 600,
    color: theme.palette.text.primary,
    padding: `0 ${theme.spacing(2)}`, // Добавлены горизонтальные отступы
}));

const StyledButton = styled(Button)(({ theme }) => ({
    borderRadius: 999,
    textTransform: 'none',
    padding: theme.spacing(1, 3),
    fontSize: '0.875rem',
    [theme.breakpoints.down('sm')]: {
        padding: theme.spacing(0.75, 2.5),
        fontSize: '0.75rem',
    },
}));

const Settings = ({ open, onClose }) => {
    const [settings, setSettings] = useState({
        nickname: localStorage.getItem('nickname') || '',
        disableRewind: JSON.parse(localStorage.getItem('disableRewind')) || false,
        darkTheme: JSON.parse(localStorage.getItem('darkTheme')) || false,
        muteNotifications: JSON.parse(localStorage.getItem('muteNotifications')) || false,
        isPublic: JSON.parse(localStorage.getItem('isPublic')) || false,
    });

    const handleChange = (event) => {
        const { name, value, checked } = event.target;
        setSettings(prev => ({ ...prev, [name]: name === 'nickname' ? value : checked }));
    };

    const handleSave = () => {
        Object.entries(settings).forEach(([key, value]) => {
            localStorage.setItem(key, JSON.stringify(value));
        });
        onClose();
    };

    return (
        <StyledDialog
            open={open}
            onClose={onClose}
            fullWidth
            maxWidth="sm"
        >
            {/* Заголовок и Переключатель темы */}
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                <StyledDialogTitle>Настройки</StyledDialogTitle>
                <ThemeToggle />
            </Box>

            <Divider />

            {/* Контент Настроек */}
            <DialogContent dividers>
                <Stack spacing={3}>
                    {/* Никнейм */}
                    <Box>
                        <TextField
                            autoFocus
                            name="nickname"
                            label="Никнейм"
                            type="text"
                            fullWidth
                            variant="outlined"
                            value={settings.nickname}
                            onChange={handleChange}
                            InputProps={{
                                style: { borderRadius: 8 },
                            }}
                            size="big"
                        />
                    </Box>

                    {/* Основные Настройки с использованием Accordion */}
                    <Accordion elevation={4}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="main-settings-content"
                            id="main-settings-header"
                        >
                            <Typography variant="subtitle1" sx={{ paddingLeft: 2 }}>Основные настройки</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={settings.disableRewind}
                                                onChange={handleChange}
                                                name="disableRewind"
                                                color="primary"
                                                sx={{
                                                    '& .MuiSwitch-switchBase.Mui-checked': {
                                                        color: '#007AFF',
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 122, 255, 0.12)',
                                                        },
                                                    },
                                                    '& .MuiSwitch-switchBase': {
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                                        },
                                                    },
                                                }}
                                            />
                                        }
                                        label="Запретить перемотку видео другим"
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={settings.muteNotifications}
                                                onChange={handleChange}
                                                name="muteNotifications"
                                                color="primary"
                                                sx={{
                                                    '& .MuiSwitch-switchBase.Mui-checked': {
                                                        color: '#007AFF',
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 122, 255, 0.12)',
                                                        },
                                                    },
                                                    '& .MuiSwitch-switchBase': {
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                                        },
                                                    },
                                                }}
                                            />
                                        }
                                        label="Отключить звук уведомлений"
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={settings.isPublic}
                                                onChange={handleChange}
                                                name="isPublic"
                                                color="primary"
                                                sx={{
                                                    '& .MuiSwitch-switchBase.Mui-checked': {
                                                        color: '#007AFF',
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 122, 255, 0.12)',
                                                        },
                                                    },
                                                    '& .MuiSwitch-switchBase': {
                                                        '&:hover': {
                                                            backgroundColor: 'rgba(0, 0, 0, 0.04)',
                                                        },
                                                    },
                                                }}
                                            />
                                        }
                                        label="Публичный доступ"
                                    />
                                </Grid>
                            </Grid>
                        </AccordionDetails>
                    </Accordion>
                </Stack>
            </DialogContent>

            <Divider />

            {/* Кнопки действий */}
            <DialogActions sx={{ mt: 2, px: 3, justifyContent: 'flex-end' }}>
                <StyledButton onClick={onClose} variant="outlined" color="secondary">
                    Отмена
                </StyledButton>
                <StyledButton onClick={handleSave} variant="contained" color="primary">
                    Сохранить
                </StyledButton>
            </DialogActions>
        </StyledDialog>
    );
};

export default Settings;