From b7d4605f5157ed78e99c70c1baf6a3cacd48626e Mon Sep 17 00:00:00 2001
From: mikozet <mikozet2@gmail.com>
Date: Mon, 8 Jul 2024 15:32:41 +0400
Subject: [PATCH] Add dynamic link in translations for migration info

---
 locales/en.json        |  5 +++--
 src/styles/theme.js    | 15 +++++++++++++++
 src/views/Dashboard.js | 19 +++++++++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 3f75f012..10ffeda4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -202,10 +202,11 @@
     "headingLogin": "Login",
     "inputPlaceholder": "Start typing...",
     "linkSupport": "Send an email",
+    "linkMigrationText": "Migrate Your Profile",
     "successWelcome": "Successfully connected to account. Welcome!",
     "migrationText1": "Circles Garden profile data is being migrated. You can read about this here:",
-    "migrationText2": "Please login and visit the Migrate Your Profile page to confirm your preference",
-    "migrationText3": "Please visit the Migrate Your Profile page to confirm your preference"
+    "migrationText2": "Please login and visit the <a href='{env}/profile-migrate' rel='noopener noreferrer'>Migrate Your Profile</a> page to confirm your preference",
+    "migrationText3": "Please visit the <a href='{env}/profile-migrate' rel='noopener noreferrer'>Migrate Your Profile</a> page to confirm your preference"
   },
   "MigrateYourProfile": {
     "title": "Migrate Your Profile",
diff --git a/src/styles/theme.js b/src/styles/theme.js
index b53f6937..5cf151bc 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -227,6 +227,21 @@ export default createTheme({
         color: colors.white,
         fontWeight: fontWeightMedium,
       },
+      '&.body3_link_gradient': {
+        '& a': {
+          lineHeight: '120%',
+          background: gradients.pinkToPurple,
+          backgroundClip: 'text',
+          textFillColor: 'transparent',
+          textDecorationLine: 'none',
+          fontWeight: 600,
+          '&:hover': {
+            background: gradients.purpleToLightPink,
+            backgroundClip: 'text',
+            textFillColor: 'transparent',
+          },
+        },
+      },
     },
     body2: {
       fontWeight: fontWeightBold,
diff --git a/src/views/Dashboard.js b/src/views/Dashboard.js
index c44a20ba..56cf1a1e 100644
--- a/src/views/Dashboard.js
+++ b/src/views/Dashboard.js
@@ -119,6 +119,17 @@ const Dashboard = () => {
     setIsMenuExpanded(false);
   };
 
+  const env = process.env.BASE_PATH;
+  const htmlMigrationContent = (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: translate('Login.migrationText3', {
+          env,
+        }),
+      }}
+    />
+  );
+
   return (
     <Fragment>
       <BackgroundCurved gradient="turquoise">
@@ -169,8 +180,12 @@ const Dashboard = () => {
                 {MIGRATION_INFO_URL}
               </ExternalLink>
             </Typography>
-            <Typography align="center" variant="body1">
-              {translate('Login.migrationText3')}
+            <Typography
+              align="center"
+              classes={{ root: 'body3_link_gradient' }}
+              variant="body1"
+            >
+              {htmlMigrationContent}
             </Typography>
           </Box>
           <AppNote messageVersion="dashboard" />