refactor away evergreen button

src/renderer/src/StreamsSelector.tsx

@@ -3,7 +3,7 @@ import { memo, useState, useMemo, useCallback, Dispatch, SetStateAction, CSSProp
 import { FaImage, FaCheckCircle, FaPaperclip, FaVideo, FaVideoSlash, FaFileImport, FaVolumeUp, FaVolumeMute, FaBan, FaFileExport } from 'react-icons/fa';
 import { GoFileBinary } from 'react-icons/go';
 import { MdSubtitles } from 'react-icons/md';
-import { Checkbox, BookIcon, MoreIcon, Position, Popover, Menu, TrashIcon, EditIcon, InfoSignIcon, IconButton, Heading, SortAscIcon, SortDescIcon, Dialog, Button, ForkIcon, WarningSignIcon } from 'evergreen-ui';
+import { Checkbox, BookIcon, MoreIcon, Position, Popover, Menu, TrashIcon, EditIcon, InfoSignIcon, IconButton, Heading, SortAscIcon, SortDescIcon, Dialog, ForkIcon, WarningSignIcon } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 
@@ -18,6 +18,7 @@ import { FFprobeChapter, FFprobeFormat, FFprobeStream } from '../../../ffprobe';
 import { CustomTagsByFile, FilesMeta, FormatTimecode, ParamsByStreamId, StreamParams } from './types';
 import useUserSettings from './hooks/useUserSettings';
 import tryShowGpsMap from './gps';
+import Button from './components/Button';
 
 
 const dispositionOptions = ['default', 'dub', 'original', 'comment', 'lyrics', 'karaoke', 'forced', 'hearing_impaired', 'visual_impaired', 'clean_effects', 'attached_pic', 'captions', 'descriptions', 'dependent', 'metadata'];
@@ -472,8 +473,8 @@ function StreamsSelector({
           <div style={{ marginBottom: '1em' }}><WarningSignIcon color="warning" /> {t('Note: Cutting and including external tracks at the same time does not yet work. If you want to do both, it must be done as separate operations. See github issue #896.')}</div>
         )}
 
-        <Button iconBefore={<FaFileImport size={16} />} marginBottom="1em" onClick={showAddStreamSourceDialog}>
+        <Button style={{ marginBottom: '1em', padding: '0.3em 1em' }} onClick={showAddStreamSourceDialog}>
-          {t('Include more tracks from other file')}
+          <FaFileImport style={{ verticalAlign: 'middle', marginRight: '.5em' }} /> {t('Include more tracks from other file')}
         </Button>
 
         {nonCopiedExtraStreams.length > 0 && (
@@ -486,8 +487,8 @@ function StreamsSelector({
         {externalFilesEntries.length > 0 && (
           <div style={{ marginBottom: '1em' }}>
             <div style={{ marginBottom: '.5em' }}>{t('When tracks have different lengths, do you want to make the output file as long as the longest or the shortest track?')}</div>
-            <Button iconBefore={shortestFlag ? SortDescIcon : SortAscIcon} onClick={() => setShortestFlag((value) => !value)}>
+            <Button style={{ padding: '0.3em 1em' }} onClick={() => setShortestFlag((value) => !value)}>
-              {shortestFlag ? t('Shortest') : t('Longest')}
+              {shortestFlag ? <><SortDescIcon verticalAlign="middle" marginRight=".5em" />{t('Shortest')}</> : <><SortAscIcon verticalAlign="middle" marginRight=".5em" />{t('Longest')}</>}
             </Button>
           </div>
         )}

src/renderer/src/components/AutoExportToggler.tsx

@@ -1,16 +1,19 @@
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, ForkIcon, DisableIcon } from 'evergreen-ui';
+import { ForkIcon, DisableIcon } from 'evergreen-ui';
 
 import useUserSettings from '../hooks/useUserSettings';
+import Button from './Button';
 
 function AutoExportToggler() {
   const { t } = useTranslation();
   const { autoExportExtraStreams, setAutoExportExtraStreams } = useUserSettings();
 
+  const Icon = autoExportExtraStreams ? ForkIcon : DisableIcon;
+
   return (
-    <Button intent={autoExportExtraStreams ? 'success' : 'danger'} iconBefore={autoExportExtraStreams ? ForkIcon : DisableIcon} onClick={() => setAutoExportExtraStreams(!autoExportExtraStreams)}>
+    <Button style={{ padding: '0.3em 1em' }} onClick={() => setAutoExportExtraStreams(!autoExportExtraStreams)}>
-      {autoExportExtraStreams ? t('Extract') : t('Discard')}
+      <Icon verticalAlign="middle" marginRight=".5em" />{autoExportExtraStreams ? t('Extract') : t('Discard')}
     </Button>
   );
 }

src/renderer/src/components/ValueTuner.tsx

@@ -1,10 +1,10 @@
 import { memo, useState, useCallback, ChangeEventHandler } from 'react';
-import { Button } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
 import styles from './ValueTuner.module.css';
 
 import Switch from './Switch';
+import Button from './Button';
 
 
 function ValueTuner({ title, value, setValue, onFinished, resolution, decimals, min: minIn = 0, max: maxIn = 1, resetToDefault }: {
@@ -63,8 +63,8 @@ function ValueTuner({ title, value, setValue, onFinished, resolution, decimals,
       </div>
 
       <div style={{ textAlign: 'right' }}>
-        <Button height={20} onClick={handleResetToDefaultClick}>{t('Default')}</Button>
+        <Button onClick={handleResetToDefaultClick}>{t('Default')}</Button>
-        <Button height={20} intent="success" onClick={onFinished}>{t('Done')}</Button>
+        <Button onClick={onFinished}>{t('Done')}</Button>
       </div>
     </div>
   );

src/renderer/src/components/Working.tsx

@@ -1,11 +1,11 @@
 import { memo } from 'react';
 import { motion } from 'framer-motion';
 import Lottie from 'react-lottie-player/dist/LottiePlayerLight';
-import { Button } from 'evergreen-ui';
 import { Trans } from 'react-i18next';
 
 import { primaryColor } from '../colors';
 import loadingLottie from '../7077-magic-flow.json';
+import Button from './Button';
 
 
 function Working({ text, progress, onAbortClick }: {
@@ -41,7 +41,7 @@ function Working({ text, progress, onAbortClick }: {
         )}
 
         <div style={{ marginTop: 5 }}>
-          <Button intent="danger" onClick={onAbortClick} height={20}><Trans>Abort</Trans></Button>
+          <Button onClick={onAbortClick} style={{ padding: '.5em 1em' }}><Trans>Abort</Trans></Button>
         </div>
       </motion.div>
     </div>