From 33f65c3ac4bf05e564b7a9f758aeecf4d960a658 Mon Sep 17 00:00:00 2001
From: Adam Spooner <adam@keyba.se>
Date: Thu, 26 Sep 2019 14:37:31 -0400
Subject: [PATCH] Update delete modal. (#19697)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* WIP

* WIP

* WIP

* Update text.

* Remove from mobile, for now.

* Update storyshots.

* 🔥

* Review feedback.
---
 .../common-adapters/confirm-modal/index.tsx   |   3 +-
 shared/constants/settings.tsx                 |   2 -
 shared/settings/delete-confirm/container.tsx  |  17 +-
 shared/settings/delete-confirm/index.d.ts     |  11 -
 .../settings/delete-confirm/index.desktop.tsx |  64 --
 .../settings/delete-confirm/index.native.tsx  |   5 -
 .../settings/delete-confirm/index.stories.tsx |   2 -
 shared/settings/delete-confirm/index.tsx      | 114 +++
 shared/settings/delete/container.tsx          |  11 -
 shared/settings/delete/index.d.ts             |   7 -
 shared/settings/delete/index.desktop.tsx      |  34 -
 shared/settings/delete/index.native.tsx       |   5 -
 shared/settings/delete/index.stories.tsx      |   9 -
 shared/settings/index.stories.tsx             |   2 -
 shared/settings/routes.desktop.tsx            |   4 +-
 shared/settings/routes.native.tsx             |   4 +-
 .../__snapshots__/Storyshots.test.js.snap     | 728 +++++++++++-------
 17 files changed, 581 insertions(+), 441 deletions(-)
 delete mode 100644 shared/settings/delete-confirm/index.d.ts
 delete mode 100644 shared/settings/delete-confirm/index.desktop.tsx
 delete mode 100644 shared/settings/delete-confirm/index.native.tsx
 create mode 100644 shared/settings/delete-confirm/index.tsx
 delete mode 100644 shared/settings/delete/container.tsx
 delete mode 100644 shared/settings/delete/index.d.ts
 delete mode 100644 shared/settings/delete/index.desktop.tsx
 delete mode 100644 shared/settings/delete/index.native.tsx
 delete mode 100644 shared/settings/delete/index.stories.tsx

diff --git a/shared/common-adapters/confirm-modal/index.tsx b/shared/common-adapters/confirm-modal/index.tsx
index 2747c51bc3b7..a6fb1a82cdc8 100644
--- a/shared/common-adapters/confirm-modal/index.tsx
+++ b/shared/common-adapters/confirm-modal/index.tsx
@@ -20,6 +20,7 @@ export type Props = {
   iconColor?: Styles.Color
   onCancel?: () => void
   onConfirm?: () => void
+  onConfirmDeactivated?: boolean
   prompt: React.ReactNode
   waitingKey?: string
 }
@@ -64,7 +65,7 @@ class ConfirmModal extends React.PureComponent<Props> {
               )}
               <WaitingButton
                 key="confirm"
-                disabled={!this.props.onConfirm}
+                disabled={this.props.onConfirmDeactivated || !this.props.onConfirm}
                 type="Danger"
                 label={this.props.confirmText || 'Confirm'}
                 onClick={this.props.onConfirm}
diff --git a/shared/constants/settings.tsx b/shared/constants/settings.tsx
index aff33fa6c2f5..4a997aed534d 100644
--- a/shared/constants/settings.tsx
+++ b/shared/constants/settings.tsx
@@ -265,7 +265,6 @@ export const settingsWaitingKey = 'settings:generic'
 export const aboutTab = 'settingsTabs.aboutTab'
 export const advancedTab = 'settingsTabs.advancedTab'
 export const chatTab = 'settingsTabs.chatTab'
-export const deleteMeTab = 'settingsTabs.deleteMeTab'
 export const devicesTab = 'settingsTabs.devicesTab'
 export const feedbackTab = 'settingsTabs.feedbackTab'
 export const foldersTab = 'settingsTabs.foldersTab'
@@ -287,7 +286,6 @@ export type SettingsTab =
   | typeof invitationsTab
   | typeof notificationsTab
   | typeof advancedTab
-  | typeof deleteMeTab
   | typeof feedbackTab
   | typeof aboutTab
   | typeof devicesTab
diff --git a/shared/settings/delete-confirm/container.tsx b/shared/settings/delete-confirm/container.tsx
index 5a18b5f5e3cd..9b3735c89e71 100644
--- a/shared/settings/delete-confirm/container.tsx
+++ b/shared/settings/delete-confirm/container.tsx
@@ -1,21 +1,10 @@
-import * as Kb from '../../common-adapters'
 import * as SettingsGen from '../../actions/settings-gen'
