Update remove data dialog

CirclesUBI · Sep 28, 2023 · c68b1fb · c68b1fb
1 parent 8b7e36e
commit c68b1fb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -344,12 +344,13 @@
     "bodyUndeployedToken": "Account not verified"
   },
   "RemoveYourData": {
-    "titleText": "Do you want to delete your personal profile data?",
-    "bodyText": "This action will delete your personal avatar, username and email from our databases.",
-    "bodyText2": "This action will not delete any transaction data or trust interactions. Such data is stored on Gnosis Chain blockchain and cannot be deleted by anyone. However, your blockchain transactions will no longer be traceable or linked to your username or avatar.",
-    "bodyText3": "Upon deletion you can chose to log out. You may still recover your account in the future by using your magic words and edit your profile with a new profile data. If you do not log in within 90 days, your UBI payouts will be stopped forever. It is also possible to continue to use circles.garden without an alias, avatar or email.",
-    "bodyText4": "Please note that data deletion will not happen across wallets. You will have to do profile data deletion for your personal wallet and any shared wallets separately before logging out.",
-    "btnText": "I would like to proceed with my account data deletion",
+    "titleText": "Are you sure you want to delete your profile data?",
+    "bodyText": "This action will delete your profile picture, username and email from our databases.",
+    "bodyText2": "However, this action will not delete historical transaction data or trust interactions.",
+    "bodyText3": "After deletion you can chose to end session. You may still recover your account in the future by using your magic words. If you do not log in within 90 days, your UBI payouts will be stopped forever.",
+    "bodyText4": "Please note that data deletion will not happen across wallets. You will have to do profile data deletion your personal wallet and any shared wallets separately before ending session.",
+    "readMore": "Read more",
+    "btnText": "Delete Profile Data",
     "confirmationText": "You have successfully deleted your profile data",
     "confirmationDelete": "Delete",
     "confirmationCancel": "Cancel"

diff --git a/src/components/RemoveYourData.js b/src/components/RemoveYourData.js
@@ -5,22 +5,17 @@ import { useDispatch } from 'react-redux';
 
 import Button from '~/components/Button';
 import DialogInfo from '~/components/DialogInfo';
+import ExternalLink from '~/components/ExternalLink';
 import translate from '~/services/locale';
 import notify, { NotificationsTypes } from '~/store/notifications/actions';
+import { FAQ_URL } from '~/utils/constants';
 import logError, { translateErrorForUser } from '~/utils/debug';
 
 const useStyles = makeStyles(() => ({
   textContainer: {
     maxWidth: '250px',
     margin: '0 auto',
-    marginBottom: '20px',
-  },
-  btnContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    marginTop: '32px',
+    marginBottom: '40px',
   },
 }));
 
@@ -78,21 +73,31 @@ const RemoveYourData = () => {
       <Typography align="center" mb={2}>
         {translate('RemoveYourData.bodyText4')}
       </Typography>
-      <Box className={classes.btnContainer}>
-        <Button
-          className={classes.continueButton}
-          fullWidth
-          onClick={dialogCloseInfoHandler}
-        >
-          {translate('RemoveYourData.confirmationDelete')}
-        </Button>
-        <Button
-          fullWidth
-          isText
-          onClick={() => setIsOpenDialogCloseInfo(false)}
+      <ExternalLink href={FAQ_URL}>
+        <Typography
+          align="center"
+          classes={{ root: 'body3_link_gradient' }}
+          paragraph
+          variant="body3"
         >
-          {translate('RemoveYourData.confirmationCancel')}
-        </Button>
+          {translate('RemoveYourData.readMore')}
+        </Typography>
+      </ExternalLink>
+      <Box pt={3}>
+        <Box display="flex" flexDirection="column" pb={1}>
+          <Button
+            className={classes.continueButton}
+            fullWidth
+            onClick={dialogCloseInfoHandler}
+          >
+            {translate('RemoveYourData.confirmationDelete')}
+          </Button>
+        </Box>
+        <Box display="flex" flexDirection="column">
+          <Button isText m={2} onClick={() => setIsOpenDialogCloseInfo(false)}>
+            {translate('RemoveYourData.confirmationCancel')}
+          </Button>
+        </Box>
       </Box>
     </Box>
   );

diff --git a/src/views/EditProfile.js b/src/views/EditProfile.js
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'none',
   },
   saveButton: {
-    marginBottom: '20px',
+    marginBottom: '8px',
   },
   informationContainer: {
     maxWidth: '350px',
@@ -82,6 +82,10 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative',
     zIndex: theme.zIndex.layer1,
   },
+  removeYourData: {
+    position: 'relative',
+    marginTop: '5px',
+  },
 }));
 
 const DialogContentUpload = ({ onFileUpload, handleClose, uploadImgSrc }) => {
@@ -321,9 +325,9 @@ const EditProfile = () => {
     }
   }
 
-  const dialogOpenInfoHandler = () => {
-    setIsOpenDialogCloseInfo(true);
-  };
+  // const dialogOpenInfoHandler = () => {
+  //   setIsOpenDialogCloseInfo(true);
+  // };
 
   const dialogCloseInfoHandler = () => {
     setIsClose(true);
@@ -511,7 +515,6 @@ const EditProfile = () => {
                 </>
               )}
             </Box>
-            <RemoveYourData />
           </Box>
         </Container>
       </View>
@@ -524,9 +527,7 @@ const EditProfile = () => {
         >
           {translate('EditProfile.buttonSave')}
         </Button>
-        <Button fullWidth isText onClick={dialogOpenInfoHandler}>
-          {translate('EditProfile.buttonCancel')}
-        </Button>
+        <RemoveYourData className={classes.removeYourData} />
       </Footer>
     </>
   );