make more consistent close button

src/renderer/src/App.tsx

@@ -643,7 +643,7 @@ function App() {
   }, [showNotification]);
 
   const areWeCutting = useMemo(() => segmentsToExport.some(({ start, end }) => isCuttingStart(start) || isCuttingEnd(end, fileDuration)), [fileDuration, segmentsToExport]);
-  const needSmartCut = !!(areWeCutting && enableSmartCut);
+  const needSmartCut = areWeCutting && enableSmartCut;
 
   const {
     concatFiles, html5ifyDummy, cutMultiple, concatCutSegments, html5ify, fixInvalidDuration, extractStreams, tryDeleteFiles,

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

@@ -0,0 +1,26 @@
+.close-button {
+  all: unset;
+  position: absolute;
+  padding: .5em;
+  margin: .2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 100%;
+  font-size: 1.3em;
+
+  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;
+}
+
+.close-button:hover {
+  background-color: var(--gray-4);
+  transform: rotate(180deg);
+}
+
+.close-button:focus {
+  border: .1em solid var(--gray-4);
+}

src/renderer/src/components/CloseButton.tsx

@@ -0,0 +1,14 @@
+import { FaTimes } from 'react-icons/fa';
+import { DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
+
+import styles from './CloseButton.module.css';
+import i18n from '../i18n';
+
+export default function CloseButton({ type = 'button', ...props }: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) {
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading, react/button-has-type
+    <button type={type} className={styles['close-button']} title={i18n.t('Close')} aria-label={i18n.t('Close')} {...props}>
+      <FaTimes />
+    </button>
+  );
+}

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

@@ -45,32 +45,6 @@
   box-shadow: 0 0 1em .3em var(--black-a2);
 }
 
-.close {
-  all: unset;
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  cursor: pointer;
-  border-radius: 100%;
-  height: 2em;
-  width: 2em;
-  border: .1em solid transparent;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gray-12);
-  background-color: none;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.close:hover {
-  background-color: var(--gray-4);
-}
-
-.close:focus {
-  border: .1em solid var(--gray-4);
-}
-
 @keyframes overlayShow {
   from {
     opacity: 0;

src/renderer/src/components/Dialog.tsx

@@ -1,10 +1,9 @@
-import { FaTimes } from 'react-icons/fa';
 import { DetailedHTMLProps, DialogHTMLAttributes, useCallback, useEffect, forwardRef, useRef } from 'react';
 import invariant from 'tiny-invariant';
 
 import styles from './Dialog.module.css';
 import Button, { ButtonProps } from './Button';
-import i18n from '../i18n';
+import CloseButton from './CloseButton';
 
 
 type Props = Omit<DetailedHTMLProps<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, 'open'> & {
@@ -48,9 +47,7 @@ const Dialog = forwardRef<HTMLDialogElement, Props>(({ children, autoOpen, onClo
       {children}
 
       <form method="dialog">
-        <Button type="submit" className={styles['close']} aria-label={i18n.t('Close')}>
-          <FaTimes />
-        </Button>
+        <CloseButton type="submit" style={{ top: 0, right: 0 }} />
       </form>
     </dialog>
   );

src/renderer/src/components/ExportConfirm.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, Dispatch, SetStateAction, memo, useCallback, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { WarningSignIcon, CrossIcon, InfoSignIcon } from 'evergreen-ui';
+import { WarningSignIcon, InfoSignIcon } from 'evergreen-ui';
 import { FaRegCheckCircle } from 'react-icons/fa';
 import i18n from 'i18next';
 import { useTranslation, Trans } from 'react-i18next';
@@ -28,6 +28,7 @@ import { AvoidNegativeTs, PreserveMetadata } from '../../../../types';
 import TextInput from './TextInput';
 import { UseSegments } from '../hooks/useSegments';
 import Warning from './Warning';
+import CloseButton from './CloseButton';
 
 
 const boxStyle: CSSProperties = { margin: '15px 15px 50px 15px', borderRadius: 10, padding: '10px 20px', minHeight: 500, position: 'relative' };
@@ -245,10 +246,10 @@ function ExportConfirm({
           >
             <div style={{ margin: 'auto' }}>
               <div style={boxStyle} className={styles['box']}>
-                <CrossIcon size={24} style={{ position: 'absolute', right: 0, top: 0, padding: 15, boxSizing: 'content-box', cursor: 'pointer' }} role="button" onClick={onClosePress} />
-
                 <h1 style={{ textTransform: 'uppercase', fontSize: '1.4em', marginTop: 0, marginBottom: '.5em' }}>{t('Export options')}</h1>
 
+                <CloseButton type="submit" style={{ top: 0, right: 0 }} onClick={onClosePress} />
+
                 <table className={styles['options']}>
                   <tbody>
                     {notices.map(({ warning, text }) => (

src/renderer/src/components/Sheet.module.css

@@ -17,22 +17,3 @@
 :global(.dark-theme) .sheet {
   background: var(--black-a11);
 }
-
-.close {
-  position: absolute;
-  padding: .5em;
-  margin: .2em;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-  border-radius: 100%;
-  font-size: 1.3em;
-
-  color: var(--gray-12);
-  background-color: none;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.close:hover {
-  background-color: var(--gray-4);
-}

src/renderer/src/components/Sheet.tsx

@@ -1,9 +1,8 @@
 import { CSSProperties, ReactNode, memo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { useTranslation } from 'react-i18next';
-import { FaTimes } from 'react-icons/fa';
 
 import styles from './Sheet.module.css';
+import CloseButton from './CloseButton';
 
 
 function Sheet({ visible, onClosePress, children, maxWidth = 800, style }: {
@@ -13,8 +12,6 @@ function Sheet({ visible, onClosePress, children, maxWidth = 800, style }: {
   maxWidth?: number | string,
   style?: CSSProperties,
 }) {
-  const { t } = useTranslation();
-
   return (
     <AnimatePresence>
       {visible && (
@@ -29,7 +26,7 @@ function Sheet({ visible, onClosePress, children, maxWidth = 800, style }: {
               {children}
             </div>
 
-            <FaTimes role="button" className={styles['close']} onClick={onClosePress} title={t('Close')} />
+            <CloseButton style={{ top: 0, right: 0 }} onClick={onClosePress} />
           </div>
         </motion.div>
       )}