From c51fe26cccf452d18a464ca4e4568cbcb564fab8 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 09:20:31 +0530
Subject: [PATCH] all panes changed with icons

---
 .../EditorPage/AudioEditor/AudioEditor.js     |  5 +-
 .../EditorPage/ObsEditor/EditorPanel.js       | 13 ++--
 .../Reference/Audio/ReferenceAudio.js         |  4 ++
 .../Reference/OBS/ObsResourceCard.js          |  8 ++-
 .../EditorPage/Reference/OBS/ObsTn.js         |  2 +
 .../EditorPage/Reference/OBS/ObsTwlCard.js    |  2 +
 .../ReferenceBible/ReferenceBibleX.js         |  2 +
 .../components/MenuDropdown/MenuDropdown.js   | 16 +++--
 renderer/src/layouts/editor/EditorSection.js  | 59 +++++++++++++++++--
 .../src/layouts/editor/SectionPlaceholder1.js | 26 +++++++-
 .../src/layouts/editor/SectionPlaceholder2.js | 28 ++++++++-
 renderer/src/layouts/editor/WebMenuBar.js     |  2 +-
 12 files changed, 140 insertions(+), 27 deletions(-)

diff --git a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
index 274f4f5be..427c30bb9 100644
--- a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
+++ b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
@@ -31,7 +31,7 @@ const AudioEditor = ({ editor }) => {
       audioContent,
       audioPath,
       selectedFont,
-      fontSize,
+      editorFontSize,
       // eslint-disable-next-line no-unused-vars
       updateWave, // updateWave is used to update the waveform in the Editor after recording audio
     }, actions: {
@@ -40,6 +40,7 @@ const AudioEditor = ({ editor }) => {
       setAudioContent,
       setAudioCurrentChapter,
       setAudioPath,
+      setEditorFontSize,
     },
   } = useContext(ReferenceContext);
 
@@ -219,7 +220,7 @@ const AudioEditor = ({ editor }) => {
         verse={verse}
         location={audioPath}
         updateWave={updateWave}
-        fontSize={fontSize}
+        fontSize={editorFontSize}
         selectedFont={selectedFont}
       />
 )}
diff --git a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
index 3dee90440..61bda0a19 100644
--- a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
+++ b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
@@ -8,12 +8,13 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
   const {
     state: {
       selectedFont,
-      fontSize,
+      editorFontSize,
     },
     actions: {
       setSelectedStory,
     },
 } = useContext(ReferenceContext);
+
   const { states: { scrollLock } } = useContext(ProjectContext);
   const { t } = useTranslation();
   const handleChange = (e) => {
@@ -90,7 +91,7 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-xl"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
+                fontSize: `${editorFontSize}rem`,
               }}
             />
           </div>
