From c0179b4704f55551fdd07b28616d84af48104620 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 17 Feb 2025 13:19:37 +0100
Subject: [PATCH] ActivityPub typography fix (#22202)

ref
https://linear.app/ghost/issue/AP-750/visual-designfrontend-regressions

- Default font-family is not set properly in local storage
---
 .../src/components/feed/ArticleModal.tsx             | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
index 1f2391160f..cf81f34a28 100644
--- a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
+++ b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
@@ -38,6 +38,8 @@ interface IframeWindow extends Window {
     resizeIframe?: () => void;
 }
 
+const FONT_SANS = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif';
+
 const ArticleBody: React.FC<{
     heading: string;
     image: string|undefined;
@@ -77,7 +79,7 @@ const ArticleBody: React.FC<{
                 :root {
                     --font-size: ${fontSize};
                     --line-height: ${lineHeight};
-                    --font-family: ${fontFamily.value};
+                    --font-family: ${(fontFamily.value === 'sans-serif' ? FONT_SANS : fontFamily.value)};
                     --letter-spacing: ${fontFamily.label === 'Clean sans-serif' ? '-0.013em' : '0'};
                     --content-spacing-factor: ${SPACING_FACTORS[FONT_SIZES.indexOf(fontSize)]};
                 }
@@ -480,7 +482,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
     const [fontFamily, setFontFamily] = useState<SelectOption>(() => {
         const saved = localStorage.getItem(STORAGE_KEYS.FONT_FAMILY);
         return saved ? JSON.parse(saved) : {
-            value: 'sans-serif',
+            value: FONT_SANS,
             label: 'Clean sans-serif'
         };
     });
@@ -737,7 +739,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                                         controlClasses={{control: '!min-h-[40px] !py-0 !pl-1', option: '!pl-1 !py-[4px]'}}
                                         options={[
                                             {
-                                                value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+                                                value: FONT_SANS,
                                                 label: 'Clean sans-serif',
                                                 className: 'font-sans'
                                             },
@@ -750,7 +752,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                                         title='Typeface'
                                         value={fontFamily}
                                         onSelect={option => setFontFamily(option || {
-                                            value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+                                            value: FONT_SANS,
                                             label: 'Clean sans-serif',
                                             className: 'font-sans'
                                         })}
@@ -813,7 +815,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
                                             setCurrentFontSizeIndex(1); // Default font size
                                             setCurrentLineHeightIndex(1); // Default line height
                                             setFontFamily({
-                                                value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+                                                value: FONT_SANS,
                                                 label: 'Clean sans-serif'
                                             });
                                         }}