-import DeleteConfirm, {Props} from '.'
-import React from 'react'
 import * as RouteTreeGen from '../../actions/route-tree-gen'
 import * as Container from '../../util/container'
+import DeleteConfirm from '.'
 
 type OwnProps = {}
 
-const DeleteConfirmContainer = (props: Props) => {
-  const enableDeleteLater = Kb.useTimeout(() => props.setAllowDeleteAccount(true), 2000)
-  React.useEffect(() => {
-    props.setAllowDeleteAccount(false)
-    enableDeleteLater()
-  }, [])
-  return <DeleteConfirm {...props} />
-}
-
 export default Container.connect(
   state => {
     if (!state.config.username) {
@@ -23,15 +12,13 @@ export default Container.connect(
     }
 
     return {
-      allowDeleteForever: state.settings.allowDeleteAccount,
       username: state.config.username,
     }
   },
   dispatch => ({
     onCancel: () => dispatch(RouteTreeGen.createNavigateUp()),
     onDeleteForever: () => dispatch(SettingsGen.createDeleteAccountForever()),
-    setAllowDeleteAccount: allow => dispatch(SettingsGen.createSetAllowDeleteAccount({allow})),
   }),
 
   (s, d, o: OwnProps) => ({...o, ...s, ...d})
-)(DeleteConfirmContainer)
+)(DeleteConfirm)
diff --git a/shared/settings/delete-confirm/index.d.ts b/shared/settings/delete-confirm/index.d.ts
deleted file mode 100644
index 3f35c78e9d17..000000000000
--- a/shared/settings/delete-confirm/index.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from 'react'
-
-export type Props = {
-  username: string
-  allowDeleteForever: boolean
-  setAllowDeleteAccount: (allow: boolean) => void
-  onCancel: () => void
-  onDeleteForever: () => void
-}
-
-export default class DeleteConfirm extends Component<Props> {}
diff --git a/shared/settings/delete-confirm/index.desktop.tsx b/shared/settings/delete-confirm/index.desktop.tsx
deleted file mode 100644
index b056de397477..000000000000
--- a/shared/settings/delete-confirm/index.desktop.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react'
-import * as Styles from '../../styles'
-import {Box, Button, Icon, Text, Avatar, ButtonBar} from '../../common-adapters'
-
-import {Props} from './index'
-
-function DeleteConfirm(props: Props) {
-  return (
-    <Box
-      style={{
-        ...Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-        padding: Styles.globalMargins.medium,
-      }}
-    >
-      <Avatar size={48} username={props.username}>
-        <Icon type="iconfont-remove" style={styles.icon} color={Styles.globalColors.red} />
-      </Avatar>
-      <Text
-        type="BodySemibold"
-        style={{
-          ...Styles.globalStyles.italic,
-          color: Styles.globalColors.redDark,
-          textDecorationLine: 'line-through',
-        }}
-      >
-        {props.username}
-      </Text>
-      <Text center={true} type="Header" style={{marginTop: Styles.globalMargins.medium, width: 320}}>
-        Are you sure you want to permanently delete your account?
-      </Text>
-      <ButtonBar>
-        <Button type="Dim" label="Cancel" onClick={props.onCancel} />
-        <Button
-          disabled={!props.allowDeleteForever}
-          type="Danger"
-          label="Yes, permanently delete it"
-          onClick={props.onDeleteForever}
-        />
-      </ButtonBar>
-    </Box>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      icon: {
-        backgroundColor: Styles.globalColors.white,
-        borderColor: Styles.globalColors.white,
-        borderRadius: 16,
-        borderStyle: 'solid',
-        borderWidth: 2,
-        bottom: 0,
-        padding: '1px 0px 0px 1px',
-        position: 'absolute',
-        right: -4,
-      },
-    } as const)
-)
-
-export default DeleteConfirm
diff --git a/shared/settings/delete-confirm/index.native.tsx b/shared/settings/delete-confirm/index.native.tsx
deleted file mode 100644
index 0c1cf229eab6..000000000000
--- a/shared/settings/delete-confirm/index.native.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function DeleteConfirm() {
-  return null
-}
-
-export default DeleteConfirm
diff --git a/shared/settings/delete-confirm/index.stories.tsx b/shared/settings/delete-confirm/index.stories.tsx
index 51172832b958..c5b6c7584f55 100644
--- a/shared/settings/delete-confirm/index.stories.tsx
+++ b/shared/settings/delete-confirm/index.stories.tsx
@@ -8,8 +8,6 @@ const load = () => {
       onDeleteForever={Sb.action('onDeleteForever')}
       onCancel={Sb.action('onCancel')}
       username="chris"
-      allowDeleteForever={true}
-      setAllowDeleteAccount={Sb.action('setAllowDeleteAccount')}
     />
   ))
 }
