Merge pull request #3334 from overleaf/jpa-msm-rename-css-class

[misc] rename avoid-auto-linking class to force-overleaf-style in emails

GitOrigin-RevId: 9111a38afb550f3397555ef68d1e4170208eb121

services/web/app/src/Features/Email/Bodies/NoCTAEmailBody.js

@@ -9,7 +9,7 @@ module.exports = _.template(`\
 						<tr style="padding: 0; text-align: left; vertical-align: top;">
 							<th style="margin: 0; padding: 0; text-align: left;">
 								<% if (title) { %>
-									<h3 class="avoid-auto-linking" style="margin: 0; color: #5D6879; font-family: Georgia, serif; font-size: 24px; font-weight: normal; line-height: 1.3; padding: 0; text-align: left; word-wrap: normal;">
+									<h3 class="force-overleaf-style" style="margin: 0; color: #5D6879; font-family: Georgia, serif; font-size: 24px; font-weight: normal; line-height: 1.3; padding: 0; text-align: left; word-wrap: normal;">
 										<%= title %>
 									</h3>
 								<% } %>
@@ -25,7 +25,7 @@ module.exports = _.template(`\
 									<% } %>
 
 									<% (message).forEach(function(paragraph) { %>
-										<p class="avoid-auto-linking" style="margin: 0 0 10px 0; padding: 0;">
+										<p class="force-overleaf-style" style="margin: 0 0 10px 0; padding: 0;">
 											<%= paragraph %>
 										</p>
 									<% }) %>

services/web/app/src/Features/Email/Bodies/cta-email.js

@@ -9,7 +9,7 @@ module.exports = _.template(`\
 						<tr style="padding: 0; text-align: left; vertical-align: top;">
 							<th style="margin: 0; padding: 0; text-align: left;">
 								<% if (title) { %>
-									<h3 class="avoid-auto-linking" style="margin: 0; color: #5D6879; font-family: Georgia, serif; font-size: 24px; font-weight: normal; line-height: 1.3; padding: 0; text-align: left; word-wrap: normal;">
+									<h3 class="force-overleaf-style" style="margin: 0; color: #5D6879; font-family: Georgia, serif; font-size: 24px; font-weight: normal; line-height: 1.3; padding: 0; text-align: left; word-wrap: normal;">
 										<%= title %>
 									</h3>
 								<% } %>
@@ -25,7 +25,7 @@ module.exports = _.template(`\
 									<% } %>
 
 									<% (message).forEach(function(paragraph) { %>
-										<p class="avoid-auto-linking" style="margin: 0 0 10px 0; padding: 0;">
+										<p class="force-overleaf-style" style="margin: 0 0 10px 0; padding: 0;">
 											<%= paragraph %>
 										</p>
 									<% }) %>
@@ -52,7 +52,7 @@ module.exports = _.template(`\
 										<p style="margin: 0; padding: 0;">&#xA0;</p>
 
 										<% (secondaryMessage).forEach(function(paragraph) { %>
-											<p class="avoid-auto-linking">
+											<p class="force-overleaf-style">
 												<%= paragraph %>
 											</p>
 										<% }) %>
@@ -60,11 +60,11 @@ module.exports = _.template(`\
 
 									<p style="margin: 0; padding: 0;">&#xA0;</p>
 
-									<p class="avoid-auto-linking" style="font-size: 12px;">
+									<p class="force-overleaf-style" style="font-size: 12px;">
 										If the button above does not appear, please copy and paste this link into your browser's address bar:
 									</p>
 
-									<p class="avoid-auto-linking" style="font-size: 12px;">
+									<p class="force-overleaf-style" style="font-size: 12px;">
 										<%= ctaURL %>
 									</p>
 								</td>

services/web/app/src/Features/Email/Layouts/BaseWithHeaderEmailLayout.js

@@ -12,22 +12,22 @@ module.exports = _.template(`\
 		<style>.button td {
 	border-radius: 9999px; }
 
-.avoid-auto-linking a,
-.avoid-auto-linking a[href] {
+.force-overleaf-style a,
+.force-overleaf-style a[href] {
 	color: #138A07 !important;
 	text-decoration: none !important;
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	-webkit-hyphens: none;
 	hyphens: none; }
-	.avoid-auto-linking a:visited,
-	.avoid-auto-linking a[href]:visited {
+	.force-overleaf-style a:visited,
+	.force-overleaf-style a[href]:visited {
 		color: #138A07; }
-	.avoid-auto-linking a:hover,
-	.avoid-auto-linking a[href]:hover {
+	.force-overleaf-style a:hover,
+	.force-overleaf-style a[href]:hover {
 		color: #3d7935; }
-	.avoid-auto-linking a:active,
-	.avoid-auto-linking a[href]:active {
+	.force-overleaf-style a:active,
+	.force-overleaf-style a[href]:active {
 		color: #3d7935; }
 </style>
 		<style>@media only screen {

services/web/test/unit/src/Email/EmailBuilderTests.js

@@ -167,7 +167,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('a:contains("Leave Feedback")')
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.expectedUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html()
             expect(fallbackLink).to.contain(this.expectedUrl)
@@ -206,7 +206,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('a:contains("Confirm Email")')
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.opts.confirmEmailUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html()
             expect(fallbackLink).to.contain(this.opts.confirmEmailUrl)
@@ -251,7 +251,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('td a')
             expect(buttonLink).to.exist
             expect(buttonLink.attr('href')).to.equal(this.expectedUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback).to.exist
             const fallbackLink = fallback.html().replace(/&/g, '&')
             expect(fallbackLink).to.contain(this.expectedUrl)
@@ -295,7 +295,7 @@ describe('EmailBuilder', function() {
             expect(buttonLink.attr('href')).to.equal(
               this.opts.setNewPasswordUrl
             )
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback).to.exist
             const fallbackLink = fallback.html().replace(/&/g, '&')
             expect(fallbackLink).to.contain(this.opts.setNewPasswordUrl)
@@ -340,7 +340,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('a:contains("Join now")')
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.opts.acceptInviteUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html()
             expect(fallbackLink).to.contain(this.opts.acceptInviteUrl)
@@ -378,7 +378,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('a:contains("View Subscription Dashboard")')
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.expectedUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html()
             expect(fallbackLink).to.contain(this.expectedUrl)
@@ -414,7 +414,7 @@ describe('EmailBuilder', function() {
             )
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.settings.siteUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html()
             expect(fallbackLink).to.contain(this.settings.siteUrl)
@@ -455,7 +455,7 @@ describe('EmailBuilder', function() {
             expect(buttonLink.attr('href')).to.equal(
               this.opts.setNewPasswordUrl
             )
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html().replace(/&/, '&')
             expect(fallbackLink).to.contain(this.opts.setNewPasswordUrl)
@@ -508,7 +508,7 @@ describe('EmailBuilder', function() {
             const buttonLink = dom('a:contains("View project")')
             expect(buttonLink.length).to.equal(1)
             expect(buttonLink.attr('href')).to.equal(this.opts.inviteUrl)
-            const fallback = dom('.avoid-auto-linking').last()
+            const fallback = dom('.force-overleaf-style').last()
             expect(fallback.length).to.equal(1)
             const fallbackLink = fallback.html().replace(/&/g, '&')
             expect(fallbackLink).to.contain(this.opts.inviteUrl)