Beginner improvements #546

src/App.jsx

@@ -675,7 +675,7 @@ const App = memo(() => {
   const toggleMovFastStart = useCallback(() => setMovFastStart((val) => !val), []);
 
   const toggleSimpleMode = useCallback(() => setSimpleMode((v) => {
-    if (!hideAllNotifications) toast.fire({ text: v ? i18n.t('Simple mode has been disabled. You will now see also non-essential buttons') : i18n.t('Simple mode enabled. You will now see only the most essential buttons') });
+    if (!hideAllNotifications) toast.fire({ text: v ? i18n.t('Advanced view has been enabled. You will now also see non-essential buttons and functions') : i18n.t('Advanced view disabled. You will now see only the most essential buttons and functions') });
     return !v;
   }), [hideAllNotifications]);
 

src/NoFileLoaded.jsx

@@ -19,14 +19,12 @@ const NoFileLoaded = memo(({ topBarHeight, bottomBarHeight, mifiLink, toggleHelp
         Press <kbd>H</kbd> for help
       </div>
 
-      <div style={{ fontSize: '3vmin', color: '#ccc' }}><kbd>←</kbd> <kbd>→</kbd> to seek timeline</div>
-
-      <div style={{ fontSize: '3vmin', color: '#ccc' }}>
+      <div style={{ fontSize: '3vmin', color: '#ccc', cursor: 'pointer' }}>
         <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints
       </div>
 
-      <div style={{ fontSize: '3vmin', color: '#ccc' }}>
-        <SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} style={{ verticalAlign: 'middle' }} size={16} /> to toggle simple mode
+      <div style={{ fontSize: '3vmin', color: '#ccc', cursor: 'pointer' }} role="button" onClick={toggleSimpleMode}>
+        <SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} style={{ verticalAlign: 'middle' }} size={16} /> {simpleMode ? 'to show advanced view' : 'to show simple view'}
       </div>
 
 

src/components/SimpleModeButton.jsx

@@ -10,7 +10,7 @@ const SimpleModeButton = memo(({ simpleMode, toggleSimpleMode, size = 20, style
 
   return (
     <FaBaby
-      title={t('Simple mode')}
+      title={t('Toggle advanced view')}
       size={size}
       style={{ color: simpleMode ? primaryTextColor : 'white', ...style }}
       onClick={toggleSimpleMode}