Redesign Add favorite 2

map/src/App.js

@@ -1,5 +1,5 @@
-import { createContext, React, useCallback, useContext, useState } from 'react';
-import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
+import { createContext, React, useCallback, useContext, useMemo, useState } from 'react';
+import { createBrowserRouter, Outlet, RouterProvider, useNavigate } from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import GlobalFrame from './frame/GlobalFrame';
 import { AppContextProvider } from './context/AppContext';
@@ -106,71 +106,110 @@ const App = () => {
         }
     }
 
+    const router = useMemo(
+        () =>
+            createBrowserRouter(
+                [
+                    {
+                        path: '/',
+                        element: (
+                            <>
+                                <AppServices />
+                                <NavigateGlobal />
+                                <Outlet />
+                            </>
+                        ),
+                        children: [
+                            {
+                                path: MAIN_URL,
+                                element: <GlobalFrame />,
+                                children: [
+                                    {
+                                        path: LOGIN_URL,
+                                        element: <LoginMenu />,
+                                        children: [
+                                            {
+                                                path: PURCHASES_URL,
+                                                element: <PurchasesMenu />,
+                                                children: [{ path: ':key', element: <PurchaseInfo /> }],
+                                            },
+                                            { path: GARMIN_URL, element: <GarminConnectMenu /> },
+                                        ],
+                                    },
+                                    {
+                                        path: DELETE_ACCOUNT_URL,
+                                        element: <DeleteAccountDialog setDeleteAccountFlag={null} />,
+                                    },
+                                    {
+                                        path: SEARCH_URL,
+                                        element: <SearchMenu />,
+                                        children: [
+                                            { path: EXPLORE_URL, element: <ExploreMenu /> },
+                                            { path: POI_CATEGORIES_URL, element: <PoiCategoriesList /> },
+                                            { path: SEARCH_RESULT_URL, element: <SearchResults /> },
+                                        ],
+                                    },
+                                    { path: CONFIGURE_URL, element: <ConfigureMap /> },
+                                    {
+                                        path: WEATHER_URL,
+                                        element: <Weather />,
+                                        children: [{ path: WEATHER_FORECAST_URL, element: <WeatherForecastDetails /> }],
+                                    },
+                                    {
+                                        path: TRACKS_URL,
+                                        element: <TracksMenu />,
+                                        children: [
+                                            {
+                                                path: INFO_MENU_URL + ':filename',
+                                                element: <InformationBlock />,
+                                                children: [{ path: SHARE_MENU_URL, element: <ShareFileMenu /> }],
+                                            },
+                                        ],
+                                    },
+                                    { path: VISIBLE_TRACKS_URL, element: <VisibleTracks /> },
+                                    {
+                                        path: FAVORITES_URL,
+                                        element: <FavoritesMenu />,
+                                        children: [
+                                            {
+                                                path: INFO_MENU_URL + ':favgroup/:favname',
+                                                element: <InformationBlock />,
+                                            },
+                                            {
+                                                path: INFO_MENU_URL + ':filename' + '/' + SHARE_MENU_URL,
+                                                element: <ShareFileMenu />,
+                                            },
+                                        ],
+                                    },
+                                    { path: NAVIGATE_URL, element: <NavigationMenu /> },
+                                    { path: PLANROUTE_URL, element: <PlanRouteMenu /> },
+                                    { path: TRAVEL_URL, element: <TravelMenu /> },
+                                    { path: SETTINGS_URL, element: <SettingsMenu /> },
+                                    { path: SHARE_FILE_URL, element: <ShareFile /> },
+                                    { path: TRACK_ANALYZER_URL, element: <TrackAnalyzerMenu /> },
+                                    { path: POI_URL, element: <WptDetails /> },
+                                    { path: STOP_URL, element: <WptDetails /> },
+                                ],
+                            },
+                            { path: PRICING_URL, element: <PricingPage /> },
+                        ],
+                    },
+                ],
+                {
+                    // Enable React Router v7 features: concurrent transitions and correct relative splat path resolution
+                    future: { v7_startTransition: true, v7_relativeSplatPath: true },
+                }
+            ),
+        [resetKey]
+    );
+
     return (
         <ThemeProvider theme={muiTheme}>
             <ResetAppContext.Provider value={resetApp}>
                 <LoginContextProvider key={'login-' + resetKey}>
                     <AppContextProvider key={'app-' + resetKey}>
                         <MapContextProvider>
-                            <BrowserRouter
-                                key={'router-' + resetKey}
-                                // Enable React Router v7 features: concurrent transitions and correct relative splat path resolution
-                                future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
-                            >
-                                <AppServices />
-                                <NavigateGlobal />
-                                <Routes>
-                                    <Route path={MAIN_URL} element={<GlobalFrame />}>
-                                        <Route path={LOGIN_URL} element={<LoginMenu />}>
-                                            <Route path={PURCHASES_URL} element={<PurchasesMenu />}>
-                                                <Route path=":key" element={<PurchaseInfo />}></Route>
-                                            </Route>
-                                            <Route path={GARMIN_URL} element={<GarminConnectMenu />} />
-                                        </Route>
-                                        <Route
-                                            path={DELETE_ACCOUNT_URL}
-                                            element={<DeleteAccountDialog setDeleteAccountFlag={null} />}
-                                        />
-                                        <Route path={SEARCH_URL} element={<SearchMenu />}>
-                                            <Route path={EXPLORE_URL} element={<ExploreMenu />}></Route>
-                                            <Route path={POI_CATEGORIES_URL} element={<PoiCategoriesList />}></Route>
-                                            <Route path={SEARCH_RESULT_URL} element={<SearchResults />}></Route>
-                                        </Route>
-                                        <Route path={CONFIGURE_URL} element={<ConfigureMap />}></Route>
-                                        <Route path={WEATHER_URL} element={<Weather />}>
-                                            <Route
-                                                path={WEATHER_FORECAST_URL}
-                                                element={<WeatherForecastDetails />}
-                                            ></Route>
-                                        </Route>
-                                        <Route path={TRACKS_URL} element={<TracksMenu />}>
-                                            <Route path={INFO_MENU_URL + ':filename'} element={<InformationBlock />}>
-                                                <Route path={SHARE_MENU_URL} element={<ShareFileMenu />} />
-                                            </Route>
-                                        </Route>
-                                        <Route path={VISIBLE_TRACKS_URL} element={<VisibleTracks />}></Route>
-                                        <Route path={FAVORITES_URL} element={<FavoritesMenu />}>
-                                            <Route
-                                                path={INFO_MENU_URL + ':favgroup/:favname'}
-                                                element={<InformationBlock />}
-                                            />
-                                            <Route
-                                                path={INFO_MENU_URL + ':filename' + '/' + SHARE_MENU_URL}
-                                                element={<ShareFileMenu />}
-                                            />
-                                        </Route>
-                                        <Route path={NAVIGATE_URL} element={<NavigationMenu />}></Route>
-                                        <Route path={PLANROUTE_URL} element={<PlanRouteMenu />}></Route>
-                                        <Route path={TRAVEL_URL} element={<TravelMenu />}></Route>
-                                        <Route path={SETTINGS_URL} element={<SettingsMenu />}></Route>
-                                        <Route path={SHARE_FILE_URL} element={<ShareFile />}></Route>
-                                        <Route path={TRACK_ANALYZER_URL} element={<TrackAnalyzerMenu />}></Route>
-                                        <Route path={POI_URL} element={<WptDetails />}></Route>
-                                        <Route path={STOP_URL} element={<WptDetails />}></Route>
-                                    </Route>
-                                    <Route path={PRICING_URL} element={<PricingPage />}></Route>
-                                </Routes>
-                            </BrowserRouter>
+                            <RouterProvider router={router} />
                         </MapContextProvider>
                     </AppContextProvider>
                 </LoginContextProvider>

map/src/context/AppContext.js

@@ -207,6 +207,9 @@ export const AppContextProvider = (props) => {
         add: false,
         location: null,
     });