diff --git a/shared/settings/delete-confirm/index.tsx b/shared/settings/delete-confirm/index.tsx
new file mode 100644
index 000000000000..4ad73300e0dc
--- /dev/null
+++ b/shared/settings/delete-confirm/index.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react'
+import * as Styles from '../../styles'
+import * as Kb from '../../common-adapters'
+
+type CheckboxesProps = {
+  checkData: boolean
+  checkTeams: boolean
+  checkUsername: boolean
+  onCheckData: (checked: boolean) => void
+  onCheckTeams: (checked: boolean) => void
+  onCheckUsername: (checked: boolean) => void
+}
+
+const Checkboxes = (props: CheckboxesProps) => (
+  <Kb.Box2 direction="vertical">
+    <Kb.Checkbox
+      checked={props.checkUsername}
+      label="No one will be able to use this username ever, including yourself."
+      onCheck={checked => props.onCheckUsername(checked)}
+    />
+    <Kb.Checkbox
+      checked={props.checkData}
+      label="You will lose your personal chats, files and git data."
+      onCheck={checked => props.onCheckData(checked)}
+    />
+    <Kb.Checkbox
+      checked={props.checkTeams}
+      label="You will be removed from teams. If you were the last owner or admin of a team, it'll be orphaned and unrecoverable."
+      onCheck={checked => props.onCheckTeams(checked)}
+    />
+  </Kb.Box2>
+)
+
+export type Props = {
+  username: string
+  onCancel: () => void
+  onDeleteForever: () => void
+}
+
+type State = {
+  checkData: boolean
+  checkTeams: boolean
+  checkUsername: boolean
+}
+
+class DeleteConfirm extends React.Component<Props, State> {
+  state = {
+    checkData: false,
+    checkTeams: false,
+    checkUsername: false,
+  }
+
+  render() {
+    return (
+      <Kb.ConfirmModal
+        confirmText="Yes, permanently delete it"
+        content={
+          <Checkboxes
+            checkData={this.state.checkData}
+            checkTeams={this.state.checkTeams}
+            checkUsername={this.state.checkUsername}
+            onCheckData={checkData => this.setState({checkData})}
+            onCheckTeams={checkTeams => this.setState({checkTeams})}
+            onCheckUsername={checkUsername => this.setState({checkUsername})}
+          />
+        }
+        description="This cannot be undone. By deleting this account, you agree that:"
+        header={
+          <>
+            <Kb.Avatar size={Styles.isMobile ? 64 : 48} username={this.props.username} style={styles.avatar}>
+              <Kb.Box2 direction="horizontal" style={styles.iconContainer}>
+                <Kb.Icon color={Styles.globalColors.red} type="iconfont-remove" />
+              </Kb.Box2>
+            </Kb.Avatar>
+            <Kb.Text type="BodySemibold" style={styles.strike}>
+              {this.props.username}
+            </Kb.Text>
+          </>
+        }
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onDeleteForever}
+        onConfirmDeactivated={!this.state.checkUsername || !this.state.checkData || !this.state.checkTeams}
+        prompt="Are you sure you want to permanently delete your account?"
+      />
+    )
+  }
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  avatar: Styles.platformStyles({
+    isMobile: {
+      marginBottom: Styles.globalMargins.small,
+      marginTop: Styles.globalMargins.small,
+    },
+  }),
+  iconContainer: {
+    ...Styles.padding(1, 0, 0, 1),
+    backgroundColor: Styles.globalColors.white,
+    borderColor: Styles.globalColors.white,
+    borderRadius: 100,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    bottom: 0,
+    position: 'absolute',
+    right: -4,
+  },
+  strike: {
+    ...Styles.globalStyles.italic,
+    color: Styles.globalColors.redDark,
+    textDecorationLine: 'line-through',
+  },
+}))
+
+export default DeleteConfirm
diff --git a/shared/settings/delete/container.tsx b/shared/settings/delete/container.tsx
deleted file mode 100644
index bff162d3c6eb..000000000000
--- a/shared/settings/delete/container.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as RouteTreeGen from '../../actions/route-tree-gen'
-import Delete from '.'
-import * as Container from '../../util/container'
-
-type OwnProps = {}
-
-export default Container.connect(
-  () => ({}),
-  dispatch => ({onDelete: () => dispatch(RouteTreeGen.createNavigateAppend({path: ['deleteConfirm']}))}),
-  (_, d, __: OwnProps) => d
-)(Delete)
diff --git a/shared/settings/delete/index.d.ts b/shared/settings/delete/index.d.ts
deleted file mode 100644
index bf89556fe69c..000000000000
--- a/shared/settings/delete/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {Component} from 'react'
-
-export type Props = {
-  onDelete: () => void
-}
-
-export default class DeleteMe extends Component<Props> {}
diff --git a/shared/settings/delete/index.desktop.tsx b/shared/settings/delete/index.desktop.tsx
deleted file mode 100644
index 43543d42d9ad..000000000000
--- a/shared/settings/delete/index.desktop.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react'
-import {globalStyles, globalMargins} from '../../styles'
-import {Box, Button, Text} from '../../common-adapters'
-
-import {Props} from './index'
-
-function DeleteMe(props: Props) {
-  return (
-    <Box
-      style={{
-        ...globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      }}
-    >
-      <Text type="Header" style={{marginTop: globalMargins.medium}}>
-        So this is goodbye?
-      </Text>
-      <Text center={true} type="Body" style={{maxWidth: 440, padding: globalMargins.small}}>
-        If you delete your account, you can't get it back, and you can't create another account with the same
-        name.
-      </Text>
-      <Button
-        style={{marginTop: globalMargins.small}}
-        type="Danger"
-        label="Delete my account forever"
-        onClick={props.onDelete}
-      />
-    </Box>
-  )
-}
-
-export default DeleteMe
diff --git a/shared/settings/delete/index.native.tsx b/shared/settings/delete/index.native.tsx
deleted file mode 100644
index 39538bf6c134..000000000000
--- a/shared/settings/delete/index.native.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function DeleteMe() {
-  return null
-}
-
-export default DeleteMe
diff --git a/shared/settings/delete/index.stories.tsx b/shared/settings/delete/index.stories.tsx
deleted file mode 100644
index ff5616903ebd..000000000000
--- a/shared/settings/delete/index.stories.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react'
-import Delete from '.'
-import {action, storiesOf} from '../../stories/storybook'
-
-const load = () => {
-  storiesOf('Settings', module).add('Delete', () => <Delete onDelete={action('onDelete')} />)
-}
-
-export default load
diff --git a/shared/settings/index.stories.tsx b/shared/settings/index.stories.tsx
index 72e664b7a4e8..2631bd09f951 100644
--- a/shared/settings/index.stories.tsx
+++ b/shared/settings/index.stories.tsx
@@ -1,6 +1,5 @@
 import account from './account/index.stories'
 import deleteConfirm from './delete-confirm/index.stories'
