From b4ecd5dbd52d7ae79b6acedb4082f7bf786bee84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Roig?= <clm.roig@gmail.com>
Date: Mon, 3 Oct 2022 23:01:59 +0200
Subject: [PATCH] fix(trackers): fix bottom margin for speed dial button

---
 src/components/DefaultPageLayout/DefaultPageLayout.tsx | 10 ++++++----
 src/pages/Trackers/Trackers.tsx                        |  7 ++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/DefaultPageLayout/DefaultPageLayout.tsx b/src/components/DefaultPageLayout/DefaultPageLayout.tsx
index 9d9f0a53..db43abff 100644
--- a/src/components/DefaultPageLayout/DefaultPageLayout.tsx
+++ b/src/components/DefaultPageLayout/DefaultPageLayout.tsx
@@ -1,3 +1,4 @@
+import { Box, BoxProps } from '@mui/material';
 import { motion } from 'framer-motion';
 import { FC } from 'react';
 
@@ -18,15 +19,16 @@ const pageAnimation = {
   }
 };
 
-interface AnimatedPageProps {
+interface DefaultPageLayoutProps {
   children: React.ReactNode;
 }
-const AnimatedPage: FC<AnimatedPageProps> = ({ children }) => {
+const DefaultPageLayout: FC<DefaultPageLayoutProps & BoxProps> = (props) => {
+  const { children, ...boxProps } = props;
   return (
     <motion.div initial="initial" animate="animate" exit="exit" variants={pageAnimation}>
-      {children}
+      <Box {...boxProps}>{children}</Box>
     </motion.div>
   );
 };
 
-export default AnimatedPage;
+export default DefaultPageLayout;
diff --git a/src/pages/Trackers/Trackers.tsx b/src/pages/Trackers/Trackers.tsx
index 963c8fba..0e1b8a5a 100644
--- a/src/pages/Trackers/Trackers.tsx
+++ b/src/pages/Trackers/Trackers.tsx
@@ -72,7 +72,8 @@ function Trackers() {
 
   return (
     <>
-      <DefaultPageLayout>
+      {/* Add a little margin to avoid the speed dial button to overlap the last tracker card */}
+      <DefaultPageLayout sx={{ mb: 10 }}>
         <DateSelector date={selectedDate} setDate={handleSetDate} />
 
         {doneTrackers.length + hiddenTrackers.length + todoTrackers.length === 0 && (
@@ -120,9 +121,9 @@ function Trackers() {
         )}
       </DefaultPageLayout>
       <SpeedDial
-        direction="down"
+        direction="up"
         ariaLabel="SuiVie SpeedDial menu"
-        sx={{ position: 'fixed', top: 16 + 64, right: 16 }}
+        sx={{ position: 'fixed', bottom: 16, right: 16 }}
         icon={<SpeedDialIcon icon={<MoreVertIcon />} openIcon={<CloseIcon />} />}>
         {actions.map((action) => (
           <SpeedDialAction