Differential D6346 Diff 21202 web/settings/danger-zone.react.js

Changeset View

Standalone View

web/settings/danger-zone.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	import { useModalContext } from 'lib/components/modal-provider.react';			import { useModalContext } from 'lib/components/modal-provider.react';

	import Button, { buttonThemes } from '../components/button.react';			import Button, { buttonThemes } from '../components/button.react';
				import SettingsSwitcher from '../sidebar/settings-switcher.react';
	import AccountDeleteModal from './account-delete-modal.react';			import AccountDeleteModal from './account-delete-modal.react';
	import css from './danger-zone.css';			import css from './danger-zone.css';

	function DangerZone(): React.Node {			function DangerZone(): React.Node {
	const { pushModal } = useModalContext();			const { pushModal } = useModalContext();
	const onDeleteAccountClick = React.useCallback(			const onDeleteAccountClick = React.useCallback(
	() => pushModal(<AccountDeleteModal />),			() => pushModal(<AccountDeleteModal />),
	[pushModal],			[pushModal],
	);			);

	return (			return (
				<div className={css.outer}>
				<div className={css.switcher}>
				<SettingsSwitcher />
				</div>
	<div className={css.container}>			<div className={css.container}>
	<h4 className={css.header}>Danger Zone</h4>			<h4 className={css.header}>Danger Zone</h4>
	<h5 className={css.subheading}>Delete Account</h5>			<h5 className={css.subheading}>Delete Account</h5>
	<Button			<Button
	onClick={onDeleteAccountClick}			onClick={onDeleteAccountClick}
	variant="filled"			variant="filled"
	buttonColor={buttonThemes.danger}			buttonColor={buttonThemes.danger}
	className={css.button}			className={css.button}
	>			>
	Delete Account			Delete Account
	</Button>			</Button>
	<p className={css.explanation}>			<p className={css.explanation}>
	Your account will be permanently deleted. There is no way to reverse			Your account will be permanently deleted. There is no way to reverse
	this.			this.
	</p>			</p>
	</div>			</div>
				</div>
	);			);
	}			}

	export default DangerZone;			export default DangerZone;