@@ -118,8 +119,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               onInput={(e) => handleAutoHeight(e)}
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>
@@ -140,8 +141,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-sm"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>
diff --git a/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js b/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
index cda21beb9..e9be9002b 100644
--- a/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
+++ b/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
@@ -25,6 +25,8 @@ const ReferenceAudio = ({
   chapter,
   verse,
   bookId,
+  font,
+  fontSize,
 }) => {
   const {
     actions: {
@@ -227,6 +229,8 @@ const ReferenceAudio = ({
               data={bookData}
               versepath={mp3Path}
               verse={verse}
+              font={font}
+              fontSize={fontSize}
             //   goToVerse={{
             //     chapter: parseInt(chapter, 10),
             //     verse: parseInt(verse, 10),
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
index 5890d1168..6d97e2069 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
@@ -17,6 +17,7 @@ function ObsResourceCard({
   isLoading,
   setIndex,
   font,
+  fontSize,
 }) {
   const {
     state: { filters, markdownView },
@@ -36,7 +37,12 @@ function ObsResourceCard({
         itemIndex={index}
         setItemIndex={setIndex}
       />
-      <div style={{ fontFamily: font || 'sans-serif' }}>
+      <div style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        }}
+      >
         <CardContent
           item={[]}
           items={items}
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
index 2899e2f7a..55e0e99fa 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
@@ -27,6 +27,7 @@ function ObsTnCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(0);
@@ -143,6 +144,7 @@ function ObsTnCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : <LoadingScreen />
   );
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
index 8c226d1f5..63654c297 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
@@ -23,6 +23,7 @@ function ObsTwlCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(1);
@@ -104,6 +105,7 @@ function ObsTwlCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : (
       <LoadingScreen />
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
index 472e791c1..5ff7a6c7c 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
@@ -13,6 +13,7 @@ const ReferenceBibleX = ({
   refName,
   bookId,
   font,
+  fontSize,
 }) => {
   const {
     states: {
@@ -47,6 +48,7 @@ const ReferenceBibleX = ({
     refName,
     scrollLock,
     font,
+    fontSize,
   };
   return (
     <>
diff --git a/renderer/src/components/MenuDropdown/MenuDropdown.js b/renderer/src/components/MenuDropdown/MenuDropdown.js
index b46e21be0..bbcf91959 100644
--- a/renderer/src/components/MenuDropdown/MenuDropdown.js
+++ b/renderer/src/components/MenuDropdown/MenuDropdown.js
@@ -14,7 +14,7 @@ import {
 } from 'font-detect-rhl';
 
 export default function MenuDropdown({
- selectedFont, setSelectedFont, buttonStyle,
+ selectedFont, setSelectedFont, buttonStyle, showIcon = true,
 }) {
   const detectedFonts = useDetectFonts({ fonts: fontsArray });
   const [query, setQuery] = useState('');
@@ -37,12 +37,16 @@ export default function MenuDropdown({
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm'}
+        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm flex '}
       >
-        <TextAa
-          className="w-5 h-5 text-grey-800"
-          aria-hidden="true"
-        />
+        {showIcon ? (
+          <TextAa
+            className="w-5 h-5 text-grey-800"
+            aria-hidden="true"
+          />
+        ) : (
+          <span className="self-center justify-self-center">Font</span>
+        )}
       </button>
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog
diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
index 0632a539d..d75ecf4fb 100644
--- a/renderer/src/layouts/editor/EditorSection.js
+++ b/renderer/src/layouts/editor/EditorSection.js
@@ -40,6 +40,8 @@ export default function EditorSection({
   setAddingSection,
   font,
   setFont,
+  fontSize,
+  setFontsize,
 }) {
   const [openResourcePopUp, setOpenResourcePopUp] = useState(false);
   const [openModal, setOpenModal] = useState(false);
@@ -47,7 +49,6 @@ export default function EditorSection({
   const { t } = useTranslation();
   const {
     state: {
-      fontSize,
       layout,
       openResource1,
       openResource2,
@@ -131,6 +132,15 @@ export default function EditorSection({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openResourcePopUp, title]);
 
+  const handleFontSize = (status) => {
+    if (status === 'dec' && fontSize > 0.70) {
+      setFontsize(fontSize - 0.2);
+    }
+    if (status === 'inc' && fontSize < 2) {
+      setFontsize(fontSize + 0.2);
+    }
+  };
+
   const addRow = () => {
     if (sectionNum >= 0 && sectionNum < 2) {
       setSectionNum(sectionNum + 1);
@@ -224,7 +234,10 @@ export default function EditorSection({
                     />
                   )}
 
-                    <div className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                    <div
+                      className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      title={title}
+                    >
                       {title}
                     </div>
                   </div>
@@ -233,14 +246,20 @@ export default function EditorSection({
                   {scrollLock && title ? (
                     <>
                       {CustomNavigation}
-                      <div className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                      <div
+                        title={title}
+                        className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      >
                         {title}
                       </div>
                     </>
                   ) : (
                     <div className="flex">
                       <div className="py-2 uppercase tracking-wider text-xs font-semibold">
-                        <div className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                        <div
+                          title={title}
+                          className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                        >
                           {title}
                         </div>
                       </div>
@@ -248,10 +267,40 @@ export default function EditorSection({
                   )}
                 </>
               )}
-              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible ">
+              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible  pl-2 ite">
+
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center border rounded-md shadow-sm
+                  text-xs h-fit py-1
+                  focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-300 focus:ring-gray-300"
+                >
+                  <div
+                    aria-label="decrease-font"
+                    onClick={() => { handleFontSize('dec'); }}
+                    role="button"
+                    tabIndex="0"
+                    title={t('tooltip-editor-font-dec')}
+                    className="h-5 w-5 hover:text-black font-bold border-r border-gray-200 text-center flex items-center pl-1.5 "
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                  <div
+                    aria-label="increase-font"
+                    className="h-5 w-5 hover:text-black font-bold text-lg text-center flex items-center pl-1"
+                    onClick={() => { handleFontSize('inc'); }}
+                    role="button"
+                    title={t('tooltip-editor-font-inc')}
+                    tabIndex="0"
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                </button>
+
                 <MenuDropdown
                   selectedFont={font || 'sans-serif'}
                   setSelectedFont={setFont}
+                  showIcon={false}
                 />
                 <button
                   aria-label="resources-selector"
diff --git a/renderer/src/layouts/editor/SectionPlaceholder1.js b/renderer/src/layouts/editor/SectionPlaceholder1.js
index 650ffda9a..98f5c3d9c 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder1.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder1.js
@@ -41,6 +41,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     owner: '',
     offlineResource: { offline: false },
     font: '',
+    fontSize: 1,
   });
   const [referenceColumnOneData2, setReferenceColumnOneData2] = useState({
     languageId: '',
@@ -50,6 +51,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     owner: '',
     offlineResource: { offline: false },
     font: '',
+    fontSize: 1,
   });
   const [loadResource1, setLoadResource1] = useState(false);
   const [loadResource2, setLoadResource2] = useState(false);
@@ -65,6 +67,8 @@ const SectionPlaceholder1 = ({ editor }) => {
       resetResourceOnDeleteOffline,
       font1,
       font2,
+      fontSize1,
+      fontSize2,
     },
     actions: {
       setRow,
@@ -73,6 +77,8 @@ const SectionPlaceholder1 = ({ editor }) => {
       setOpenResource2,
       setFont1,
       setFont2,
+      setFontsize1,
+      setFontsize2,
       // applyBooksFilter,
       setResetResourceOnDeleteOffline,
     },
@@ -135,6 +141,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -156,6 +163,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -295,9 +303,9 @@ const SectionPlaceholder1 = ({ editor }) => {
   }, [_obsNavigation1, _obsNavigation2, referenceColumnOneData1, referenceColumnOneData2]);
 
   useEffect(() => {
-    setReferenceColumnOneData1((prev) => ({ ...prev, font: font1 }));
-    setReferenceColumnOneData2((prev) => ({ ...prev, font: font2 }));
-  }, [font1, font2]);
+    setReferenceColumnOneData1((prev) => ({ ...prev, font: font1, fontSize: fontSize1 }));
+    setReferenceColumnOneData2((prev) => ({ ...prev, font: font2, fontSize: fontSize2 }));
+  }, [font1, font2, fontSize1, fontSize2]);
 
   return (
     <>
@@ -327,6 +335,8 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setAddingSection={setAddingSection}
                   font={font1}
                   setFont={setFont1}
+                  fontSize={fontSize1}
+                  setFontsize={setFontsize1}
                 >
                   {
                     (loadResource1 === true)
@@ -342,6 +352,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                                 chapter={_chapter1}
                                 verse={_verse1}
                                 font={font1}
+                                fontSize={fontSize1}
                               />
                             </ScribexContextProvider>
                           )}
@@ -353,6 +364,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                             <ReferenceObs
                               stories={stories1}
                               font={font1}
+                              fontSize={fontSize1}
                               title={referenceColumnOneData1.refName}
                             />
                           )}
@@ -365,6 +377,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         chapter={_chapter1}
                         verse={_verse1}
                         font={font1}
+                        fontSize={fontSize1}
                       />
                     )) || (
                     <TranslationHelps
@@ -377,6 +390,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       story={_obsNavigation1}
                       offlineResource={referenceColumnOneData1.offlineResource}
                       font={font1}
+                      fontSize={fontSize1}
                     />
                       )
                     )
@@ -405,6 +419,8 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setAddingSection={setAddingSection}
                   font={font2}
                   setFont={setFont2}
+                  fontSize={fontSize2}
+                  setFontsize={setFontsize2}
                 >
                   {
                     (loadResource2 === true)
@@ -420,6 +436,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                                 chapter={_chapter2}
                                 verse={_verse2}
                                 font={font2}
+                                fontSize={fontSize2}
                               />
                             </ScribexContextProvider>
                           )}
@@ -431,6 +448,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                             <ReferenceObs
                               stories={stories2}
                               font={font2}
+                              fontSize={fontSize2}
                               title={referenceColumnOneData2.refName}
                             />
                           )}
@@ -443,6 +461,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         chapter={_chapter1}
                         verse={_verse1}
                         font={font2}
+                        fontSize={fontSize2}
                       />
                     )) || (
                     <TranslationHelps
@@ -455,6 +474,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       story={_obsNavigation2}
                       offlineResource={referenceColumnOneData2.offlineResource}
                       font={font2}
+                      fontSize={fontSize2}
                     />
                       )
                     )
diff --git a/renderer/src/layouts/editor/SectionPlaceholder2.js b/renderer/src/layouts/editor/SectionPlaceholder2.js
index 2ac40d674..f415f7f00 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder2.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder2.js
@@ -38,6 +38,8 @@ const SectionPlaceholder2 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
+    fontSize: 1,
   });
   const [referenceColumnTwoData2, setReferenceColumnTwoData2] = useState({
     languageId: '',
@@ -46,6 +48,8 @@ const SectionPlaceholder2 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
+    fontSize: 1,
   });
   const [loadResource3, setLoadResource3] = useState(false);
   const [loadResource4, setLoadResource4] = useState(false);
@@ -65,6 +69,8 @@ const SectionPlaceholder2 = ({ editor }) => {
       resetResourceOnDeleteOffline,
       font3,
       font4,
+      fontSize3,
+      fontSize4,
     },
     actions: {
       setRow,
@@ -75,6 +81,8 @@ const SectionPlaceholder2 = ({ editor }) => {
       setResetResourceOnDeleteOffline,
       setFont3,
       setFont4,
+      setFontsize3,
+      setFontsize4,
     },
   } = useContext(ReferenceContext);
   const {
@@ -128,6 +136,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -147,6 +156,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -293,9 +303,9 @@ const SectionPlaceholder2 = ({ editor }) => {
   }, [_obsNavigation1, _obsNavigation2, referenceColumnTwoData1, referenceColumnTwoData2]);
 
   useEffect(() => {
-    setReferenceColumnTwoData1((prev) => ({ ...prev, font: font3 }));
-    setReferenceColumnTwoData2((prev) => ({ ...prev, font: font4 }));
-  }, [font3, font4]);
+    setReferenceColumnTwoData1((prev) => ({ ...prev, font: font3, fontSize: fontSize3 }));
+    setReferenceColumnTwoData2((prev) => ({ ...prev, font: font4, fontSize: fontSize4 }));
+  }, [font3, font4, fontSize3, fontSize4]);
 
   return (
     <>
@@ -326,6 +336,8 @@ const SectionPlaceholder2 = ({ editor }) => {
                     setAddingSection={setAddingSection}
                     font={font3}
                     setFont={setFont3}
+                    fontSize={fontSize3}
+                    setFontsize={setFontsize3}
                   >
                     {
                       (loadResource3 === true)
@@ -341,6 +353,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                                   chapter={_chapter1}
                                   verse={_verse1}
                                   font={font3}
+                                  fontSize={fontSize3}
                                 />
                               </ScribexContextProvider>
                             )}
@@ -352,6 +365,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                               <ReferenceObs
                                 stories={stories1}
                                 font={font3}
+                                fontSize={fontSize3}
                                 title={referenceColumnTwoData1.refName}
                               />
                             )}
@@ -364,6 +378,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           chapter={_chapter1}
                           verse={_verse1}
                           font={font3}
+                          fontSize={fontSize3}
                         />
                       )) || (
                       <TranslationHelps
@@ -376,6 +391,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         story={_obsNavigation1}
                         offlineResource={referenceColumnTwoData1.offlineResource}
                         font={font3}
+                        fontSize={fontSize3}
                       />
                         )
                       )
@@ -404,6 +420,8 @@ const SectionPlaceholder2 = ({ editor }) => {
                     setAddingSection={setAddingSection}
                     font={font4}
                     setFont={setFont4}
+                    fontSize={fontSize4}
+                    setFontsize={setFontsize4}
                   >
                     {
                       (loadResource4 === true)
@@ -419,6 +437,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                                   chapter={_chapter2}
                                   verse={_verse2}
                                   font={font4}
+                                  fontSize={fontSize4}
                                 />
                               </ScribexContextProvider>
                             )}
@@ -430,6 +449,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                               <ReferenceObs
                                 stories={stories2}
                                 font={font4}
+                                fontSize={fontSize4}
                                 title={referenceColumnTwoData2.refName}
                               />
                             )}
@@ -442,6 +462,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           chapter={_chapter1}
                           verse={_verse1}
                           font={font4}
+                          fontSize={fontSize4}
                         />
                       )) || (
                       <TranslationHelps
@@ -454,6 +475,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         story={_obsNavigation2}
                         offlineResource={referenceColumnTwoData2.offlineResource}
                         font={font4}
+                        fontSize={fontSize4}
                       />
                         )
                       )
diff --git a/renderer/src/layouts/editor/WebMenuBar.js b/renderer/src/layouts/editor/WebMenuBar.js
index aba4fa9b3..460c13e9c 100644
--- a/renderer/src/layouts/editor/WebMenuBar.js
+++ b/renderer/src/layouts/editor/WebMenuBar.js
@@ -32,7 +32,7 @@ export default function TopMenuBar() {
 
   const {
     state: {
-      fontSize,
+      editorFontSize: fontSize,
     },
     actions: {
       setFontsize,