fix(article-footer): show red heart emoji in Chrome/Edge (#10677)

caugner · web-flow · commit e12a0c45c393 · 2024-03-14T14:22:39.000+01:00
Due to a compatibility issue with the Inter font in Chromium,
the red heart emoji was displayed in black.
diff --git a/client/src/document/organisms/article-footer/index.scss b/client/src/document/organisms/article-footer/index.scss
@@ -101,5 +101,10 @@
       margin-bottom: 0;
       margin-top: 2rem;
     }
+
+    .emoji {
+      // Ensure emojis are shown in color.
+      font-family: initial;
+    }
   }
 }
diff --git a/client/src/document/organisms/article-footer/index.tsx b/client/src/document/organisms/article-footer/index.tsx
@@ -121,7 +121,9 @@ export function ArticleFooter({ doc, locale }) {
               </div>
             </>
           ) : (
-            <span className="thank-you">Thank you for your feedback! ❤️</span>
+            <span className="thank-you">
+              Thank you for your feedback! <span className="emoji">❤️</span>
+            </span>
           )}
         </fieldset>
 

Original file line number	Diff line number	Diff line change
`@@ -101,5 +101,10 @@`
`101`	`101`	`margin-bottom: 0;`
`102`	`102`	`margin-top: 2rem;`
`103`	`103`	`}`
	`104`	`+`
	`105`	`+ .emoji {`
	`106`	`+ // Ensure emojis are shown in color.`
	`107`	`+ font-family: initial;`
	`108`	`+ }`
`104`	`109`	`}`
`105`	`110`	`}`