🐛 Fixes after UX review
jump to
@@ -64,13 +64,6 @@ onClick={() => onRedirect(`/auth/login`)}
> {t('event.add_to_my_events.login')} </Button> - <Button - id="AddToMyEventRegister" - onClick={() => onRedirect(`/auth/register`)} - color="primary" - > - {t('event.add_to_my_events.register')} - </Button> </DialogActions> </Dialog> );
@@ -25,7 +25,10 @@ tripAlertEntity?.attributes.enabled || false
); return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: isMobile ? 2 : 4}}> + <Container + maxWidth="sm" + sx={{mt: isMobile ? 15 : 11, mx: 0, px: isMobile ? 2 : 4}} + > {!canSetAlert() && ( <Box sx={{width: '480px', maxWidth: '100%', position: 'relative'}}> <LoginToAttend title={t('event.loginToSetAlert')} />
@@ -24,8 +24,8 @@ onClick: () => {
onAdd(true); }, id: 'AddToMyEventsTab', + icon: 'library_add', }, - {divider: true}, { label: t('event.actions.share'), onClick: () =>@@ -33,27 +33,16 @@ share({
title: `Caroster ${event.name}`, }), id: 'ShareEvent', + icon: 'share', }, - {divider: true}, { label: t('menu.login'), onClick: () => { router.push(`/auth/login?redirectPath=${router.asPath}`); }, id: 'SignInTab', - }, - { - label: t('menu.register'), - onClick: () => { - router.push({ - pathname: `/auth/register`, - query: {redirectPath: router.asPath}, - state: {event: eventId}, - }); - }, - id: 'SignUpTab', + icon: 'login', }, - {divider: true}, ]; const loggedMenuActions = [@@ -78,7 +67,6 @@ }),
id: 'ShareEvent', icon: 'share', }, - {divider: true}, ]; return connected ? loggedMenuActions : noUserMenuActions;
@@ -81,10 +81,10 @@ };
const validActions = [ ...actions, - supportItem, languageMenuItem, logoutMenuItem, {divider: true}, + supportItem, aboutMenuItem, sourceCodeItem, ].filter(Boolean);
@@ -105,7 +105,7 @@
<GenericMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} - actions={[...actions, {divider: true}]} + actions={actions} /> </> )}
@@ -3,7 +3,6 @@ import MapController from './MapController';
import MapWrapper from './MapWrapper'; import useMapStore from '../../stores/useMapStore'; import Bounds from './Bounds'; -import MapActions from './MapActions'; const TOKEN_FREE_TILES_URL = process.env.TOKEN_FREE_TILES_URL ||@@ -27,7 +26,6 @@ attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}
/> <MapController /> {markers} - <MapActions /> </MapContainer> </MapWrapper> );
@@ -9,13 +9,14 @@ const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <Box + id="map-actions" zIndex={400} - position="relative" - top={isMobile ? 120 : 100} - left={25} - right={25} + position="absolute" + top={isMobile ? 95 : 64} + left={isMobile ? 0 : 25} + right={isMobile ? 0 : 25} > - <Box component={Paper} p={1} maxWidth={`calc(100vw - 50px)`} width={350}> + <Box component={Paper} p={1} width={isMobile ? '100%' : 350}> <SearchField /> </Box> </Box>
@@ -5,14 +5,14 @@ import theme from '../../theme';
import useMediaQuery from '@mui/material/useMediaQuery'; const MapWrapper = ({children}: PropsWithChildren) => { - const mobile = useMediaQuery(theme.breakpoints.down('md')); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <ThemeProvider theme={theme}> <Box id="map" width="100%" - height={mobile ? '60vh' : '50vh'} - sx={{position: 'relative'}} + height={isMobile ? '60vh' : '50vh'} + pt={isMobile ? 12 : 0} > {children} </Box>
@@ -6,7 +6,9 @@ const ClientMap = dynamic(() => import('./Map'), {
ssr: false, loading: () => ( <MapWrapper> - <CircularProgress sx={{position: 'absolute', margin: '0 auto', top: '50%'}}/> + <CircularProgress + sx={{position: 'absolute', margin: '0 auto', top: '50%'}} + /> </MapWrapper> ), });
@@ -21,6 +21,7 @@ import FilterByDate from './FilterByDate';
import {Button, Icon, useMediaQuery} from '@mui/material'; import useTravelsStore from '../../stores/useTravelsStore'; import AddTravelButton from '../AddTravelButton'; +import MapActions from '../MapActions'; interface Props {}@@ -96,10 +97,11 @@
return ( <> {showMap && <Map />} + <MapActions /> <Box px={3} pb={2} - pt={showMap ? 2 : isMobile ? 15 : 10} + pt={showMap ? 2 : isMobile ? 22 : 18} display="flex" gap={2} maxWidth="100%"
@@ -86,7 +86,7 @@ };
if (!tripAlerts || tripAlerts.length === 0) return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: mobile ? 2 : 4}}> + <Container maxWidth="sm" sx={{mt: 15, mx: 0, px: mobile ? 2 : 4}}> <Paper sx={{width: '480px', maxWidth: '100%'}}> <ListHeader /> <Box p={2} textAlign="center">
@@ -82,7 +82,10 @@ }
}; return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: mobile ? 2 : 4}}> + <Container + maxWidth="sm" + sx={{mt: mobile ? 15 : 11, mx: 0, px: mobile ? 2 : 4}} + > <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}> <Box p={2}> <IconButton
@@ -33,10 +33,8 @@ "event.actions.add_to_my_events": "Zu meinen Veranstaltungen hinzufügen",
"event.actions.noShareCapability": "Ihr Browser kann die Seite weder freigeben noch in die Zwischenablage kopieren. Bitte kopieren Sie stattdessen die URL der Seite.", "event.actions.share": "Den Caroster teilen", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", "event.add_to_my_events.title": "Sie müssen eingeloggt sein", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Ihre E-Mail", "event.creation.date": "Datum der Veranstaltung", "event.creation.description": "Beschreibung",@@ -88,7 +86,6 @@ "menu.language": "Sprache ändern",
"menu.login": "Anmeldung", "menu.logout": "Abmeldung", "menu.profile": "Mein Profil", - "menu.register": "Registrierung", "notification.type.ContactTripCreator.content": "Wenden Sie sich an den Fahrer, um Ihre Fahrt zu organisieren.", "notification.type.DeletedFromTrip.content": "Sie wurden von einer Fahrt entfernt.", "notification.type.DeletedTrip.content": "Eine Fahrt wurde entfernt.",
@@ -34,13 +34,11 @@ "event.actions.copied": "The link has been copied to your clipboard",
"event.actions.noShareCapability": "Your browser cannot share nor copy to clipboard, please copy the page's URL instead.", "event.actions.share": "Share the Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "To add <bold>{{eventName}}</bold> to your carosters you must be logged in or create an account.", + "event.add_to_my_events.text": "To add <bold>{{eventName}}</bold> to your carosters you must be logged in.", "event.add_to_my_events.title": "You must be logged in", "event.linked.goEvent": "Go", "event.linked.returnEvent": "Return", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Your e-mail", "event.creation.date": "Date of the event", "event.creation.description": "Description",@@ -110,7 +108,6 @@ "menu.login": "Login",
"menu.logout": "Logout", "menu.new_event": "Create a Caroster", "menu.profile": "My profile", - "menu.register": "Sign-Up", "notification.type.AddedAsAdmin.content": "You have been promoted as administrator to the event.", "notification.type.ContactTripCreator.content": "Contact the driver to organize your trip.", "notification.type.DeletedFromTrip.content": "You have been removed from a trip.",@@ -205,7 +202,6 @@ "signin.sendLink": "Send login link",
"signin.check_email": "A login link has been sent to your email. Please check your email to complete the login.", "signin.or": "OR", "signin.password": "Password", - "signin.register": "$t(menu.register)", "signin.title": "Sign in", "signin.withGoogle": "Use a Google account", "signup.create": "Create an account",
@@ -30,13 +30,11 @@ "event.actions.copied": "Le lien a été copié dans votre presse-papier",
"event.actions.noShareCapability": "Votre navigateur ne permet pas de partager ou de copier dans le presse papier, veuillez copier l'URL de la page.", "event.actions.share": "Partager le Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "Pour ajouter <bold>{{eventName}}</bold> à vos carosters vous devez être connecté ou créer un compte.", + "event.add_to_my_events.text": "Pour ajouter <bold>{{eventName}}</bold> à vos carosters vous devez être connecté.", "event.add_to_my_events.title": "Vous devez être connecté", "event.linked.goEvent": "Aller", "event.linked.returnEvent": "Retour", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Votre e-mail", "event.creation.date": "Date de l'événement", "event.creation.description": "Description",@@ -107,7 +105,6 @@ "menu.login": "Se connecter",
"menu.logout": "Se déconnecter", "menu.new_event": "Créer un caroster", "menu.profile": "Mon profil", - "menu.register": "Créer un compte", "notification.type.AddedAsAdmin.content": "Vous avez été promu administrateur.", "notification.type.ContactTripCreator.content": "Contactez la conductrice ou le conducteur pour organiser votre trajet.", "notification.type.DeletedFromTrip.content": "Vous avez été retiré(e) d'un trajet.",
@@ -32,10 +32,8 @@ "event.actions.add_to_my_events": "Aggiungi ai miei eventi",
"event.actions.copied": "Il link è stato copiato nella clipboard", "event.actions.noShareCapability": "La funzione di copia o condivisione non è disponibile sul tuo browser. Puoi però copiare l'URL della pagina.", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", "event.add_to_my_events.title": "Devi effettuare l'accesso", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.address": "Indirizzo dell'evento", "event.creation.creator_email": "Il tuo indirizzo email", "event.creation.date": "Data dell'evento",@@ -155,7 +153,6 @@ "menu.login": "Accedi",
"menu.logout": "Esci", "menu.new_event": "Crea un Caroster", "menu.profile": "Il mio profilo", - "menu.register": "Registrati", "notification.type.ContactTripCreator.content": "Contatta il conducente per accordarti sul tuo passaggio.", "notification.type.DeletedFromTrip.content": "Sei stato/a rimosso/a da un passaggio.", "notification.type.DeletedTrip.content": "Un passaggio è stato rimosso.",
@@ -34,11 +34,9 @@ "event.actions.copied": "De link is gekopieerd naar het klembord",
"event.actions.noShareCapability": "Uw browser heeft geen klembordondersteuning - kopieer de pagina-url.", "event.actions.share": "Delen het Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "U kunt <bold>{{eventName}}</bold> alleen toevoegen aan uw carosters als u bent ingelogd.", + "event.add_to_my_events.text": "U kunt <bold>{{eventName}}</bold> alleen toevoegen aan uw carosters als.", "event.add_to_my_events.title": "U dient ingelogd te zijn", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Mijn e-mailadres", "event.creation.date": "Afspraakdatum", "event.creation.description": "Beschrijving",@@ -98,7 +96,6 @@ "menu.login": "Inloggen",
"menu.logout": "Uitloggen", "menu.new_event": "Caroster aanmaken", "menu.profile": "Mijn profiel", - "menu.register": "Registreren", "notification.type.AddedAsAdmin.content": "U bent toegevoegd als beheerder van de afspraak.", "notification.type.ContactTripCreator.content": "Neem contact op met de bestuurder om de reis te organiseren.", "notification.type.DeletedFromTrip.content": "U bent verwijderd uit een reis.",
@@ -56,7 +56,6 @@ onClick: () => router.push('/profile'),
id: 'ProfileTabs', icon: 'account_circle', }, - {divider: true}, { label: t('menu.new_event'), onClick: () => router.push('/new'),
@@ -128,6 +128,7 @@ mb: 11,
mx: 0, [theme.breakpoints.down('md')]: { p: 2, + mt: 13, }, }} >
@@ -48,6 +48,7 @@ mb: 11,
mx: 0, [theme.breakpoints.down('md')]: { p: 2, + mt: 13, }, }} >
@@ -103,11 +103,6 @@ textAlign: 'center',
}} > <NextLink href="/auth/login" passHref> - <Button variant="text"> - {t('event.creation.addFromAccount.actions.register')} - </Button> - </NextLink> - <NextLink href="/auth/login" passHref> <Button color="primary"> {t('event.creation.addFromAccount.actions.login')} </Button>