From 1e003537ed2406c11c4eaed41cd585f53655dc97 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Wed, 6 Sep 2023 00:28:12 +0200
Subject: [PATCH] fade in advanced settings

---
 src/components/Settings.jsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 8af577b4..26524c12 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -2,6 +2,7 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 import { FaYinYang, FaKeyboard } from 'react-icons/fa';
 import { GlobeIcon, CleanIcon, CogIcon, Button, NumericalIcon, FolderCloseIcon, DocumentIcon, TimeIcon } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
 
 import CaptureFormatButton from './CaptureFormatButton';
 import AutoExportToggler from './AutoExportToggler';
@@ -16,8 +17,16 @@ import Select from './Select';
 import { getModifierKeyNames } from '../hooks/useTimelineScroll';
 
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const Row = (props) => <tr {...props} />;
+const Row = (props) => (
+  <motion.tr
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+    transition={{ duration: 0.5, ease: 'easeIn' }}
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    exit={{ opacity: 0 }}
+  />
+);
 // eslint-disable-next-line react/jsx-props-no-spreading
 const KeyCell = (props) => <td {...props} />;
 
@@ -99,7 +108,6 @@ const Settings = memo(({
             </td>
           </Row>
 
-
           {showAdvanced && (
             <Row>
               <KeyCell>