+
+    const [exitGuards, setExitGuards] = useState({});
+
     const [processingGroups, setProcessingGroups] = useState(false);
     const [favLoading, setFavLoading] = useState(false);
     const [removeFavGroup, setRemoveFavGroup] = useState(null);
@@ -555,6 +558,8 @@ export const AppContextProvider = (props) => {
                 setFavorites,
                 addFavorite,
                 setAddFavorite,
+                exitGuards,
+                setExitGuards,
                 localTracks,
                 setLocalTracks,
                 currentObjectType,

map/src/dialogs/dialog.module.css

@@ -37,6 +37,15 @@
     letter-spacing: 0.28px !important;
     text-transform: uppercase !important;
 }
+.contentText {
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px !important;
+    letter-spacing: 0.25px !important;
+    color: var(--text-secondary) !important;
+    align-self: stretch !important;
+    padding: 12px 0 !important;
+}
 /* 280px (.title width) + 24px * 2 (left/right padding from .title) */
 .dialog :global(.MuiPaper-root) {
     max-width: 328px !important;

map/src/dialogs/favorites/ExitWithoutSavingDialog.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import dialogStyles from '../dialog.module.css';
+
+export default function ExitWithoutSavingDialog({ open, onKeepEditing, onExit }) {
+    const { t } = useTranslation();
+
+    return (
+        <Dialog className={dialogStyles.dialog} open={open} onClose={onKeepEditing}>
+            <DialogTitle className={dialogStyles.title}>{t('web:exit_without_saving')}</DialogTitle>
+            <DialogContent className={dialogStyles.content}>
+                <DialogContentText className={dialogStyles.contentText}>
+                    {t('web:all_changes_will_be_lost')}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button id="se-exit-dialog-keep-editing" className={dialogStyles.button} onClick={onKeepEditing}>
+                    {t('web:keep_editing')}
+                </Button>
+                <Button id="se-exit-dialog-exit" className={dialogStyles.button} onClick={onExit}>
+                    {t('web:shared_string_exit')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

map/src/frame/components/btns/buttons.module.css

@@ -91,7 +91,7 @@
 }
 .primaryButton {
     display: flex !important;
-    padding: 6px 0px !important;
+    padding: 6px 12px !important;
     flex-direction: column !important;
     justify-content: center !important;
     align-items: center !important;

map/src/frame/components/items/ChevronItem.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ListItemIcon, ListItemText, MenuItem, Typography } from '@mui/material';
+import { ReactComponent as ChevronIcon } from '../../../assets/icons/ic_action_arrow_up.svg';
+import styles from './items.module.css';
+
+export default function ChevronItem({ id, icon = null, title, titleProps, value, onClick, disabled = false }) {
+    return (
+        <MenuItem id={id} className={`${styles.item} ${styles.itemChevron}`} onClick={onClick} disabled={disabled}>
+            {icon && <ListItemIcon className={styles.icon}>{icon}</ListItemIcon>}
+            <ListItemText>
+                <Typography className={styles.mainText} {...titleProps}>
+                    {title}
+                </Typography>
+            </ListItemText>
+            <div className={styles.itemChevronRight}>
+                {value !== undefined && <Typography className={styles.addInfo}>{value}</Typography>}
+                <ChevronIcon className={styles.sectionRowChevron} />
+            </div>
+        </MenuItem>
+    );
+}

map/src/frame/components/items/SelectItemRadio.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, ListItemText, MenuItem, Radio, Typography } from '@mui/material';
+import { Box, ListItemText, MenuItem, Typography } from '@mui/material';
+import SmallRadio from './SmallRadio';
 import styles from './items.module.css';
 import DividerWithMargin from '../dividers/DividerWithMargin';
 
@@ -34,7 +35,7 @@ export default function SelectItemRadio({
                             {title}
                         </Typography>
                         <Box className={styles.selectRadioControl}>
-                            <Radio checked={!!checked} onChange={handleRadioChange} />
+                            <SmallRadio checked={!!checked} onChange={handleRadioChange} />
                         </Box>
                     </Box>
                 </ListItemText>

map/src/frame/components/items/SmallRadio.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Radio } from '@mui/material';
+
+export default function SmallRadio({ checked, onChange, onClick, className }) {
+    return (
+        <Radio
+            checked={checked}
+            onChange={onChange}
+            onClick={onClick}
+            size="small"
+            className={className}
+        />
+    );
+}

map/src/frame/components/items/items.module.css

@@ -4,6 +4,15 @@
     gap: 24px !important;
     min-height: 48px !important;
 }
+.itemChevron {
+    padding-right: 12px !important;
+}
+.itemChevronRight {
+    display: flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+    flex-shrink: 0 !important;
+}
 .mainText {
     color: var(--text-primary) !important;
     font-size: 16px !important;
@@ -136,7 +145,7 @@
 .sectionRow {
     width: 360px !important;
     min-height: 48px !important;
-    padding: 12px 20px !important;
+    padding: 12px 12px 12px 16px !important;
     display: flex !important;
     align-items: center !important;
     justify-content: space-between !important;

map/src/infoblock/components/InformationBlock.jsx

@@ -101,10 +101,20 @@ export default function InformationBlock({
 
     // Close WptEditPanel when the user navigates to another object or switches context
     useEffect(() => {
-        ctx.setAddFavorite((prev) => {
-            if (!prev?.location && !prev?.editWpt) return prev;
-            return { ...prev, add: false, location: null, editTrack: false, editWpt: null, previewAppearance: null };
-        });
+        const close = () =>
+            ctx.setAddFavorite((prev) => {
+                if (!prev?.location && !prev?.editWpt) return prev;
+                return {
+                    ...prev,
+                    add: false,
+                    location: null,
+                    editTrack: false,
+                    editWpt: null,
+                    previewAppearance: null,
+                };
+            });
+        if (ctx.exitGuards.wptEdit?.hasChanges) return;
+        close();
     }, [ctx.selectedWpt, ctx.currentObjectType]);
 
     useEffect(() => {