Page MenuHomePhabricator
Files F2900670

D10855.id36224.diff
No OneTemporary
Actions

D10855.id36224.diff
View Options

diff --git a/web/settings/danger-zone-panel.react.js b/web/settings/danger-zone-panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/danger-zone-panel.react.js
@@ -0,0 +1,22 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './danger-zone.css';
+import DangerZone from './danger-zone.react.js';
+import PanelHeader from '../components/panel-header.react.js';
+import Panel, { type PanelData } from '../components/panel.react.js';
+
+const panelData: $ReadOnlyArray<PanelData> = [
+ {
+ header: <PanelHeader headerLabel="Danger zone" />,
+ body: <DangerZone />,
+ classNameOveride: css.container,
+ },
+];
+
+function DangerZonePanel(): React.Node {
+ return <Panel panelItems={panelData} />;
+}
+
+export default DangerZonePanel;
diff --git a/web/settings/danger-zone.css b/web/settings/danger-zone.css
--- a/web/settings/danger-zone.css
+++ b/web/settings/danger-zone.css
@@ -1,33 +1,24 @@
.container {
flex: 1;
- background-color: var(--frame-background-primary-default);
}
.contentContainer {
- padding: 40px;
- width: 343px;
-}
-
-.header {
- color: var(--text-background-primary-default);
- font-weight: var(--semi-bold);
- line-height: var(--line-height-display);
- padding-bottom: 40px;
+ padding: 16px;
}
.subheading {
- color: var(--text-background-secondary-default);
- font-size: var(--xl-font-20);
+ color: var(--text-background-primary-default);
+ font-size: var(--m-font-16);
font-weight: var(--semi-bold);
line-height: var(--line-height-display);
- padding-bottom: 40px;
+ margin-bottom: 16px;
}
.button {
- width: 100%;
+ width: 192px;
}
.explanation {
- padding-top: 8px;
+ margin-top: 16px;
color: var(--text-background-tertiary-default);
}
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -16,22 +16,19 @@
);
return (
- <div className={css.container}>
- <div className={css.contentContainer}>
- <h4 className={css.header}>Danger Zone</h4>
- <h5 className={css.subheading}>Delete Account</h5>
- <Button
- onClick={onDeleteAccountClick}
- variant="filled"
- buttonColor={buttonThemes.danger}
- className={css.button}
- >
- Delete Account
- </Button>
- <p className={css.explanation}>
- Your account will be permanently deleted. There is no way to reverse
- this.
- </p>
+ <div className={css.contentContainer}>
+ <h5 className={css.subheading}>Delete account</h5>
+ <Button
+ onClick={onDeleteAccountClick}
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ className={css.button}
+ >
+ Delete account
+ </Button>
+ <div className={css.explanation}>
+ <p>Your account will be permanently deleted.</p>
+ <p>There is no way to reverse this.</p>
</div>
</div>
);

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 6, 11:12 AM (20 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2249128
Default Alt Text
D10855.id36224.diff (2 KB)

Event Timeline