improve UI #2606

src/renderer/src/StreamsSelector.tsx

@@ -271,12 +271,6 @@ const Stream = memo(({ filePath, stream, onToggle, toggleCopyStreamIds, copyStre
       </td>
 
       <td style={{ textAlign: 'right', fontSize: '1.1em' }}>
-        <Json5Dialog title={t('Track {{num}} info', { num: stream.index + 1 })} json={stream}>
-          <Button title={t('Track {{num}} info', { num: stream.index + 1 })}>
-            <FaInfoCircle style={{ verticalAlign: 'middle', padding: '.4em' }} />
-          </Button>
-        </Json5Dialog>
-
         <DropdownMenu.Root>
           <DropdownMenu.Trigger asChild>
             <Button><FaHamburger style={{ verticalAlign: 'middle', padding: '.4em' }} /></Button>
@@ -284,11 +278,20 @@ const Stream = memo(({ filePath, stream, onToggle, toggleCopyStreamIds, copyStre
 
           <DropdownMenu.Portal>
             <DropdownMenu.Content sideOffset={5}>
+              <Json5Dialog title={t('Track {{num}} info', { num: stream.index + 1 })} json={stream}>
+                <DropdownMenu.Item onSelect={(e) => e.preventDefault()}>
+                  <FaInfoCircle style={{ verticalAlign: 'middle', marginRight: '.3em' }} />
+                  {t('Track {{num}} info', { num: stream.index + 1 })}
+                </DropdownMenu.Item>
+              </Json5Dialog>
+
               <DropdownMenu.Item onClick={() => setEditingStream({ streamId: stream.index, path: filePath })}>
                 <FaEdit style={{ marginRight: '.3em' }} />
                 {t('Edit track metadata')}
               </DropdownMenu.Item>
 
+              <DropdownMenu.Separator />
+
               {onExtractStreamPress && (
                 <DropdownMenu.Item onClick={onExtractStreamPress}>
                   <FaFileExport style={{ marginRight: '.3em' }} />
@@ -361,7 +364,7 @@ function FileHeading({ path, formatData, chapters, onTrashClick, onEditClick, to
 
       <div style={{ flexGrow: 1 }} />
 
-      <div style={{ fontSize: '1.3em', marginBottom: '.2em' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '.2em', fontSize: '1.3em', marginBottom: '.2em' }}>
         {chapters && chapters.length > 0 && (
           <Json5Dialog title={t('Chapters')} json={chapters}>
             <Button title={t('Chapters')}><FaBook style={{ verticalAlign: 'middle' }} /></Button>

src/renderer/src/components/CloseButton.module.css

@@ -13,11 +13,19 @@
   border: .1em solid transparent;
   color: var(--gray-12);
   background-color: none;
-  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.close-button svg {
+  transition: transform 0.2s ease-in-out;
 }
 
 .close-button:hover {
   background-color: var(--gray-4);
+}
+
+/* need to rotate the inner svg because https://github.com/mifi/lossless-cut/issues/2606#issuecomment-3512693358 */
+.close-button:hover svg {
   transform: rotate(180deg);
 }
 

src/renderer/src/components/Dialog.module.css

@@ -1,7 +1,7 @@
 /* Keep in sync with AlertDialog.module.css */
 
 /* TODO
-- fix the close button and title on top?
+- fix the close button and title to the top?
 */
 
 .DialogOverlay {

src/renderer/src/components/ValueTuner.tsx

@@ -5,6 +5,7 @@ import styles from './ValueTuner.module.css';
 
 import Switch from './Switch';
 import Button from './Button';
+import { primaryColor } from '../colors';
 
 
 function ValueTuner({ title, value, setValue, onFinished, resolution, decimals, min: minIn = 0, max: maxIn = 1, resetToDefault }: {
@@ -62,9 +63,9 @@ function ValueTuner({ title, value, setValue, onFinished, resolution, decimals,
         <input style={{ width: '100%' }} type="range" min="0" max="1000" step="1" value={((value - min) / (max - min)) * resolution} onChange={onChange} />
       </div>
 
-      <div style={{ textAlign: 'right' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '.3em' }}>
         <Button onClick={handleResetToDefaultClick}>{t('Default')}</Button>
-        <Button onClick={onFinished}>{t('Done')}</Button>
+        <Button onClick={onFinished} style={{ backgroundColor: primaryColor, color: 'white' }}>{t('Done')}</Button>
       </div>
     </div>
   );