-import deleteMe from './delete/index.stories'
 import email from './email/index.stories'
 import inviteGenerated from './invite-generated/index.stories'
 import invites from './invites/index.stories'
@@ -16,7 +15,6 @@ const load = () => {
     account,
     email,
     password,
-    deleteMe,
     deleteConfirm,
     notifications,
     inviteGenerated,
diff --git a/shared/settings/routes.desktop.tsx b/shared/settings/routes.desktop.tsx
index 7b96e27bd4a7..2782d6b6c937 100644
--- a/shared/settings/routes.desktop.tsx
+++ b/shared/settings/routes.desktop.tsx
@@ -6,7 +6,6 @@ import * as Shim from '../router-v2/shim'
 import FsTab from './files/container'
 import AdvancedTab from './advanced/container'
 import ChatTab from './chat/container'
-import DeleteMeTab from './delete/container'
 import InvitationsTab from './invites/container'
 import AccountTab from './account/container'
 import FeedbackTab from './feedback/container'
@@ -25,7 +24,6 @@ const settingsSubRoutes = {
   [Constants.fsTab]: {getScreen: (): typeof FsTab => require('./files/container').default},
   [Constants.advancedTab]: {getScreen: (): typeof AdvancedTab => require('./advanced/container').default},
   [Constants.chatTab]: {getScreen: (): typeof ChatTab => require('./chat/container').default},
-  [Constants.deleteMeTab]: {getScreen: (): typeof DeleteMeTab => require('./delete/container').default},
   // TODO connect broken
   [Constants.invitationsTab]: {
     getScreen: (): typeof InvitationsTab => require('./invites/container').default,
@@ -36,7 +34,6 @@ const settingsSubRoutes = {
     getScreen: (): typeof NotificationsTab => require('./notifications/container').default,
   },
   dbNukeConfirm: {getScreen: (): typeof DbNukeConfirm => require('./db-nuke-confirm/container').default},
-  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   inviteSent: {getScreen: (): typeof InviteSent => require('./invite-generated/container').default},
   removeDevice: {getScreen: (): typeof RemoveDevice => require('../devices/device-revoke/container').default},
 }
@@ -81,6 +78,7 @@ export const newModalRoutes = {
   [Constants.logOutTab]: {getScreen: (): typeof LogOutTab => require('./logout/container').default},
   // TODO connect broken
   changePassword: {getScreen: (): typeof ChangePassword => require('./password/container').default},
+  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   disableCertPinningModal: {
     getScreen: (): typeof DisableCertPinningModal =>
       require('./disable-cert-pinning-modal/container').default,
diff --git a/shared/settings/routes.native.tsx b/shared/settings/routes.native.tsx
index 90571c4a4bc0..39785be4d75c 100644
--- a/shared/settings/routes.native.tsx
+++ b/shared/settings/routes.native.tsx
@@ -4,7 +4,6 @@ import AdvancedTab from './advanced/container'
 import ChatTab from './chat/container'
 import FsTab from './files/container'
 import WalletsTab from '../wallets/wallet/container'
-import DeleteMeTab from './delete/container'
 import FeedbackTab from './feedback/container'
 import InvitationsTab from './invites/container'
 import AccountTab from './account/container'
@@ -33,7 +32,6 @@ export const newRoutes = {
   [Constants.walletsTab]: {
     getScreen: (): typeof WalletsTab => require('../wallets/wallet/container').default,
   },
-  [Constants.deleteMeTab]: {getScreen: (): typeof DeleteMeTab => require('./delete/container').default},
   [Constants.feedbackTab]: {getScreen: (): typeof FeedbackTab => require('./feedback/container').default},
   // TODO connect broken
   [Constants.invitationsTab]: {
@@ -49,7 +47,6 @@ export const newRoutes = {
   addEmail: {getScreen: (): typeof Email => require('./account/add-modals').Email},
   addPhone: {getScreen: (): typeof Phone => require('./account/add-modals').Phone},
   dbNukeConfirm: {getScreen: (): typeof DbNukeConfirm => require('./db-nuke-confirm/container').default},
-  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   inviteSent: {getScreen: (): typeof InviteSent => require('./invite-generated/container').default},
   [Constants.contactsTab]: {
     getScreen: (): typeof ManageContactsTab => require('./manage-contacts.native').default,
@@ -64,6 +61,7 @@ export const newRoutes = {
 export const newModalRoutes = {
   [Constants.logOutTab]: {getScreen: (): typeof LogOutTab => require('./logout/container').default},
   [Constants.passwordTab]: {getScreen: (): typeof PasswordTab => require('./password/container').default},
+  deleteConfirm: {getScreen: (): typeof DeleteConfirm => require('./delete-confirm/container').default},
   disableCertPinningModal: {
     getScreen: (): typeof DisableCertPinningModal =>
       require('./disable-cert-pinning-modal/container').default,
diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index 4ae173073d47..6649b6e6a64b 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -342950,7 +342950,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Settings Delete 1`] = `
+exports[`Storyshots Settings DeleteConfirm 1`] = `
 Array [
   <div
     style={
@@ -342961,337 +342961,531 @@ Array [
     }
   >
     <div
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
       style={
         Object {
           "alignItems": "center",
+          "backgroundColor": "rgba(0, 0, 0, 0.05)",
+          "bottom": 0,
           "display": "flex",
-          "flex": 1,
           "flexDirection": "column",
           "justifyContent": "center",
+          "left": 0,
+          "paddingBottom": 16,
+          "paddingLeft": 40,
+          "paddingRight": 40,
+          "paddingTop": 40,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         }
       }
     >
-      <span
-        className="text_Header"
-        style={
-          Object {
-            "marginTop": 24,
-          }
-        }
-      >
-        So this is goodbye?
-      </span>
-      <span
-        className="text_Body text_center"
-        style={
-          Object {
-            "maxWidth": 440,
-            "padding": 16,
-          }
-        }
-      >
-        If you delete your account, you can't get it back, and you can't create another account with the same name.
-      </span>
       <div
-        className=""
-        onClick={[Function]}
         onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
         onMouseUp={[Function]}
         style={
           Object {
-            "alignItems": "center",
-            "backgroundColor": "#ff4d61",
-            "borderRadius": 4,
-            "cursor": "pointer",
-            "display": "inline-block",
-            "flexDirection": "column",
-            "height": 32,
-            "justifyContent": "center",
-            "lineHeight": "inherit",
-            "marginTop": 16,
-            "minWidth": "100px",
-            "paddingLeft": 24,
-            "paddingRight": 24,
+            "display": "flex",
+            "flexDirection": "row",
+            "maxHeight": "100%",
+            "maxWidth": "100%",
             "position": "relative",
-            "textAlign": "left",
-            "transform": "none",
-            "transition": "none",
-          }
-        }
-      >
-        <div
-          className="button__underlay button__underlay_black10"
-        />
-        <div
-          style={
-            Object {
-              "alignItems": "center",
-              "display": "flex",
-              "flexDirection": "row",
-              "height": "100%",
-              "justifyContent": "center",
-              "pointerEvents": "none",
-              "position": "relative",
-            }
           }
-        >
-          <div
-            className="box2_vertical box2_centered box2_centeredChildren"
-          >
-            <span
-              className="text_BodySemibold"
-              style={
-                Object {
-                  "color": "#FFFFFF",
-                  "textAlign": "center",
-                  "whiteSpace": "pre",
-                }
-              }
-            >
-              Delete my account forever
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      id="modal-root"
-    />
-  </div>,
-  <div
-    pointerEvents="box-none"
-    style={
-      Object {
-        "position": "absolute",
-      }
-    }
-  />,
-]
-`;
-
-exports[`Storyshots Settings DeleteConfirm 1`] = `
-Array [
-  <div
-    style={
-      Object {
-        "height": "100%",
-        "width": "100%",
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "padding": 24,
         }
-      }
-    >
-      <div
-        className="avatar avatar-user-size-48"
       >
-        <div
-          className="avatar-background avatar-user-size-48"
-        />
-        <div
-          className="avatar-user-image avatar-user-size-48"
-          style={
-            Object {
-              "backgroundImage": "-webkit-image-set(url('icons/icon-placeholder-avatar-192.png') 1x, url('icons/icon-placeholder-avatar-192.png') 2x, url('icons/icon-placeholder-avatar-192.png') 3x)",
-              "opacity": undefined,
-            }
-          }
-        />
         <div>
           <span
-            className="icon color_red icon-gen-iconfont-remove"
+            className="icon color_white_90_on_white hover_color_white_40OrBlack_60 icon-gen-iconfont-close"
+            onClick={[Function]}
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "#FFFFFF",
-                "borderRadius": 16,
-                "borderStyle": "solid",
-                "borderWidth": 2,
-                "bottom": 0,
-                "padding": "1px 0px 0px 1px",
+                "cursor": "pointer",
+                "padding": 8,
                 "position": "absolute",
-                "right": -4,
+                "right": -32,
               }
             }
           />
         </div>
-      </div>
-      <span
-        className="text_BodySemibold"
-        style={
-          Object {
-            "color": "#eb253b",
-            "fontStyle": "italic",
-            "textDecorationLine": "line-through",
-          }
-        }
-      >
-        chris
-      </span>
-      <span
-        className="text_Header text_center"
-        style={
-          Object {
-            "marginTop": 24,
-            "width": 320,
-          }
-        }
-      >
-        Are you sure you want to permanently delete your account?
-      </span>
-      <div
-        style={
-          Object {
-            "alignItems": "center",
-            "display": "flex",
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "minHeight": 64,
-            "width": "100%",
-          }
-        }
-      >
         <div
-          className=""
           onClick={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
           style={
             Object {
-              "alignItems": "center",
-              "backgroundColor": "#e6e6e6",
+              "backgroundColor": "#FFFFFF",
               "borderRadius": 4,
-              "cursor": "pointer",
-              "display": "inline-block",
+              "boxShadow": "0 2px 5px 0 rgba(0, 0, 0, 0.20)",
+              "display": "flex",
+              "flex": 1,
               "flexDirection": "column",
-              "height": 32,
-              "justifyContent": "center",
-              "lineHeight": "inherit",
-              "minWidth": "100px",
-              "paddingLeft": 24,
-              "paddingRight": 24,
+              "height": 400,
+              "maxWidth": "100%",
+              "overflow": "hidden",
               "position": "relative",
-              "textAlign": "left",
-              "transform": "none",
-              "transition": "none",
+              "width": 560,
             }
           }
         >
           <div
-            className="button__underlay button__underlay_black10"
-          />
-          <div
+            className=""
             style={
               Object {
-                "alignItems": "center",
                 "display": "flex",
-                "flexDirection": "row",
-                "height": "100%",
-                "justifyContent": "center",
-                "pointerEvents": "none",
+                "flex": 1,
+                "flexDirection": "column",
+                "overflow": "auto",
                 "position": "relative",
               }
             }
           >
             <div
-              className="box2_vertical box2_centered box2_centeredChildren"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "flexGrow": 1,
+                  "width": "100%",
+                }
+              }
             >
-              <span
-                className="text_BodySemibold"
+              <div
+                className="box2_vertical box2_fullWidth box2_centeredChildren box2_alignItems_center box2_no_shrink"
                 style={
                   Object {
-                    "color": "rgba(0, 0, 0, 0.85)",
-                    "textAlign": "center",
-                    "whiteSpace": "pre",
+                    "flex": 1,
+                    "paddingBottom": 0,
+                    "paddingLeft": 64,
+                    "paddingRight": 64,
+                    "paddingTop": 0,
                   }
                 }
               >
-                Cancel
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          style={
-            Object {
-              "flexShrink": 0,
-              "height": 8,
-              "width": 8,
-            }
-          }
-        />
-        <div
-          className=""
-          onClick={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-          style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ff4d61",
-              "borderRadius": 4,
-              "cursor": "pointer",
-              "display": "inline-block",
-              "flexDirection": "column",
-              "height": 32,
-              "justifyContent": "center",
-              "lineHeight": "inherit",
-              "minWidth": "100px",
-              "paddingLeft": 24,
-              "paddingRight": 24,
-              "position": "relative",
-              "textAlign": "left",
-              "transform": "none",
-              "transition": "none",
-            }
-          }
-        >
-          <div
-            className="button__underlay button__underlay_black10"
-          />
+                <div
+                  className="box2_vertical box2_centered box2_alignItems_center box2_no_shrink"
+                  style={
+                    Object {
+                      "marginBottom": 16,
+                      "marginTop": 16,
+                    }
+                  }
+                >
+                  <div
+                    className="avatar avatar-user-size-48"
+                    style={Object {}}
+                  >
+                    <div
+                      className="avatar-background avatar-user-size-48"
+                    />
+                    <div
+                      className="avatar-user-image avatar-user-size-48"
+                      style={
+                        Object {
+                          "backgroundImage": "-webkit-image-set(url('icons/icon-placeholder-avatar-192.png') 1x, url('icons/icon-placeholder-avatar-192.png') 2x, url('icons/icon-placeholder-avatar-192.png') 3x)",
+                          "opacity": undefined,
+                        }
+                      }
+                    />
+                    <div
+                      className="box2_horizontal box2_centered"
+                      style={
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "#FFFFFF",
+                          "borderRadius": 100,
+                          "borderStyle": "solid",
+                          "borderWidth": 2,
+                          "bottom": 0,
+                          "paddingBottom": 0,
+                          "paddingLeft": 1,
+                          "paddingRight": 0,
+                          "paddingTop": 1,
+                          "position": "absolute",
+                          "right": -4,
+                        }
+                      }
+                    >
+                      <div>
+                        <span
+                          className="icon color_red icon-gen-iconfont-remove"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <span
+                    className="text_BodySemibold"
+                    style={
+                      Object {
+                        "color": "#eb253b",
+                        "fontStyle": "italic",
+                        "textDecorationLine": "line-through",
+                      }
+                    }
+                  >
+                    chris
+                  </span>
+                </div>
+                <span
+                  className="text_HeaderBig text_center"
+                  style={
+                    Object {
+                      "WebkitBoxOrient": "vertical",
+                      "WebkitLineClamp": 2,
+                      "color": "rgba(0, 0, 0, 0.85)",
+                      "display": "-webkit-box",
+                      "margin": 16,
+                      "overflow": "hidden",
+                      "textOverflow": "ellipsis",
+                      "wordBreak": "break-word",
+                    }
+                  }
+                >
+                  Are you sure you want to permanently delete your account?
+                </span>
+                <span
+                  className="text_Body text_center"
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, 0.85)",
+                      "margin": 16,
+                    }
+                  }
+                >
+                  This cannot be undone. By deleting this account, you agree that:
+                </span>
+                <div
+                  className="box2_vertical box2_centered"
+                >
+                  <div
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "alignItems": "flex-start",
+                        "cursor": "pointer",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "paddingBottom": 2,
+                        "paddingTop": 2,
+                      }
+                    }
+                  >
+                    <div
+                      style={
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "rgba(0, 0, 0, 0.20)",
+                          "borderRadius": 2,
+                          "borderStyle": "solid",
+                          "borderWidth": 1,
+                          "display": "flex",
+                          "flexDirection": "column",
+                          "height": 13,
+                          "justifyContent": "center",
+                          "marginRight": 8,
+                          "marginTop": 2,
+                          "position": "relative",
+                          "transition": "background 0.1s ease-out",
+                          "width": 13,
+                        }
+                      }
+                    >
+                      <span
+                        className="icon color_white_90_on_white icon-gen-iconfont-check"
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "fontSize": 9,
+                            "opacity": 0,
+                            "transition": "opacity 0.1s ease-out",
+                          }
+                        }
+                      />
+                    </div>
+                    <span
+                      className="text_Body"
+                      style={
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.85)",
+                        }
+                      }
+                    >
+                      No one will be able to use this username ever, including yourself.
+                    </span>
+                  </div>
+                  <div
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "alignItems": "flex-start",
+                        "cursor": "pointer",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "paddingBottom": 2,
+                        "paddingTop": 2,
+                      }
+                    }
+                  >
+                    <div
+                      style={
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "rgba(0, 0, 0, 0.20)",
+                          "borderRadius": 2,
+                          "borderStyle": "solid",
+                          "borderWidth": 1,
+                          "display": "flex",
+                          "flexDirection": "column",
+                          "height": 13,
+                          "justifyContent": "center",
+                          "marginRight": 8,
+                          "marginTop": 2,
+                          "position": "relative",
+                          "transition": "background 0.1s ease-out",
+                          "width": 13,
+                        }
+                      }
+                    >
+                      <span
+                        className="icon color_white_90_on_white icon-gen-iconfont-check"
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "fontSize": 9,
+                            "opacity": 0,
+                            "transition": "opacity 0.1s ease-out",
+                          }
+                        }
+                      />
+                    </div>
+                    <span
+                      className="text_Body"
+                      style={
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.85)",
+                        }
+                      }
+                    >
+                      You will lose your personal chats, files and git data.
+                    </span>
+                  </div>
+                  <div
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "alignItems": "flex-start",
+                        "cursor": "pointer",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "paddingBottom": 2,
+                        "paddingTop": 2,
+                      }
+                    }
+                  >
+                    <div
+                      style={
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "rgba(0, 0, 0, 0.20)",
+                          "borderRadius": 2,
+                          "borderStyle": "solid",
+                          "borderWidth": 1,
+                          "display": "flex",
+                          "flexDirection": "column",
+                          "height": 13,
+                          "justifyContent": "center",
+                          "marginRight": 8,
+                          "marginTop": 2,
+                          "position": "relative",
+                          "transition": "background 0.1s ease-out",
+                          "width": 13,
+                        }
+                      }
+                    >
+                      <span
+                        className="icon color_white_90_on_white icon-gen-iconfont-check"
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "fontSize": 9,
+                            "opacity": 0,
+                            "transition": "opacity 0.1s ease-out",
+                          }
+                        }
+                      />
+                    </div>
+                    <span
+                      className="text_Body"
+                      style={
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.85)",
+                        }
+                      }
+                    >
+                      You will be removed from teams. If you were the last owner or admin of a team, it'll be orphaned and unrecoverable.
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
+            className="box2_vertical box2_fullWidth box2_centeredChildren"
             style={
               Object {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-                "height": "100%",
-                "justifyContent": "center",
-                "pointerEvents": "none",
-                "position": "relative",
+                "borderBottomLeftRadius": 4,
+                "borderBottomRightRadius": 4,
+                "minHeight": 56,
+                "overflow": "hidden",
+                "paddingBottom": 12,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "paddingTop": 12,
               }
             }
           >
             <div
-              className="box2_vertical box2_centered box2_centeredChildren"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "minHeight": undefined,
+                  "width": "100%",
+                }
+              }
             >
-              <span
-                className="text_BodySemibold"
+              <div
+                className=""
+                onClick={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
                 style={
                   Object {
-                    "color": "#FFFFFF",
-                    "textAlign": "center",
-                    "whiteSpace": "pre",
+                    "alignItems": "center",
+                    "backgroundColor": "#e6e6e6",
+                    "borderRadius": 4,
+                    "cursor": "pointer",
+                    "display": "inline-block",
+                    "flex": 1,
+                    "flexDirection": "column",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "lineHeight": "inherit",
+                    "minWidth": "100px",
+                    "paddingLeft": 24,
+                    "paddingRight": 24,
+                    "position": "relative",
+                    "textAlign": "left",
+                    "transform": "none",
+                    "transition": "none",
                   }
                 }
               >
-                Yes, permanently delete it
-              </span>
+                <div
+                  className="button__underlay button__underlay_black10"
+                />
+                <div
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flexDirection": "row",
+                      "height": "100%",
+                      "justifyContent": "center",
+                      "pointerEvents": "none",
+                      "position": "relative",
+                    }
+                  }
+                >
+                  <div
+                    className="box2_vertical box2_centered box2_centeredChildren"
+                  >
+                    <span
+                      className="text_BodySemibold"
+                      style={
+                        Object {
+                          "color": "rgba(0, 0, 0, 0.85)",
+                          "textAlign": "center",
+                          "whiteSpace": "pre",
+                        }
+                      }
+                    >
+                      Cancel
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 8,
+                    "width": 8,
+                  }
+                }
+              />
+              <div
+                className=""
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "#ff4d61",
+                    "borderRadius": 4,
+                    "display": "inline-block",
+                    "flex": 1,
+                    "flexDirection": "column",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "lineHeight": "inherit",
+                    "minWidth": "100px",
+                    "opacity": 0.3,
+                    "paddingLeft": 24,
+                    "paddingRight": 24,
+                    "position": "relative",
+                    "textAlign": "left",
+                    "transform": "none",
+                    "transition": "none",
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flexDirection": "row",
+                      "height": "100%",
+                      "justifyContent": "center",
+                      "pointerEvents": "none",
+                      "position": "relative",
+                    }
+                  }
+                >
+                  <div
+                    className="box2_vertical box2_centered box2_centeredChildren"
+                  >
+                    <span
+                      className="text_BodySemibold"
+                      style={
+                        Object {
+                          "color": "#FFFFFF",
+                          "textAlign": "center",
+                          "whiteSpace": "pre",
+                        }
+                      }
+                    >
+                      Yes, permanently delete it
+                    </span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>