From c11ba18a2a9f333a257d02ec48ed05bdbcc4ffe4 Mon Sep 17 00:00:00 2001
From: Roman Yangarber <Roman.Yangarber@helsinki.fi>
Date: Sat, 14 Sep 2024 19:46:14 +0300
Subject: [PATCH] fix explanations and localizations - in translation box

---
 client/components/DictionaryHelp/Lemma.js     | 20 +++++++++++--------
 client/components/DictionaryHelp/index.js     | 20 ++++++++++++++++---
 .../FlashcardList/FlashcardListItem.js        |  4 ++--
 .../components/LibraryView/LibrarySearch.js   |  6 ++++--
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/client/components/DictionaryHelp/Lemma.js b/client/components/DictionaryHelp/Lemma.js
index fd5864712..4668397bf 100644
--- a/client/components/DictionaryHelp/Lemma.js
+++ b/client/components/DictionaryHelp/Lemma.js
@@ -20,27 +20,31 @@ const Lemma = ({
   }) => {
     const learningLanguage = useLearningLanguage()
     const { maskSymbol } = useSelector(({ translation }) => translation)
-  
+
     return (
       <div className="flex space-between" style={getTextStyle(learningLanguage)}>
         <div className="flex">
           <Speaker word={lemma} />
           {maskSymbol || (
             <a href={userUrl} target="_blank" rel="noopener noreferrer">
-              {lemma}
+                {// ??? <Popup content={<FormattedMessage id="explain-lemma-goto-dictionary" /> }
+                    lemma
+                }
             </a>
           )}
           {inflectionRef && (
-            <a href={inflectionRef.url} target="_blank" rel="noopener noreferrer" className="flex">
-              <Icon name="external" style={{ marginLeft: '1rem' }} />
-            </a>
+              <a href={// ??? <Popup content={<FormattedMessage id="explain-goto-inflection-table" /> }
+                     inflectionRef.url
+                 } target="_blank" rel="noopener noreferrer" className="flex">
+                  <Icon name="external" style={{ marginLeft: '1rem' }} />
+              </a>
           )}
         </div>
         {preferred && (
           <div className="flex-col" style={{ alignItems: 'center' }}>
             <Popup
               position="top center"
-              content={<FormattedHTMLMessage id="i-know-tooltip" />}
+              content={<FormattedHTMLMessage id="explain-i-know-word" />}
               trigger={
                 <Icon
                   name="check"
@@ -51,7 +55,7 @@ const Lemma = ({
             />
             <Popup
               position="top center"
-              content={<FormattedHTMLMessage id="i-dont-know-tooltip" />}
+              content={<FormattedHTMLMessage id="explain-i-dont-know-word" />}
               trigger={
                 <Icon
                   name="question"
@@ -66,4 +70,4 @@ const Lemma = ({
     )
 }
 
-export default Lemma
\ No newline at end of file
+export default Lemma
diff --git a/client/components/DictionaryHelp/index.js b/client/components/DictionaryHelp/index.js
index 564e7cc3d..feb4e94dc 100644
--- a/client/components/DictionaryHelp/index.js
+++ b/client/components/DictionaryHelp/index.js
@@ -165,10 +165,15 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
           {!inWordNestModal && words && words[translated.lemma]?.length > 0 &&
             (learningLanguage === 'Russian' || learningLanguage === 'Finnish') &&
             !clue && (
+                <Popup
+                    content={intl.formatMessage({ id: 'explain-wordnest-modal' })}
+                    trigger={
               <Button basic size="mini" onClick={()=> handleNestButtonClick(translated.lemma)}
                       data-cy="nest-button">
                 <img src={images.nestIcon} alt="nest icon" width="22" />
               </Button>
+                    }
+                />
             )}
         </div>
         </div>
@@ -226,7 +231,10 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
         <>
           <div style={{ marginBottom: '1em', width: '100%',
                         ...getTextStyle(learningLanguage) }}>
-            <Speaker word={parsedLemmas()[0]} />
+              <Popup
+                  content={intl.formatMessage({ id: 'explain-speaker-lemma' })}
+                  trigger={<Speaker word={parsedLemmas()[0]} />
+                          } />
             {maskSymbol || parsedLemmas()[0]}
           </div>
           <div className="additional-info">
@@ -252,7 +260,10 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
         <List.Item style={{ color: '#555555' }}>
           {!clue && !inWordNestModal && (
             <div style={{ width: '100%', ...getTextStyle(learningLanguage) }}>
-              <Speaker word={parsedLemmas()[0]} />
+                <Popup
+                    content={intl.formatMessage({ id: 'explain-speaker-lemma' })}
+                    trigger={<Speaker word={parsedLemmas()[0]} />}
+                />
               {maskSymbol || parsedLemmas()[0]}
             </div>
           )}
@@ -316,7 +327,10 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
                         ...getTextStyle(learningLanguage),
                       }}
                     >
-                      <Speaker word={surfaceWord} />
+                        <Popup
+                            content={intl.formatMessage({ id: 'explain-speaker-surface' })}
+                            trigger={<Speaker word={surfaceWord} />}
+                        />
                       <span style={{ color: '#2185D0' }}>{maskSymbol || surfaceWord}</span>
                     </div>
                   )}
diff --git a/client/components/Flashcards/FlashcardList/FlashcardListItem.js b/client/components/Flashcards/FlashcardList/FlashcardListItem.js
index 3b44c0a63..06d6ee729 100644
--- a/client/components/Flashcards/FlashcardList/FlashcardListItem.js
+++ b/client/components/Flashcards/FlashcardList/FlashcardListItem.js
@@ -81,7 +81,7 @@ const FlashcardListItem = ({ card, handleEdit }) => {
         </Accordion.Toggle>
         <Popup
           position="top center"
-          content={<FormattedMessage id="i-know-tooltip" />}
+          content={<FormattedMessage id="explain-i-know-word" />}
           trigger={
             <Icon
               name="check"
@@ -92,7 +92,7 @@ const FlashcardListItem = ({ card, handleEdit }) => {
         />
         <Popup
           position="top center"
-          content={<FormattedMessage id="i-dont-know-tooltip" />}
+          content={<FormattedMessage id="explain-i-dont-know-word" />}
           trigger={
             <Icon
               name="question"
diff --git a/client/components/LibraryView/LibrarySearch.js b/client/components/LibraryView/LibrarySearch.js
index 2b7450367..32250ed42 100644
--- a/client/components/LibraryView/LibrarySearch.js
+++ b/client/components/LibraryView/LibrarySearch.js
@@ -45,8 +45,10 @@ const LibrarySearch = ({ setDisplaySearchResults, setDisplayedStories, fluid })
   return (
     <div style={{ position: 'relative' }}>
       <Popup
-        content={intl.formatMessage({ id: 'explanation-library-search' })}
-        trigger={<Icon style={{ paddingRight: '0.5em' }} name="info circle" color="grey" />}
+          content={intl.formatMessage({ id: 'explain-library-search' })}
+          trigger={<Icon style={{ paddingRight: '0.5em' }}
+                         name="info circle"
+                         color="grey" />}
       />
       <Input
         action={{ icon: 'search', onClick: handleLibrarySearch, color: 'grey' }}