Adding withRequestAccountDeletion, withRequestDownloadLink, withCancelAccountDeletion

client/coral-framework/graphql/fragments.js

@@ -25,6 +25,9 @@ export default {
     'UnsuspendUserResponse',
     'UpdateAssetSettingsResponse',
     'UpdateAssetStatusResponse',
-    'UpdateSettingsResponse'
+    'UpdateSettingsResponse',
+    'RequestAccountDeletionResponse',
+    'RequestDownloadLinkResponse',
+    'CancelAccountDeletionResponse'
   ),
 };

client/coral-framework/graphql/mutations.js

@@ -623,6 +623,57 @@ export const withUpdateSettings = withMutation(
   }
 );
 
+export const withRequestAccountDeletion = withMutation(
+  gql`
+    mutation RequestAccountDeletion {
+      requestAccountDeletion {
+        ...RequestAccountDeletionResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestAccountDeletion: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
+export const withRequestDownloadLink = withMutation(
+  gql`
+    mutation RequestDownloadLink {
+      requestDownloadLink {
+        ...RequestDownloadLinkResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestDownloadLink: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
+export const withCancelAccountDeletion = withMutation(
+  gql`
+    mutation RequestDownloadLink {
+      cancelAccountDeletion {
+        ...CancelAccountDeletionResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      cancelAccountDeletion: () => {
+        return mutate();
+      },
+    }),
+  }
+);
+
 export const withUpdateAssetSettings = withMutation(
   gql`
     mutation UpdateAssetSettings($id: ID!, $input: AssetSettingsInput!) {

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

@@ -34,6 +34,4 @@
   font-size: 1em;
   line-height: 20px;
   margin: 0;
-}
-
-
+}

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

@@ -9,30 +9,40 @@ const DeleteMyAccountFinalStep = () => (
       Your request has been submitted and confirmation has been sent to the
       email address associated with your account.
     </p>
-    <strong> Your account is scheduled to be deleted at:</strong>
-    <strong>
-      <Icon name="clock" />Account Deletion Date and Time
-    </strong>
+
+    <div className={styles.box}>
+      <strong className={styles.block}>
+        Your account is scheduled to be deleted at:
+      </strong>
+      <strong className={styles.block}>
+        <Icon name="access_time" />
+        <span>Account Deletion Date and Time</span>
+      </strong>
+    </div>
+
     <p className={styles.description}>
       <strong>Changed your mind?</strong> Simply sign in to your account again
       before this time and click “<strong>
         Cancel Account Deletion Request.
       </strong>”
     </p>
+
     <p className={styles.description}>
       <strong>Tell us why.</strong> Wed like to know why you chose to delete
       your account. Send us feedback on our comment system by emailing.
     </p>
-    <div className={cn(styles.actions)}>
+
+    <div className={cn(styles.actions, styles.columnView)}>
       <Button
         className={cn(styles.button, styles.proceed)}
         onClick={this.closeDialog}
+        full
       >
         Done
       </Button>
-      <small className={styles.note}>
+      <span className={styles.note}>
         Note: You will be immediately signed out of your account.
-      </small>
+      </span>
     </div>
   </div>
 );

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

@@ -43,10 +43,22 @@
     background-color: #3498DB;
     color: white;
   }
+
+  &.danger {
+    background-color: #FA4643;
+    color: white;
+  }
 }
 
 .actions {
   text-align: right;
+  padding-top: 20px;
+
+  &.columnView {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  } 
 }
 
 .title {
@@ -58,4 +70,39 @@
   font-size: 1em;
   line-height: 20px;
   margin: 0;
+  margin-bottom: 15px;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.note {
+  margin: 10px 0;
+}
+
+.subTitle {
+  font-size: 1em;
+  margin-bottom: 8px;
+}
+
+.textBox {
+  background-color: #F1F2F2;
+  border: none;
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  color: #3B4A53;
+  font-size: 1em;
+}
+
+.block {
+  display: block;
+  margin-top: 2px;
+}
+
+.step {
+  padding-top: 20px;
 }

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

@@ -5,12 +5,14 @@ import styles from './DeleteMyAccountStep.css';
 
 const DeleteMyAccountStep1 = props => (
   <div className={styles.step}>
-    <h4>When will my account be deleted?</h4>
+    <h4 className={styles.subTitle}>When will my account be deleted?</h4>
     <p className={styles.description}>
       Your account will be deleted 24 hours after your request has been
       submitted.
     </p>
-    <h4>Can I still write comments until my account is deleted? </h4>
+    <h4 className={styles.subTitle}>
+      Can I still write comments until my account is deleted?{' '}
+    </h4>
     <p className={styles.description}>
       No. Once youve requested account deletion, you can no longer write
       comments, reply to comments, or select reactions.

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

@@ -10,8 +10,12 @@ const DeleteMyAccountStep1 = props => (
       history for your records. After your account is deleted, you will be
       unable to request your comment history.
     </p>
-    <p>To download your comment history go to:</p>
-    <strong>My Profile Download My Comment History</strong>
+    <p className={styles.description}>
+      To download your comment history go to:
+      <strong className={styles.block}>
+        My Profile {`>`} Download My Comment History
+      </strong>
+    </p>
     <div className={cn(styles.actions)}>
       <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
       <Button

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

@@ -5,7 +5,9 @@ import styles from './DeleteMyAccountStep.css';
 
 const DeleteMyAccountStep1 = props => (
   <div className={styles.step}>
-    <h4>Are you sure you want to delete your account?</h4>
+    <h4 className={styles.subTitle}>
+      Are you sure you want to delete your account?
+    </h4>
     <p className={styles.description}>
       To confirm you would like to delete your account please type in the
       following phrase into the text box below:
@@ -19,7 +21,7 @@ const DeleteMyAccountStep1 = props => (
     <div className={cn(styles.actions)}>
       <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
       <Button
-        className={cn(styles.button, styles.proceed)}
+        className={cn(styles.button, styles.danger)}
         onClick={props.goToNextStep}
       >
         Delete My Account