Update UI on the wayfinding page

packages/map-template/src/components/Search/Search.jsx

@@ -387,17 +387,19 @@ function Search({ onSetSize, isOpen }) {
                 {isKioskContext && showLegendButton && <button className='search__legend' onClick={() => setShowLegendDialog(true)}><Legend /></button>}
 
                 { /* Search field that allows users to search for locations (MapsIndoors Locations and external) */}
-
-                <SearchField
-                    ref={searchFieldRef}
-                    mapsindoors={true}
-                    placeholder={t('Search by name, category, building...')}
-                    results={locations => onResults(locations)}
-                    clicked={() => searchFieldClicked()}
-                    cleared={() => cleared()}
-                    category={selectedCategory}
-                    disabled={searchDisabled} // Disabled initially to prevent content jumping when clicking and changing sheet size.
-                />
+                <label>
+                    <span>{t('Search by name, category, building...')}</span>
+                    <SearchField
+                        ref={searchFieldRef}
+                        mapsindoors={true}
+                        placeholder={t('Search by name, category, building...')}
+                        results={locations => onResults(locations)}
+                        clicked={() => searchFieldClicked()}
+                        cleared={() => cleared()}
+                        category={selectedCategory}
+                        disabled={searchDisabled} // Disabled initially to prevent content jumping when clicking and changing sheet size.
+                    />
+                </label>
             </div>
 
 

packages/map-template/src/components/Search/Search.scss

@@ -47,4 +47,8 @@
         padding: var(--spacing-medium) var(--spacing-x-small) var(--spacing-medium) var(--spacing-x-small);
     }
 
+    span {
+        display: none;
+    }
+
 }

packages/map-template/src/components/Wayfinding/Wayfinding.jsx

