From d14fb2f60b4aa1514f90444cc602a655522fcbae Mon Sep 17 00:00:00 2001 From: Priyansh Shah Date: Wed, 16 Oct 2024 13:36:57 -0700 Subject: [PATCH 1/3] feat: changing pop-over x button for hover :) and adding padding to the popover to make it more visible --- apps/antalmanac/src/App.tsx | 72 +++++++++++++++++++++++++++++++++---- 1 file changed, 66 insertions(+), 6 deletions(-) diff --git a/apps/antalmanac/src/App.tsx b/apps/antalmanac/src/App.tsx index 5adf53d2e..c0f17c7c3 100644 --- a/apps/antalmanac/src/App.tsx +++ b/apps/antalmanac/src/App.tsx @@ -1,18 +1,19 @@ import './App.css'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import { CloseOutlined } from '@material-ui/icons'; +import { StylesObj, TourProvider } from '@reactour/tour'; import { SnackbarProvider } from 'notistack'; -import { useEffect } from 'react'; +import { MouseEventHandler, useEffect, useState } 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'; + const BrowserRouter = createBrowserRouter([ { @@ -49,6 +50,7 @@ export default function App() { }} styles={{ maskArea: (base, _) => ({ // The highlighted area @@ -67,7 +69,17 @@ export default function App() { color: 'black', borderRadius: 5, boxShadow: '0 0 10px #000', - padding: 20, + paddingTop: 20, + paddingBottom: 20, + paddingLeft: 25, + paddingRight: 35, + }), + controls: (base) => ({ + ...base, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginTop: 10, }), }} > @@ -80,3 +92,51 @@ export default function App() { ); } + +export const CloseButton = ({ + styles, + onClick, + disabled, +}: { + styles?: StylesObj; + onClick?: MouseEventHandler; + disabled?: boolean; +}) => { + const [isHovered, setIsHovered] = useState(false); + return ( + + ); +}; From b21103bf308f84c55377dd2fa8e84e8c13121d25 Mon Sep 17 00:00:00 2001 From: Priyansh Shah Date: Fri, 29 Nov 2024 03:36:26 -0800 Subject: [PATCH 2/3] Tour-Guide not going out of bounds and making the X button more visible --- apps/antalmanac/src/App.tsx | 63 +++---------------- .../src/components/buttons/CloseButton.tsx | 53 ++++++++++++++++ 2 files changed, 63 insertions(+), 53 deletions(-) create mode 100644 apps/antalmanac/src/components/buttons/CloseButton.tsx diff --git a/apps/antalmanac/src/App.tsx b/apps/antalmanac/src/App.tsx index c0f17c7c3..dce721485 100644 --- a/apps/antalmanac/src/App.tsx +++ b/apps/antalmanac/src/App.tsx @@ -1,9 +1,8 @@ import './App.css'; -import { CloseOutlined } from '@material-ui/icons'; -import { StylesObj, TourProvider } from '@reactour/tour'; +import { TourProvider } from '@reactour/tour'; import { SnackbarProvider } from 'notistack'; -import { MouseEventHandler, useEffect, useState } from 'react'; +import { useEffect } from 'react'; import ReactGA4 from 'react-ga4'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; @@ -14,6 +13,7 @@ import AppThemev5Provider from './providers/Themev5'; import Feedback from './routes/Feedback'; import Home from './routes/Home'; +import { CloseButton } from '$components/buttons/CloseButton'; const BrowserRouter = createBrowserRouter([ { @@ -50,7 +50,7 @@ export default function App() { }} + components={{ Close: (props) => }} styles={{ maskArea: (base, _) => ({ // The highlighted area @@ -69,14 +69,19 @@ export default function App() { color: 'black', borderRadius: 5, boxShadow: '0 0 10px #000', + marginLeft: 10, + marginRight: 10, + marginTop: 10, + marginBottom: 10, paddingTop: 20, paddingBottom: 20, - paddingLeft: 25, + paddingLeft: 35, paddingRight: 35, }), controls: (base) => ({ ...base, display: 'flex', + width: '100%', justifyContent: 'space-between', alignItems: 'center', marginTop: 10, @@ -92,51 +97,3 @@ export default function App() { ); } - -export const CloseButton = ({ - styles, - onClick, - disabled, -}: { - styles?: StylesObj; - onClick?: MouseEventHandler; - disabled?: boolean; -}) => { - const [isHovered, setIsHovered] = useState(false); - return ( - - ); -}; diff --git a/apps/antalmanac/src/components/buttons/CloseButton.tsx b/apps/antalmanac/src/components/buttons/CloseButton.tsx new file mode 100644 index 000000000..1d4cde3d3 --- /dev/null +++ b/apps/antalmanac/src/components/buttons/CloseButton.tsx @@ -0,0 +1,53 @@ +import { Close as CloseIcon } from '@mui/icons-material'; +import { IconButton } from '@mui/material'; +import { MouseEventHandler } from 'react'; + +export const CloseButton = ({ + styles, + onClick, + disabled, + ...props +}: { + styles?: React.CSSProperties; + onClick?: MouseEventHandler; + disabled?: boolean; +}) => { + return ( + + + + ); +}; From e379f77d9432d3950aed57342e6becd8a7aa67aa Mon Sep 17 00:00:00 2001 From: Priyansh Shah Date: Fri, 29 Nov 2024 03:38:51 -0800 Subject: [PATCH 3/3] adding comments to make it a bit more readable --- apps/antalmanac/src/App.tsx | 4 +++- apps/antalmanac/src/components/buttons/CloseButton.tsx | 5 +---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/antalmanac/src/App.tsx b/apps/antalmanac/src/App.tsx index dce721485..80631d902 100644 --- a/apps/antalmanac/src/App.tsx +++ b/apps/antalmanac/src/App.tsx @@ -50,7 +50,9 @@ export default function App() { }} + // 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) => }} styles={{ maskArea: (base, _) => ({ // The highlighted area diff --git a/apps/antalmanac/src/components/buttons/CloseButton.tsx b/apps/antalmanac/src/components/buttons/CloseButton.tsx index 1d4cde3d3..1213acab0 100644 --- a/apps/antalmanac/src/components/buttons/CloseButton.tsx +++ b/apps/antalmanac/src/components/buttons/CloseButton.tsx @@ -1,14 +1,12 @@ 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 = ({ - styles, onClick, disabled, ...props }: { - styles?: React.CSSProperties; onClick?: MouseEventHandler; disabled?: boolean; }) => { @@ -35,7 +33,6 @@ export const CloseButton = ({ '&:hover': { backgroundColor: '#0056b3', }, - ...styles, }} >