From 71458e3983829f394cdc1f4c68fa292c6c7700db Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Mon, 3 Feb 2025 12:35:26 +0530
Subject: [PATCH] add tooltips to the recording options in preferences page

---
 jam-ui/src/components/page/JKAccountPreferences.js | 7 +++++--
 jam-ui/src/i18n/locales/en/account.json            | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/jam-ui/src/components/page/JKAccountPreferences.js b/jam-ui/src/components/page/JKAccountPreferences.js
index 900b7087f..16f188a9a 100644
--- a/jam-ui/src/components/page/JKAccountPreferences.js
+++ b/jam-ui/src/components/page/JKAccountPreferences.js
@@ -6,6 +6,7 @@ import { useAuth } from '../../context/UserAuth';
 import { updateUser } from '../../helpers/rest';
 import { toast } from 'react-toastify';
 import { useForm } from 'react-hook-form';
+import JKTooltip from '../common/JKTooltip';
 
 const JKAccountPreferences = () => {
   const { t } = useTranslation('account');
@@ -79,7 +80,8 @@ const JKAccountPreferences = () => {
                     value="1"
                     data-testid="recording_pref_my_audio"
                     onClick={() => setSelectedPref(1)} />
-                    <Label for="exampleSelect">{t('preferences.recording_preferences.options.my_audio')}</Label>
+                    <Label for="exampleSelect" className='mr-1'>{t('preferences.recording_preferences.options.my_audio')}</Label>
+                    <JKTooltip title={t('preferences.recording_preferences.options.my_audio_tooltip')} />
                   </FormGroup>
                   <FormGroup>
                     <Input
@@ -89,7 +91,8 @@ const JKAccountPreferences = () => {
                     value="2"
                     data-testid="recording_pref_my_audio_and_session_mix"
                     onClick={() => setSelectedPref(2)}  />
-                    <Label for="exampleSelect">{t('preferences.recording_preferences.options.my_audio_and_session_mix')}</Label>
+                    <Label for="exampleSelect" className='mr-1'>{t('preferences.recording_preferences.options.my_audio_and_session_mix')}</Label>
+                    <JKTooltip title={t('preferences.recording_preferences.options.my_audio_and_session_mix_tooltip')} />
                   </FormGroup>
                 </Form>
               </CardBody>
diff --git a/jam-ui/src/i18n/locales/en/account.json b/jam-ui/src/i18n/locales/en/account.json
index f21faf728..61d8d6f95 100644
--- a/jam-ui/src/i18n/locales/en/account.json
+++ b/jam-ui/src/i18n/locales/en/account.json
@@ -60,7 +60,9 @@
       "options": {
         "none": "Don't record anything on my computer",
         "my_audio": "Record my own audio tracks",
-        "my_audio_and_session_mix": "Record my own audio tracks and the session mix"
+        "my_audio_tooltip": "This will save each of your own tracks in high-quality format captured straight from your audio interface. This is a good option to use if you’re in a band and each band member has this preference selected, as each musician can share the high-quality recordings of their tracks with someone who then uses a DAW to mix/master a high-quality recording of the group’s performance.",
+        "my_audio_and_session_mix": "Record my own audio tracks and the session mix",
+        "my_audio_and_session_mix_tooltip": "As with the option above, this will save each of your own tracks in high-quality format captured straight from your audio interface, plus you’ll instantly have access to a session mix made from your high-quality tracks mixed with the streamed tracks of the other musicians, with the levels controlled by your personal mix settings."
       },
       "save_success": "Recording preference saved successfully.",
       "save_error": "Failed to save recording preference. Please try again later."