@@ -402,21 +402,21 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction
     return (
         <div className="wayfinding" ref={wayfindingRef}>
             <div className="wayfinding__directions">
-                <div className="wayfinding__title">{t('Start wayfinding')}</div>
+                <div className="wayfinding__title">{t('Directions')}</div>
                 <button className="wayfinding__close"
                     onClick={() => closeWayfinding()}
                     aria-label="Close">
                     <CloseIcon />
                 </button>
                 <div className="wayfinding__locations">
-                    <label className="wayfinding__label">
-                        {t('From').toUpperCase()}
+                    <label>
+                        <span>{t('Choose departure')}</span>
                         <SearchField
                             ref={fromFieldRef}
                             mapsindoors={true}
                             google={selectedMapType === mapTypes.Google && searchExternalLocations}
                             mapbox={selectedMapType === mapTypes.Mapbox && searchExternalLocations}
-                            placeholder={t('Search by name, category, building...')}
+                            placeholder={t('Choose departure')}
                             results={locations => searchResultsReceived(locations, searchFieldIdentifiers.FROM)}
                             clicked={() => onSearchClicked(searchFieldIdentifiers.FROM)}
                             cleared={() => onSearchCleared(searchFieldIdentifiers.FROM)}
@@ -428,21 +428,20 @@ function Wayfinding({ onStartDirections, onBack, directionsToLocation, direction
                         className="wayfinding__switch">
                         <SwitchIcon />
                     </button>
-                    <label className="wayfinding__label">
-                        {t('To').toUpperCase()}
+                    <label>
+                        <span>{t('Choose destination')}</span>
                         <SearchField
                             ref={toFieldRef}
                             mapsindoors={true}
                             google={selectedMapType === mapTypes.Google && searchExternalLocations}
                             mapbox={selectedMapType === mapTypes.Mapbox && searchExternalLocations}
-                            placeholder={t('Search by name, category, building...')}
+                            placeholder={t('Choose destination')}
                             results={locations => searchResultsReceived(locations, searchFieldIdentifiers.TO)}
                             clicked={() => onSearchClicked(searchFieldIdentifiers.TO)}
                             cleared={() => onSearchCleared(searchFieldIdentifiers.TO)}
                             changed={() => onInputChanged(searchFieldIdentifiers.TO)}
                         />
                     </label>
-
                 </div>
             </div>
             {!hasFoundRoute && <p className="wayfinding__error">{t('No route found')}</p>}

packages/map-template/src/components/Wayfinding/Wayfinding.scss

@@ -3,7 +3,7 @@
 .wayfinding {
     color: var(--brand-colors-black-100);
     display: grid;
-    grid-template-rows: 238px min-content;
+    grid-template-rows: 190px min-content;
     min-height: 435px;
 
     &__directions {
@@ -47,14 +47,6 @@
         position: relative;
     }
 
-    &__label {
-        display: grid;
-        gap: var(--spacing-x-small);
-        font-size: var(--font-size-small);
-        color: var(--color-gray-70);
-        font-weight: var(--font-weight-large);
-    }
-
     &__use-current-position {
         padding: var(--spacing-medium);
         font-size: var(--font-size-medium);
@@ -169,7 +161,7 @@
         background: transparent;
         position: absolute;
         right: 0;
-        top: 80px;
+        top: 40px;
 
         &:hover {
             opacity: .8;
@@ -207,4 +199,12 @@
         background: var(--color-gray-10);
         border: 1px solid var(--color-gray-30);
     }
+
+    mi-search {
+        width: calc(100% - 48px);
+    }
+
+    span {
+        display: none;
+    }
 }

packages/map-template/src/i18n/da.js

@@ -58,6 +58,9 @@ const da = {
     'My position': 'Min position',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Slå "Tilgængelig rute" til for at få en rutevejledning uden trapper og rulletrapper.',
     'Go!': 'Go!',
+    'Directions': 'Rutevejledning',
+    'Choose departure': 'Vælg startpunkt',
+    'Choose destination': 'Vælg destination',
     // Venue selector
     'Venues': 'Venues',
     'Select venue': 'Vælg venue',

packages/map-template/src/i18n/de.js

@@ -58,6 +58,9 @@ const de = {
     'My position': 'Meine Position',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Schalte Barrierefrei ein, um Treppen und Rolltreppen zu vermeiden.',
     'Go!': 'Start!',
+    'Directions': 'Wegbeschreibung',
+    'Choose departure': 'Abfahrt wählen',
+    'Choose destination': 'Ziel wählen',
     // Venue selector
     'Venues': 'Standorte',
     'Select venue': 'Wähle Standort',

packages/map-template/src/i18n/en.js

@@ -58,6 +58,9 @@ const en = {
     'My position': 'My position',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Turn on Accessibility to get directions that avoid stairs and escalators.',
     'Go!': 'Go!',
+    'Directions': 'Directions',
+    'Choose departure': 'Choose departure',
+    'Choose destination': 'Choose destination',
     // Venue selector
     'Venues': 'Venues',
     'Select venue': 'Select venue',

packages/map-template/src/i18n/es.js

@@ -58,6 +58,9 @@ const es = {
     'My position': 'Mi posición',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Active Accesibilidad para obtener indicaciones que eviten escalares y escaleras mecánicas',
     'Go!': '¡Ir!',
+    'Directions': 'Instrucciones',
+    'Choose departure': 'Elige la salida',
+    'Choose destination': 'Elige destino',
     // Venue selector
     'Venues': 'Lugares',
     'Select venue': 'Seleccionar lugar',

packages/map-template/src/i18n/fr.js

@@ -58,6 +58,9 @@ const fr = {
     'My position': 'Ma position',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Activez l\'accessibilité pour obtenir des itinéraires qui évitent les escaliers.',
     'Go!': 'C\'est parti!',
+    'Directions': 'Instructions',
+    'Choose departure': 'Choisir le départ',
+    'Choose destination': 'Choisir la destination',
     // Venue selector
     'Venues': 'Lieux',
     'Select venue': 'Sélectionner le lieu',

packages/map-template/src/i18n/it.js

@@ -58,6 +58,9 @@ const it = {
     'My position': 'La mia posizione',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Attiva "Percorso accessibile" per ottenere indicazioni che evitano scale e scale mobili.',
     'Go!': 'Vai!',
+    'Directions': 'Indicazioni',
+    'Choose departure': 'Scegli la partenza',
+    'Choose destination': 'Scegli destinazione',
     // Venue selector
     'Venues': 'Luoghi',
     'Select venue': 'Seleziona luogo',

packages/map-template/src/i18n/nl.js

@@ -58,6 +58,9 @@ const nl = {
     'My position': 'Mijn positie',
     'Turn on Accessibility to get directions that avoid stairs and escalators.': 'Schakel toegankelijkheid in voor een routebeschrijving waarbij trappen en roltrappen worden vermeden',
     'Go!': 'Gaan!',
+    'Directions': 'Richtingen',
+    'Choose departure': 'Kies vertrek',
+    'Choose destination': 'Kies bestemming',
     // Venue selector
     'Venues': 'Locaties',
     'Select venue': 'Kies locatie',