<commit_before>import React from 'react';
import { c } from 'ttag';
import { getAppName } from 'proton-shared/lib/apps/helper';
import {
    Href,
    OnboardingContent,
    OnboardingModal,
    OnboardingStep,
    OnboardingStepRenderCallback,
} from 'react-components';
import { APPS } from 'proton-shared/lib/constants';
import { getLightOrDark } from 'proton-shared/lib/themes/helpers';

import onboardingWelcome from 'design-system/assets/img/onboarding/onboarding-protondrive.svg';
import onboardingWelcomeDark from 'design-system/assets/img/onboarding/onboarding-protondrive-dark.svg';

const DriveOnboardingModal = (props: any) => {
    const appName = getAppName(APPS.PROTONDRIVE);

    const learnMoreLink = (
        <Href url="https://protonmail.com/blog/protondrive-security/">{c('Onboarding ProtonDrive')
            .t`Learn about ProtonDrive security`}</Href>
    );

    return (
        <OnboardingModal {...props}>
            {({ onClose }: OnboardingStepRenderCallback) => (
                <OnboardingStep
                    title={c('Onboarding ProtonDrive Title').t`Welcome to ${appName} early access`}
                    submit={c('Onboarding ProtonDrive Action').t`Start using ${appName} beta`}
                    onSubmit={onClose}
                    close={null}
                >
                    <OnboardingContent
                        description={c('Onboarding ProtonDrive Info')
                            .t`Your support powers our mission to ensure privacy for all. As a way of saying thanks, you now have early access to our new encrypted cloud storage service.`}
                        img={<img src={getLightOrDark(onboardingWelcome, onboardingWelcomeDark)} alt={appName} />}
                        text={c('Onboarding ProtonDrive Info')
                            .jt`${appName} currently lets you upload and manage your files, secure your data with end-to-end encryption, and access your account from any device through your web browser. ${learnMoreLink}`}
                    />
                </OnboardingStep>
            )}
        </OnboardingModal>
    );
};

export default DriveOnboardingModal;<commit_msg>Update DriveOnboardingModal Layout<commit_after>import React from 'react';
import { c } from 'ttag';
import { getAppName } from 'proton-shared/lib/apps/helper';
import {
    Href,
    OnboardingContent,
    OnboardingModal,
    OnboardingStep,
    OnboardingStepRenderCallback,
} from 'react-components';
import { APPS } from 'proton-shared/lib/constants';
import { getLightOrDark } from 'proton-shared/lib/themes/helpers';

import onboardingWelcome from 'design-system/assets/img/onboarding/onboarding-protondrive.svg';
import onboardingWelcomeDark from 'design-system/assets/img/onboarding/onboarding-protondrive-dark.svg';

const DriveOnboardingModal = (props: any) => {
    const appName = getAppName(APPS.PROTONDRIVE);

    const learnMoreLink = (
        <Href url="https://protonmail.com/blog/protondrive-security/">{c('Onboarding ProtonDrive')
            .t`Learn about ProtonDrive security`}</Href>
    );

    return (
        <OnboardingModal {...props}>
            {({ onClose }: OnboardingStepRenderCallback) => (
                <OnboardingStep
                    title={c('Onboarding ProtonDrive Title').t`Welcome to ${appName} early access`}
                    submit={c('Onboarding ProtonDrive Action').t`Start using ${appName} beta`}
                    onSubmit={onClose}
                    close={null}
                >
                    <OnboardingContent
                        description={
                            <>
                                <div className="mb1">
                                    {c('Onboarding ProtonDrive Info')
                                        .t`Your support powers our mission to ensure privacy for all. As a way of saying thanks, you now have early access to our new encrypted cloud storage service.`}
                                </div>
                                <div>
                                    {c('Onboarding ProtonDrive Info')
                                        .jt`${appName} currently lets you upload and manage your files, secure your data with end-to-end encryption, and access your account from any device through your web browser. ${learnMoreLink}`}
                                </div>
                            </>
                        }
                        img={<img src={getLightOrDark(onboardingWelcome, onboardingWelcomeDark)} alt={appName} />}
                    />
                </OnboardingStep>
            )}
        </OnboardingModal>
    );
};

export default DriveOnboardingModal;
{'fraction_non_alphanumeric': 0.10049071901002773, 'fraction_numerical': 0.0002133560913164071, 'mean_word_length': 2.034304207119741, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '984096', 'n_tokens_mistral': 1284, 'n_tokens_neox': 1166, 'n_words': 295}