feat: changing pop-over x button for hover :) and adding padding to the popover to make it more visible

apps/antalmanac/src/App.tsx

@@ -1,18 +1,19 @@
 import './App.css';
 
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { TourProvider } from '@reactour/tour';
 import { SnackbarProvider } from 'notistack';
 import { useEffect } from 'react';
 import ReactGA4 from 'react-ga4';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import { TourProvider } from '@reactour/tour';
 import { undoDelete } from './actions/AppStoreActions';
 import AppQueryProvider from './providers/Query';
 import AppThemeProvider from './providers/Theme';
 import AppThemev5Provider from './providers/Themev5';
-
-import Home from './routes/Home';
 import Feedback from './routes/Feedback';
+import Home from './routes/Home';
+
+import { CloseButton } from '$components/buttons/CloseButton';
 
 const BrowserRouter = createBrowserRouter([
     {
@@ -49,6 +50,9 @@ export default function App() {
                     <TourProvider
                         steps={[] /** Will be populated by Tutorial component */}
                         padding={5}
+                        // React Tour allows adding custom components to the tour to which we can pass props
+                        // Or you can add styling to the existing components
+                        components={{ Close: (props) => <CloseButton {...props} /> }}
                         styles={{
                             maskArea: (base, _) => ({
                                 // The highlighted area
@@ -67,7 +71,22 @@ export default function App() {
                                 color: 'black',
                                 borderRadius: 5,
                                 boxShadow: '0 0 10px #000',
-                                padding: 20,
+                                marginLeft: 10,
+                                marginRight: 10,
+                                marginTop: 10,
+                                marginBottom: 10,
+                                paddingTop: 20,
+                                paddingBottom: 20,
+                                paddingLeft: 35,
+                                paddingRight: 35,
+                            }),
+                            controls: (base) => ({
+                                ...base,
+                                display: 'flex',
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginTop: 10,
                             }),
                         }}
                     >

apps/antalmanac/src/components/buttons/CloseButton.tsx

@@ -0,0 +1,50 @@
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { MouseEventHandler } from 'react';
+// Making a Custom MUI Close Button for the Tour Component
+export const CloseButton = ({
+    onClick,
+    disabled,
+    ...props
+}: {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+}) => {
+    return (
+        <IconButton
+            aria-label="Close Tour"
+            disabled={disabled}
+            onClick={onClick}
+            {...props}
+            sx={{
+                borderRadius: '50%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '3px',
+                backgroundColor: '#007bff',
+                cursor: 'pointer',
+                position: 'absolute',
+                top: '-15px',
+                right: '-15px',
+                width: '35px',
+                height: '35px',
+                transition: 'background 0.3s, opacity 0.3s',
+                '&:hover': {
+                    backgroundColor: '#0056b3',
+                },
+            }}
+        >
+            <CloseIcon
+                sx={{
+                    height: '20px',
+                    width: '20px',
+                    color: 'white',
+                    '&:hover': {
+                        color: '#d3d3d3',
+                    },
+                }}
+            />
+        </IconButton>
+    );
+};