Updating cache

plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css

@@ -1,23 +0,0 @@
-.container {
-  border : solid 1px #F26563;
-  border-radius: 2px;
-  color: #3B4A53; 
-}
-
-.button {
-  color: #787D80;
-  border-radius: 2px;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-
-  &:hover {
-    background-color: #eaeaea;
-  }
-
-  &.secondary {
-    background-color: #787D80;
-    color: white;
-  }
-}

plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Button, Icon } from 'plugin-api/beta/client/components/ui';
-import styles from './AccountDeletionRequestedSign.css';
-
-class AccountDeletionRequestedSign extends React.Component {
-  render() {
-    return (
-      <div className={styles.container}>
-        <h3>
-          <Icon name="warning" />Account Deletion Requested
-        </h3>
-        <p>
-          A request to delete your account was received on. If you would like to
-          continue leaving comments, replies or reactions, you may cancel your
-          request to delete your account below before
-        </p>
-        <Button className={cn(styles.button, styles.secondary)}>
-          Cancel Account Deletion Request
-        </Button>
-      </div>
-    );
-  }
-}
-
-export default AccountDeletionRequestedSign;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css

@@ -10,4 +10,14 @@
   &:hover {
     background-color: #eaeaea;
   }
+
+  &.secondary {
+    background-color: #787D80;
+    color: white;
+  }
+
+  > i { 
+    font-size: 1.2em;
+    vertical-align: middle;
+  }
 }

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import moment from 'moment';
 import styles from './DeleteMyAccount.css';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import DeleteMyAccountDialog from './DeleteMyAccountDialog';
@@ -52,6 +53,7 @@ class DeleteMyAccount extends React.Component {
       <div className="talk-plugin-auth--delete-my-account">
         <DeleteMyAccountDialog
           requestAccountDeletion={this.requestAccountDeletion}
+          showDialog={this.state.showDialog}
           closeDialog={this.closeDialog}
         />
         <h3
@@ -62,6 +64,15 @@ class DeleteMyAccount extends React.Component {
         >
           Delete My Account
         </h3>
+        <p
+          className={cn(
+            styles.description,
+            'talk-plugin-auth--delete-my-account-description'
+          )}
+        >
+          Deleting your account will permanently erase your profile and remove
+          all your comments from this site.
+        </p>
         <p
           className={cn(
             styles.description,
@@ -70,12 +81,14 @@ class DeleteMyAccount extends React.Component {
         >
           {scheduledDeletionDate &&
             `You have already submitted a request to delete your account.
-          Your account will be deleted on ${scheduledDeletionDate}. You may
+          Your account will be deleted on ${moment(
+            scheduledDeletionDate
+          ).format('MMM Do YYYY, h:mm:ss a')}. You may
           cancel the request until that time`}
         </p>
         {scheduledDeletionDate ? (
           <Button
-            className={cn(styles.button)}
+            className={cn(styles.button, styles.secondary)}
             onClick={this.cancelAccountDeletion}
           >
             Cancel Account Deletion Request

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js

@@ -26,13 +26,13 @@ class DeleteMyAccountDialog extends React.Component {
 
   cancel = () => {
     this.clear();
-    this.closeDialog();
+    this.props.closeDialog();
   };
 
   render() {
     const { step } = this.state;
     return (
-      <Dialog open={true} className={styles.dialog}>
+      <Dialog open={this.props.showDialog} className={styles.dialog}>
         <span className={styles.close} onClick={this.cancel}>
           ×
         </span>
@@ -70,6 +70,7 @@ class DeleteMyAccountDialog extends React.Component {
 }
 
 DeleteMyAccountDialog.propTypes = {
+  showDialog: PropTypes.bool.isRequired,
   closeDialog: PropTypes.func.isRequired,
   requestAccountDeletion: PropTypes.func.isRequired,
 };

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js

@@ -35,7 +35,7 @@ class DeleteMyAccountStep3 extends React.Component {
           </Button>
           <Button
             className={cn(styles.button, styles.danger)}
-            onClicsk={this.deleteAndContinue}
+            onClick={this.deleteAndContinue}
           >
             Delete My Account
           </Button>