improve ui when file not opened

src/renderer/src/BottomBar.tsx

@@ -403,7 +403,7 @@ function BottomBar({
 
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', opacity: isFileOpened ? 1 : 0.5 }}>
         <div style={{ display: 'flex', alignItems: 'center', flexBasis: leftRightWidth }}>
           {!simpleMode && (
             <>
@@ -529,19 +529,19 @@ function BottomBar({
 
       <div
         className="no-user-select"
-        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '.2em .3em', gap: '.5em' }}
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '.1em .3em', gap: '.5em', height: '2em' }}
       >
         <InvertCutModeButton invertCutSegments={invertCutSegments} setInvertCutSegments={setInvertCutSegments} />
 
-        <div>
-          <SimpleModeButton style={{ verticalAlign: 'middle' }} />
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <SimpleModeButton />
 
           {simpleMode && (
-            <span role="button" onClick={toggleSimpleMode} style={{ fontSize: '.8em', marginLeft: '.1em' }}>{t('Toggle advanced view')}</span>
+            <div role="button" onClick={toggleSimpleMode} style={{ fontSize: '.8em', marginLeft: '.2em' }}>{t('Toggle advanced view')}</div>
           )}
         </div>
 
-        {!simpleMode && (
+        {isFileOpened && !simpleMode && (
           <>
             <div role="button" title={t('Zoom')} onClick={timelineToggleComfortZoom}>{Math.floor(zoom)}x</div>
 
@@ -564,7 +564,7 @@ function BottomBar({
           </>
         )}
 
-        {!simpleMode && hasVideo && (
+        {isFileOpened && !simpleMode && hasVideo && (
           <div onClick={increaseRotation} role="button">
             <MdRotate90DegreesCcw
               style={{ fontSize: '1.3em', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
@@ -574,7 +574,6 @@ function BottomBar({
           </div>
         )}
 
-
         <div style={{ flexGrow: 1 }} />
 
         {!simpleMode && isFileOpened && (
@@ -599,13 +598,17 @@ function BottomBar({
           </div>
         )}
 
-        <div role="button" onClick={toggleLoopSelectedSegments} title={t('Play selected segments in order')} style={loopSelectedSegmentsButtonStyle}>
-          <PlayPauseMode />
-        </div>
+        {isFileOpened && (
+          <div role="button" onClick={toggleLoopSelectedSegments} title={t('Play selected segments in order')} style={loopSelectedSegmentsButtonStyle}>
+            <PlayPauseMode />
+          </div>
+        )}
 
         {(!simpleMode || !exportConfirmEnabled) && <ToggleExportConfirm style={{ marginLeft: '.4em' }} />}
 
-        <ExportButton size={1.3} segmentsToExport={segmentsToExport} areWeCutting={areWeCutting} onClick={onExportPress} />
+        {isFileOpened && (
+          <ExportButton segmentsToExport={segmentsToExport} areWeCutting={areWeCutting} onClick={onExportPress} />
+        )}
       </div>
     </>
   );

src/renderer/src/components/ExportButton.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 import { FiScissors } from 'react-icons/fi';
 import { FaFileExport } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
@@ -8,11 +8,11 @@ import useUserSettings from '../hooks/useUserSettings';
 import { SegmentToExport } from '../types';
 
 
-function ExportButton({ segmentsToExport, areWeCutting, onClick, size = 1 }: {
+function ExportButton({ segmentsToExport, areWeCutting, onClick, style }: {
   segmentsToExport: SegmentToExport[],
   areWeCutting: boolean,
   onClick: () => void,
-  size?: number | undefined,
+  style?: CSSProperties,
 }) {
   const CutIcon = areWeCutting ? FiScissors : FaFileExport;
 
@@ -30,19 +30,18 @@ function ExportButton({ segmentsToExport, areWeCutting, onClick, size = 1 }: {
   const text = autoMerge && segmentsToExport && segmentsToExport.length > 1 ? t('Export+merge') : t('Export');
 
   return (
-    <div
+    <button
+      type="button"
       className={simpleMode ? 'export-animation' : undefined}
-      style={{ cursor: 'pointer', background: primaryColor, color: 'white', borderRadius: size * 5, paddingTop: size * 1, paddingBottom: size * 2.5, paddingLeft: size * 7, paddingRight: size * 7, fontSize: size * 13, whiteSpace: 'nowrap' }}
+      style={{ all: 'unset', cursor: 'pointer', background: primaryColor, color: 'white', borderRadius: '.3em', paddingBottom: '.1em', paddingLeft: '.2em', paddingRight: '.2em', whiteSpace: 'nowrap', ...style }}
       onClick={onClick}
       title={title}
-      role="button"
     >
       <CutIcon
-        style={{ verticalAlign: 'middle', marginRight: size * 4 }}
-        size={size * 15}
+        style={{ verticalAlign: 'middle', marginRight: '.2em' }}
       />
       {text}
-    </div>
+    </button>
   );
 }
 

src/renderer/src/components/ExportConfirm.tsx

@@ -294,7 +294,7 @@ function ExportConfirm({
       title={t('Export options')}
       onClosePress={onClosePress}
       renderButton={() => (
-        <ExportButton segmentsToExport={segmentsToExport} areWeCutting={areWeCutting} onClick={() => onExportConfirm()} size={1.7} />
+        <ExportButton segmentsToExport={segmentsToExport} areWeCutting={areWeCutting} onClick={() => onExportConfirm()} style={{ fontSize: '1.3em' }} />
       )}
       renderBottom={() => (
         <>