feat: add back button to mobile location screen

lib/components/mobile/location-search.js

@@ -9,9 +9,13 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
+import { ChevronLeft } from '@styled-icons/fa-solid'
+
 import { MobileScreens } from '../../actions/ui-constants'
 import LocationField from '../form/connected-location-field'
 
+import { StyledIconWrapper } from '../util/styledIcon'
+
 import MobileContainer from './container'
 import MobileNavigationBar from './navigation-bar'
 
@@ -27,6 +31,14 @@ const MobileLocationField = styled(LocationField)`
   }
 `
 
+const MobileLocationBackButton = styled.button`
+  background: white;
+  border: none;
+  position: absolute;
+  z-index: 100;
+  margin-top: 4px;
+`
+
 class MobileLocationSearch extends Component {
   static propTypes = {
     backScreen: PropTypes.number,
@@ -46,6 +58,10 @@ class MobileLocationSearch extends Component {
       this.props
     const suppressNearby =
       otherLocation && otherLocation.category === 'CURRENT_LOCATION'
+
+    const backButtonText = intl.formatMessage({
+      id: 'components.BackToTripPlanner.backToTripPlanner'
+    })
     return (
       <MobileContainer>
         <MobileNavigationBar
@@ -62,6 +78,18 @@ class MobileLocationSearch extends Component {
         />
         <main tabIndex={-1}>
           <div className="location-search mobile-padding">
+            <MobileLocationBackButton
+              aria-label={backButtonText}
+              onClick={() =>
+                this.props.setMobileScreen(MobileScreens.SEARCH_FORM)
+              }
+              title={backButtonText}
+            >
+              <StyledIconWrapper>
+                <ChevronLeft />
+              </StyledIconWrapper>
+            </MobileLocationBackButton>
+
             <MobileLocationField
               hideExistingValue
               inputPlaceholder={