Merge pull request #2833 from omnivore-app/feat/web-delete-account-link

Add link to delete account page

packages/web/pages/settings/account.tsx

@@ -22,6 +22,7 @@ import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 const StyledLabel = styled('label', {
   fontWeight: 600,
   fontSize: '16px',
+  marginBottom: '5px',
 })
 
 export const FormInput = styled('input', {
@@ -236,13 +237,13 @@ export default function Account(): JSX.Element {
             distribution="start"
             alignment="start"
           >
+            <StyledLabel>Name</StyledLabel>
             <form
               onSubmit={(event) => {
                 handleUpdateName()
                 event.preventDefault()
               }}
             >
-              <StyledLabel>Name</StyledLabel>
               <FormInput
                 type={'text'}
                 value={name}
@@ -331,6 +332,7 @@ export default function Account(): JSX.Element {
               borderRadius: '5px',
             }}
           >
+            <StyledLabel>Email</StyledLabel>
             <form
               onSubmit={(event) => {
                 // Show a confirmation dialog if switching from social login
@@ -342,7 +344,6 @@ export default function Account(): JSX.Element {
                 event.preventDefault()
               }}
             >
-              <StyledLabel>Email</StyledLabel>
               <FormInput
                 type={'text'}
                 placeholder={'Email'}
@@ -396,6 +397,28 @@ export default function Account(): JSX.Element {
             )}
             <Button style="ctaDarkYellow">Upgrade</Button>
           </VStack> */}
+
+          <VStack
+            css={{
+              padding: '24px',
+              width: '100%',
+              height: '100%',
+              bg: '$grayBg',
+              gap: '20px',
+              borderRadius: '5px',
+            }}
+          >
+            <StyledLabel>Danger Zone</StyledLabel>
+            <Button
+              style="ctaDarkYellow"
+              css={{ color: 'white', background: 'red' }}
+              onClick={(event) => {
+                window.location.href = '/settings/delete-my-account'
+              }}
+            >
+              Delete Account
+            </Button>
+          </VStack>
         </VStack>
       </VStack>
 

packages/web/pages/settings/delete-my-account.tsx

@@ -9,7 +9,7 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout'
 
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { Button } from '../../components/elements/Button'
-import { HStack } from '../../components/elements/LayoutPrimitives'
+import { HStack, VStack } from '../../components/elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { Loader } from '../../components/templates/SavingRequest'
 import { deleteAccountMutation } from '../../lib/networking/mutations/deleteAccountMutation'
@@ -52,26 +52,59 @@ export default function DeleteMyAccount(): JSX.Element {
           top: '5rem',
         }}
       />
+      <VStack
+        css={{ width: '100%', height: '100%' }}
+        distribution="start"
+        alignment="center"
+      >
+        <VStack
+          css={{
+            padding: '24px',
+            width: '100%',
+            height: '100%',
+            gap: '25px',
+            minWidth: '300px',
+            maxWidth: '865px',
+          }}
+        >
+          {showConfirm ? (
+            <ConfirmationModal
+              message={
+                'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'
+              }
+              onAccept={deleteAccount}
+              onOpenChange={() => setShowConfirm(false)}
+            />
+          ) : null}
 
-      {showConfirm ? (
-        <ConfirmationModal
-          message={
-            'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'
-          }
-          onAccept={deleteAccount}
-          onOpenChange={() => setShowConfirm(false)}
-        />
-      ) : null}
-
-      <HStack css={{ padding: '24px', width: '100%', height: '100%' }}>
-        {viewer && router ? (
-          <Button style="ctaDarkYellow" onClick={() => setShowConfirm(true)}>
-            Delete my Account
-          </Button>
-        ) : (
-          <Loader />
-        )}
-      </HStack>
+          <VStack
+            css={{
+              padding: '24px',
+              width: '100%',
+              height: '100%',
+              bg: '$grayBg',
+              gap: '20px',
+              borderRadius: '5px',
+            }}
+            distribution="start"
+            alignment="start"
+          >
+            Deleting your account will delete all your saved items, notes, and
+            highlights. This operation can not be undone.
+            {viewer && router ? (
+              <Button
+                style="ctaDarkYellow"
+                onClick={() => setShowConfirm(true)}
+                css={{ alignSelf: 'center' }}
+              >
+                Delete my Account
+              </Button>
+            ) : (
+              <Loader />
+            )}
+          </VStack>
+        </VStack>
+      </VStack>
     </SettingsLayout>
   )
 }