<commit_before>import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { c } from 'ttag';
import {
    CircularProgress,
    Dropdown,
    Icon,
    Loader,
    generateUID,
    useUser,
    usePopperAnchor,
    useSubscription
} from 'react-components';
import humanSize from 'proton-shared/lib/helpers/humanSize';
import { hasVisionary, hasLifetime } from 'proton-shared/lib/helpers/subscription';

import { classnames } from '../../helpers/component';

const StorageSpaceStatus = ({ upgradeButton }) => {
    const [{ MaxSpace, UsedSpace }] = useUser();
    const [subscription, loadingSubscription] = useSubscription();
    const [uid] = useState(generateUID('dropdown'));
    const { anchorRef, isOpen, toggle, close } = usePopperAnchor();
    const canUpgradeStorage = !hasVisionary(subscription) && !hasLifetime(subscription);

    // round with 0.01 precision
    const usedPercent = Math.round((UsedSpace / MaxSpace) * 10000) / 100;
    const maxSpaceFormatted = humanSize(MaxSpace);
    const usedSpaceFormatted = humanSize(UsedSpace);
    const color =
        usedPercent < 60
            ? 'circle-bar--global-success'
            : usedPercent < 80
            ? 'circle-bar--global-attention'
            : 'circle-bar--global-warning';

    return (
        <>
            <button type="button" aria-describedby={uid} onClick={toggle} ref={anchorRef}>
                <CircularProgress progress={usedPercent} className={color}>
                    <g className="circle-chart__info">
                        <rect x="17" y="14" width="1.55" height="9.1" className="circle-chart__percent fill-white" />
                        <rect x="17" y="11" width="1.55" height="1.53" className="circle-chart__percent fill-white" />
                    </g>
                </CircularProgress>
                <span className="smallest mt0 mb0-5 mlauto mrauto lh100 circle-chart-info opacity-40 bl">
                    {usedSpaceFormatted}
                </span>
            </button>

            <Dropdown
                id={uid}
                isOpen={isOpen}
                anchorRef={anchorRef}
                onClose={close}
                originalPlacement="right-bottom"
                size="auto"
            >
                <div className="dropDown-content">
                    <div className="absolute top-right mt0-5 mr0-5">
                        <button className="flex flex-items-center">
                            <Icon name="close" />
                        </button>
                    </div>
                    <div className="flex p1">
                        <div className="pr1 flex flex-items-center">
                            <div className="relative">
                                <CircularProgress
                                    progress={usedPercent}
                                    size={100}
                                    className={classnames(['circle-chart__background--bigger', color])}
                                />
                                <span className="centered-absolute">{usedPercent}%</span>
                            </div>
                        </div>
                        <div className="w150p">
                            <b className="flex">{c('Title').t`Storage`}</b>
                            <small>{c('Info').jt`${usedSpaceFormatted} of ${maxSpaceFormatted} used`}</small>
                            <div className="mb1">
                                <span className="opacity-50 small">
                                    {c('Info').t`Your storage space is shared across all Proton products.`}
                                </span>
                            </div>
                            {loadingSubscription ? <Loader /> : canUpgradeStorage ? upgradeButton : null}
                        </div>
                    </div>
                </div>
            </Dropdown>
        </>
    );<commit_msg>Fix - storage popover margins<commit_after>import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { c } from 'ttag';
import {
    CircularProgress,
    Dropdown,
    Icon,
    Loader,
    generateUID,
    useUser,
    usePopperAnchor,
    useSubscription
} from 'react-components';
import humanSize from 'proton-shared/lib/helpers/humanSize';
import { hasVisionary, hasLifetime } from 'proton-shared/lib/helpers/subscription';

import { classnames } from '../../helpers/component';

const StorageSpaceStatus = ({ upgradeButton }) => {
    const [{ MaxSpace, UsedSpace }] = useUser();
    const [subscription, loadingSubscription] = useSubscription();
    const [uid] = useState(generateUID('dropdown'));
    const { anchorRef, isOpen, toggle, close } = usePopperAnchor();
    const canUpgradeStorage = !hasVisionary(subscription) && !hasLifetime(subscription);

    // round with 0.01 precision
    const usedPercent = Math.round((UsedSpace / MaxSpace) * 10000) / 100;
    const maxSpaceFormatted = humanSize(MaxSpace);
    const usedSpaceFormatted = humanSize(UsedSpace);
    const color =
        usedPercent < 60
            ? 'circle-bar--global-success'
            : usedPercent < 80
            ? 'circle-bar--global-attention'
            : 'circle-bar--global-warning';

    return (
        <>
            <button type="button" aria-describedby={uid} onClick={toggle} ref={anchorRef}>
                <CircularProgress progress={usedPercent} className={color}>
                    <g className="circle-chart__info">
                        <rect x="17" y="14" width="1.55" height="9.1" className="circle-chart__percent fill-white" />
                        <rect x="17" y="11" width="1.55" height="1.53" className="circle-chart__percent fill-white" />
                    </g>
                </CircularProgress>
                <span className="smallest mt0 mb0-5 mlauto mrauto lh100 circle-chart-info opacity-40 bl">
                    {usedSpaceFormatted}
                </span>
            </button>

            <Dropdown
                id={uid}
                isOpen={isOpen}
                anchorRef={anchorRef}
                onClose={close}
                originalPlacement="right-bottom"
                size="auto"
            >
                <div className="dropDown-content">
                    <div className="absolute top-right mt0-5r mr0-5r">
                        <button type="button" className="flex flex-items-center" title={c('Action').t`Close`}>
                            <Icon name="close" />
                            <span className="sr-only">{c('Action').t`Close`}</span>
                        </button>
                    </div>
                    <div className="flex p1">
                        <div className="pr1 flex flex-items-center">
                            <div className="relative">
                                <CircularProgress
                                    progress={usedPercent}
                                    size={100}
                                    className={classnames(['circle-chart__background--bigger', color])}
                                />
                                <span className="centered-absolute">{usedPercent}%</span>
                            </div>
                        </div>
                        <div className="w150p">
                            <b className="flex">{c('Title').t`Storage`}</b>
                            <small>{c('Info').jt`${usedSpaceFormatted} of ${maxSpaceFormatted} used`}</small>
                            <div className="mb1">
                                <span className="opacity-50 small">
                                    {c('Info').t`Your storage space is shared across all Proton products.`}
                                </span>
                            </div>
                            {loadingSubscription ? <Loader /> : canUpgradeStorage ? upgradeButton : null}
                        </div>
                    </div>
                </div>
            </Dropdown>
        </>
    );
{'fraction_non_alphanumeric': 0.11942892613283675, 'fraction_numerical': 0.01415270018621974, 'mean_word_length': 1.471165644171779, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 89, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '415540', 'n_tokens_mistral': 2079, 'n_tokens_neox': 1957, 'n_words': 403}