<commit_before>import React, { useState } from 'react';
import { c } from 'ttag';
import PropTypes from 'prop-types';
import { FormModal, PrimaryButton, Label, Alert, TextArea } from 'react-components';

const CustomThemeModal = ({ onSave, theme: initialTheme = '', ...rest }) => {
    const [theme, setTheme] = useState(initialTheme);

    const handleChange = ({ target }) => setTheme(target.value);
    const handleSubmit = async () => {
        await onSave(theme);
        rest.onClose();
    };

    return (
        <FormModal
            submit={<PrimaryButton type="submit">{c('Action').t`Save`}</PrimaryButton>}
            onSubmit={handleSubmit}
            title={c('Title').t`Custom mode`}
            small
            {...rest}
        >
            <Alert type="warning">{c('Warning')
                .t`Custom modes from third parties can potentially betray your privacy. Only use modes from trusted sources.`}</Alert>
            <Label className="mb1" htmlFor="themeTextarea">{c('Label').t`CSS code`}</Label>
            <TextArea
                className="mb1"
                id="themeTextarea"
                value={theme}
                placeholder={c('Action').t`Insert CSS code here`}
                onChange={handleChange}
            />
        </FormModal>
    );
};

CustomThemeModal.propTypes = {
    onSave: PropTypes.func.isRequired,
    theme: PropTypes.string
};

export default CustomThemeModal;<commit_msg>[MAILWEB-801] Use larger modal for Custom CSS<commit_after>import React, { useState } from 'react';
import { c } from 'ttag';
import PropTypes from 'prop-types';
import { FormModal, PrimaryButton, Label, Alert, TextArea } from 'react-components';

const CustomThemeModal = ({ onSave, theme: initialTheme = '', ...rest }) => {
    const [theme, setTheme] = useState(initialTheme);

    const handleChange = ({ target }) => setTheme(target.value);
    const handleSubmit = async () => {
        await onSave(theme);
        rest.onClose();
    };

    return (
        <FormModal
            submit={<PrimaryButton type="submit">{c('Action').t`Save`}</PrimaryButton>}
            onSubmit={handleSubmit}
            title={c('Title').t`Custom mode`}
            {...rest}
        >
            <Alert type="warning">{c('Warning')
                .t`Custom modes from third parties can potentially betray your privacy. Only use modes from trusted sources.`}</Alert>
            <Label className="bl mb0-5" htmlFor="themeTextarea">{c('Label').t`CSS code`}</Label>
            <TextArea
                className="mb1"
                id="themeTextarea"
                value={theme}
                placeholder={c('Action').t`Insert CSS code here`}
                onChange={handleChange}
            />
        </FormModal>
    );
};

CustomThemeModal.propTypes = {
    onSave: PropTypes.func.isRequired,
    theme: PropTypes.string
};

export default CustomThemeModal;
{'fraction_non_alphanumeric': 0.1400617919670443, 'fraction_numerical': 0.0027463096464126332, 'mean_word_length': 2.4242068155111633, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5709727', 'n_tokens_mistral': 793, 'n_tokens_neox': 785, 'n_words': 185}