Add dynamic link in translations for migration info

CirclesUBI · Jul 8, 2024 · b7d4605 · b7d4605
1 parent b0bb455
commit b7d4605
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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" />