Add mobile search help text

src/containers/Topbar/Topbar.css

@@ -57,3 +57,20 @@
 .rootSearchIcon {
   stroke: var(--matterColor);
 }
+
+.searchContainer {
+  position: relative;
+  height: 100%;
+}
+
+.mobileHelp {
+  color: var(--matterColorAnti);
+  margin: 0 24px;
+
+  /* Absolute position to prevent changing search form positioning */
+  position: absolute;
+  top: 115px;
+
+  /* Pull text behind search suggestions */
+  z-index: -1;
+}

src/containers/Topbar/Topbar.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { FlatButton, Modal, NamedLink, TopbarDesktop, TopbarMobileMenu } from '../../components';
@@ -158,11 +158,16 @@ class TopbarComponent extends Component {
           onClose={this.handleMobileSearchClose}
           togglePageClassNames={togglePageClassNames}
         >
-          <TopbarSearchForm
-            form="TopbarSearchForm"
-            onSubmit={this.handleSubmit}
-            initialValues={initialSearchFormValues}
-          />
+          <div className={css.searchContainer}>
+            <TopbarSearchForm
+              form="TopbarSearchForm"
+              onSubmit={this.handleSubmit}
+              initialValues={initialSearchFormValues}
+            />
+            <p className={css.mobileHelp}>
+              <FormattedMessage id="Topbar.mobileSearchHelp" />
+            </p>
+          </div>
         </Modal>
       </div>
     );

src/translations/en.json

@@ -185,6 +185,7 @@
   "StripePaymentForm.submitPaymentInfo": "Send request",
   "Topbar.logoIcon": "Go to homepage",
   "Topbar.menuIcon": "Open menu",
+  "Topbar.mobileSearchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district – \"Sörnäinen\".",
   "Topbar.searchIcon": "Open search",
   "TopbarDesktop.createListing": "+ Add your sauna",
   "TopbarDesktop.inbox": "Inbox",
@@ -201,5 +202,6 @@
   "TopbarMobileMenu.signupOrLogin": "{signup} or {login}",
   "TopbarMobileMenu.unauthorizedGreeting": "Hello there,{lineBreak}would you like to {signupOrLogin}?",
   "TopbarSearchForm.placeholder": "Search saunas...",
+  "TopbarSearchForm.placeholder": "Search saunas...",
   "TopbarSearchForm.searchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district \"Sörnäinen\"."
 }