refactor sheets

src/HelpSheet.jsx

@@ -1,34 +1,23 @@
 import React, { memo } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
 import { FaClipboard, FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 
 import SetCutpointButton from './SetCutpointButton';
 import { toast } from './util';
 import { primaryTextColor } from './colors';
+import Sheet from './Sheet';
 
 const electron = window.require('electron');
 const { clipboard } = electron;
 
 const { githubLink } = electron.remote.require('./constants');
 
-const HelpSheet = memo(({
-  visible, onTogglePress, ffmpegCommandLog, currentCutSeg,
-}) => {
+const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSeg }) => {
   const { t } = useTranslation();
 
   return (
-    <AnimatePresence>
-      {visible && (
-        <motion.div
-          initial={{ scale: 0, opacity: 0.5 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0, opacity: 0 }}
-          className="help-sheet"
-        >
-          <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
-
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ background: '#6b6b6b', color: 'white' }}>
+      <div className="help-sheet">
         <h1>{t('Common problems')}</h1>
         <p>
           {t('Lossless cutting is not an exact science. For some codecs and files it just works. For others you may need to trial and error depending on the codec, keyframes etc to get the best cut.')}
@@ -105,9 +94,8 @@ const HelpSheet = memo(({
         ) : (
           <p>{t('The last executed ffmpeg commands will show up here after you run operations. You can copy them to clipboard and modify them to your needs before running on your command line.')}</p>
         )}
-        </motion.div>
-      )}
-    </AnimatePresence>
+      </div>
+    </Sheet>
   );
 });
 

src/SettingsSheet.jsx

@@ -1,25 +1,14 @@
 import React, { memo } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { motion, AnimatePresence } from 'framer-motion';
 import { Table } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
-const SettingsSheet = memo(({
-  visible, onTogglePress, renderSettings,
-}) => {
+import Sheet from './Sheet';
+
+const SettingsSheet = memo(({ visible, onTogglePress, renderSettings }) => {
   const { t } = useTranslation();
 
   return (
-    <AnimatePresence>
-      {visible && (
-        <motion.div
-          initial={{ scale: 0, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0, opacity: 0 }}
-          className="settings-sheet"
-        >
-          <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
-
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ background: 'white', color: 'black' }}>
       <Table style={{ marginTop: 40 }}>
         <Table.Head>
           <Table.TextHeaderCell>
@@ -33,9 +22,7 @@ const SettingsSheet = memo(({
           {renderSettings()}
         </Table.Body>
       </Table>
-        </motion.div>
-      )}
-    </AnimatePresence>
+    </Sheet>
   );
 });
 

src/Sheet.jsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { IoIosCloseCircleOutline } from 'react-icons/io';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const sheetStyle = {
+  padding: '1em 2em',
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  zIndex: 10,
+  overflowY: 'scroll',
+};
+
+const Sheet = memo(({ visible, onClosePress, style, children }) => (
+  <AnimatePresence>
+    {visible && (
+      <motion.div
+        initial={{ scale: 0, opacity: 0.5 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0, opacity: 0 }}
+        style={{ ...sheetStyle, ...style }}
+      >
+        <IoIosCloseCircleOutline role="button" onClick={onClosePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
+
+        {children}
+      </motion.div>
+    )}
+  </AnimatePresence>
+));
+
+export default Sheet;

src/main.css

@@ -19,35 +19,14 @@ body {
     cursor: default;
 }
 
-.help-sheet, .settings-sheet {
-  padding: 1em 2em;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 10;
-  overflow-y: scroll;
-}
-
-.help-sheet {
-  background: #6b6b6b;
-  color: white;
-}
-
-.settings-sheet {
-  background: white;
-  color: black;
-}
-
-.help-sheet h1, .settings-sheet h1 {
+.help-sheet h1 {
   font-size: 1.2em;
   margin-bottom: .5em;
   margin-top: 1.3em;
   text-transform: uppercase;
 }
 
-.help-sheet h2, .settings-sheet h2 {
+.help-sheet h2 {
   font-size: 1em;
   margin-bottom: .5em;
   text-transform: uppercase;