From ed3fb95c5115473f03cb907ca7950b58f82c810a Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Thu, 15 Aug 2024 16:03:44 +0200
Subject: [PATCH] improve text #2108

and make it more clear that you can edit file name
---
 src/renderer/src/components/OutSegTemplateEditor.tsx | 9 ++++++++-
 src/renderer/src/components/Settings.tsx             | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/OutSegTemplateEditor.tsx b/src/renderer/src/components/OutSegTemplateEditor.tsx
index c69d1665..4c98c062 100644
--- a/src/renderer/src/components/OutSegTemplateEditor.tsx
+++ b/src/renderer/src/components/OutSegTemplateEditor.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { WarningSignIcon, ErrorIcon, Button, IconButton, TickIcon, ResetIcon } from 'evergreen-ui';
 import { IoIosHelpCircle } from 'react-icons/io';
 import { motion, AnimatePresence } from 'framer-motion';
+import { FaEdit } from 'react-icons/fa';
 
 import { ReactSwal } from '../swal';
 import HighlightedText from './HighlightedText';
@@ -117,7 +118,12 @@ function OutSegTemplateEditor({ outSegTemplate, setOutSegTemplate, generateOutSe
     <motion.div style={{ maxWidth: 600 }} animate={{ margin: needToShow ? '1.5em 0' : 0 }}>
       <div>{outSegFileNames != null && t('Output name(s):', { count: outSegFileNames.length })}</div>
 
-      {outSegFileNames != null && <HighlightedText role="button" onClick={onShowClick} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: needToShow ? undefined : 'pointer' }}>{outSegFileNames[currentSegIndexSafe] || outSegFileNames[0] || '-'}</HighlightedText>}
+      {outSegFileNames != null && (
+        <HighlightedText role="button" onClick={onShowClick} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: needToShow ? undefined : 'pointer' }}>
+          {outSegFileNames[currentSegIndexSafe] || outSegFileNames[0] || '-'}
+          {!needToShow && <FaEdit style={{ fontSize: '.9em', marginLeft: '.4em', verticalAlign: 'middle' }} />}
+        </HighlightedText>
+      )}
 
       <AnimatePresence>
         {needToShow && (
@@ -127,6 +133,7 @@ function OutSegTemplateEditor({ outSegTemplate, setOutSegTemplate, generateOutSe
             animate={{ opacity: 1, height: 'auto', marginTop: '1em' }}
             exit={{ opacity: 0, height: 0, marginTop: 0 }}
           >
+            <div style={{ color: 'var(--gray11)', fontSize: '.8em' }}>{t('Output file name template')}:</div>
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '.2em' }}>
               <TextInput ref={inputRef} onChange={onTextChange} value={text} autoComplete="off" autoCapitalize="off" autoCorrect="off" />
 
diff --git a/src/renderer/src/components/Settings.tsx b/src/renderer/src/components/Settings.tsx
index 21057e61..3881d400 100644
--- a/src/renderer/src/components/Settings.tsx
+++ b/src/renderer/src/components/Settings.tsx
@@ -129,7 +129,7 @@ function Settings({
             <KeyCell>
               {t('Show export options screen before exporting?')}
               <div style={detailsStyle}>
-                {t('This gives you an overview of the export and allows you to customise more parameters before exporting.')}
+                {t('This gives you an overview of the export and allows you to customise more parameters before exporting, like changing the output file name.')}
               </div>
             </KeyCell>
             <td>