improve loader

src/renderer/src/components/Working.module.css

@@ -0,0 +1,24 @@
+.wrapper {
+  background: var(--whiteA4);
+}
+
+:global(.dark-theme) .wrapper {
+  background: var(--blackA4);
+}
+
+.loader-box {
+  max-width: 16em;
+  min-width: 13em;
+  border-radius: 1.5em;
+  padding: 2.5% 1% 1.7% 1%;
+  color: white;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  background: var(--blackA6);
+  box-shadow: var(--blackA6) 0 0 .7em 0;
+  border: 1px solid var(--whiteA5);
+  backdrop-filter: blur(7px);
+}

src/renderer/src/components/Working.tsx

@@ -3,9 +3,9 @@ import { motion } from 'framer-motion';
 import Lottie from 'react-lottie-player/dist/LottiePlayerLight';
 import { Trans } from 'react-i18next';
 
-import { primaryColor } from '../colors';
 import loadingLottie from '../7077-magic-flow.json';
 import Button from './Button';
+import styles from './Working.module.css';
 
 
 function Working({ text, progress, onAbortClick }: {
@@ -14,9 +14,9 @@ function Working({ text, progress, onAbortClick }: {
   onAbortClick: () => void
 }) {
   return (
-    <div style={{ position: 'absolute', bottom: 0, top: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    <div className={styles['wrapper']} style={{ position: 'absolute', bottom: 0, top: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <motion.div
-        style={{ background: primaryColor, boxShadow: `${primaryColor} 0px 0px 20px 25px`, borderRadius: 60, paddingBottom: 5, color: 'white', fontSize: 14, display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+        className={styles['loader-box']}
         initial={{ opacity: 0, scale: 0 }}
         animate={{ opacity: 1, scale: 1 }}
         exit={{ opacity: 0, scale: 0 }}
@@ -30,18 +30,18 @@ function Working({ text, progress, onAbortClick }: {
           />
         </div>
 
-        <div style={{ marginTop: 5 }}>
+        <div style={{ marginTop: '.7em', textAlign: 'center' }}>
           {text}...
         </div>
 
         {(progress != null) && (
-          <div style={{ marginTop: 5 }}>
+          <div style={{ marginTop: '.5em' }}>
             {`${(progress * 100).toFixed(1)} %`}
           </div>
         )}
 
-        <div style={{ marginTop: 5 }}>
+        <div style={{ marginTop: '1.5em' }}>
-          <Button onClick={onAbortClick} style={{ padding: '.5em 1em' }}><Trans>Abort</Trans></Button>
+          <Button onClick={onAbortClick} style={{ fontSize: '1.1em', padding: '.2em 1em' }}><Trans>Abort</Trans></Button>
         </div>
       </motion.div>
     </div>

src/renderer/src/hooks/useLoading.ts

@@ -6,7 +6,7 @@ import { abortFfmpegs } from '../ffmpeg';
 export default () => {
   const { t } = useTranslation();
 
-  const [working, setWorkingState] = useState<{ text: string, abortController?: AbortController | undefined }>();
+  const [working, setWorkingState] = useState<{ text: string, abortController?: AbortController | undefined } | undefined>();
 
   // Store "working" in a ref so we can avoid race conditions
   const workingRef = useRef(!!working);