Location search input styles

src/components/LocationAutocompleteInput/LocationAutocompleteInput.css

@@ -9,10 +9,29 @@
 
 .root {
   position: relative;
+  display: flex;
+}
+
+.icon {
+  display: flex;
+  width: 24px;
+  align-self: stretch;
+  border-bottom: 3px solid var(--marketplaceColor);
+  background-color: var(--matterColorLight);
+}
+
+.iconSvg {
+  margin: auto;
+}
+
+.iconSvgGroup {
+  stroke: var(--marketplaceColor);
 }
 
 .input {
+  flex-grow: 1;
   height: var(--inputHeight);
+  padding-left: 18px;
 }
 
 /*
@@ -25,6 +44,10 @@ size and position, etc.
   padding-bottom: 98px;
   top: var(--inputHeight);
   background-color: var(--marketplaceColor);
+  z-index: 1;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  box-shadow: var(--boxShadowPopup);
 }
 
 /*

src/components/LocationAutocompleteInput/LocationAutocompleteInput.example.js

@@ -10,7 +10,9 @@ const FormComponent = props => {
     <form onSubmit={handleSubmit}>
       <label htmlFor="location">Select location:</label>
       <Field name="location" format={null} component={LocationAutocompleteInput} />
-      <Button type="submit" disabled={pristine || submitting}>Submit</Button>
+      <Button type="submit" style={{ marginTop: '24px' }} disabled={pristine || submitting}>
+        Submit
+      </Button>
     </form>
   );
 };

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { debounce } from 'lodash';
 import classNames from 'classnames';
-import { Input } from '../../components';
 import * as propTypes from '../../util/propTypes';
 import { getPlacePredictions, getPlaceDetails } from '../../util/googleMaps';
 
@@ -15,6 +14,28 @@ const KEY_CODE_TAB = 9;
 const DIRECTION_UP = 'up';
 const DIRECTION_DOWN = 'down';
 
+const Icon = () => (
+  <svg
+    className={css.iconSvg}
+    width="21"
+    height="22"
+    viewBox="0 0 21 22"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      className={css.iconSvgGroup}
+      transform="matrix(-1 0 0 1 20 1)"
+      strokeWidth="2"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M13 14l5.241 5.241" /><circle cx="7.5" cy="7.5" r="7.5" />
+    </g>
+  </svg>
+);
+
 // Renders the autocompletion prediction results in a list
 const LocationPredictionsList = props => {
   const {
@@ -321,6 +342,7 @@ class LocationAutocompleteInput extends Component {
       autoFocus,
       rootClassName,
       className,
+      iconClassName,
       inputClassName,
       predictionsClassName,
       placeholder,
@@ -335,6 +357,7 @@ class LocationAutocompleteInput extends Component {
     };
 
     const rootClass = classNames(rootClassName || css.root, className);
+    const iconClass = classNames(css.icon, iconClassName);
     const inputClass = classNames(css.input, inputClassName);
     const predictionsClass = classNames(predictionsClassName);
 
@@ -346,7 +369,10 @@ class LocationAutocompleteInput extends Component {
 
     return (
       <div className={rootClass}>
-        <Input
+        <div className={iconClass}>
+          <Icon />
+        </div>
+        <input
           className={inputClass}
           type="search"
           autoComplete="off"
@@ -361,7 +387,7 @@ class LocationAutocompleteInput extends Component {
         />
         {renderPredictions
           ? <LocationPredictionsList
-              rootClassName={predictionsClass}
+              className={predictionsClass}
               predictions={predictions}
               highlightedIndex={this.state.highlightedIndex}
               onSelectStart={this.handlePredictionsSelectStart}
@@ -377,6 +403,7 @@ LocationAutocompleteInput.defaultProps = {
   autoFocus: false,
   rootClassName: null,
   className: null,
+  iconClassName: null,
   inputClassName: null,
   predictionsClassName: null,
   placeholder: '',
@@ -386,6 +413,7 @@ LocationAutocompleteInput.propTypes = {
   autoFocus: bool,
   rootClassName: string,
   className: string,
+  iconClassName: string,
   inputClassName: string,
   predictionsClassName: string,
   placeholder: string,

src/containers/Topbar/Topbar.js

@@ -163,6 +163,7 @@ class TopbarComponent extends Component {
               form="TopbarSearchForm"
               onSubmit={this.handleSubmit}
               initialValues={initialSearchFormValues}
+              isMobile
             />
             <p className={css.mobileHelp}>
               <FormattedMessage id="Topbar.mobileSearchHelp" />

src/containers/TopbarSearchForm/TopbarSearchForm.css

@@ -1,41 +1,39 @@
 @import '../../marketplace.css';
 
-.root {
-  height: 100%;
+:root {
+  --inputHeight: 50px;
+  --topbarHeight: 72px;
 }
 
-.location {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  @media (--desktop-viewport) {
-    display: block;
-  }
+.mobileInputRoot {
+  margin-left: 24px;
+  margin-right: 24px;
 }
 
-.locationInput {
-  height: 72px;
-  padding: 0 18px;
+.desktopInputRoot {
+  height: var(--topbarHeight);
+}
+
+.desktopIcon {
   border: none;
-  outline: none;
-
-  @media (--desktop-viewport) {
-    padding: 0;
-  }
 }
 
-.locationPredictions {
-  flex-grow: 1;
-  background-color: var(--marketplaceColor);
-  box-shadow: var(--boxShadowPopup);
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-
-  @media (--desktop-viewport) {
-    position: relative;
-    z-index: 1;
-    padding-bottom: 98px;
-    max-width: 434px;
-  }
+.desktopInput {
+  height: var(--topbarHeight);
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.mobilePredictions {
+  position: fixed;
+  top: 95px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.desktopPredictions {
+  margin-top: calc(var(--topbarHeight) - var(--inputHeight));
+  max-width: 434px;
 }

src/containers/TopbarSearchForm/TopbarSearchForm.js

@@ -8,7 +8,7 @@ import { LocationAutocompleteInput } from '../../components';
 import css from './TopbarSearchForm.css';
 
 const TopbarSearchFormComponent = props => {
-  const { rootClassName, className, intl, onSubmit } = props;
+  const { rootClassName, className, intl, onSubmit, isMobile } = props;
 
   const onChange = location => {
     if (location.selectedPlace) {
@@ -20,7 +20,7 @@ const TopbarSearchFormComponent = props => {
     }
   };
 
-  const classes = classNames(rootClassName || css.root, className);
+  const classes = classNames(rootClassName, className);
 
   // Allow form submit only when the place has changed
   const preventFormSubmit = e => e.preventDefault();
@@ -30,9 +30,10 @@ const TopbarSearchFormComponent = props => {
       <Field
         name="location"
         label="Location"
-        className={css.location}
-        inputClassName={css.locationInput}
-        predictionsClassName={css.locationPredictions}
+        className={isMobile ? css.mobileInputRoot : css.desktopInputRoot}
+        iconClassName={isMobile ? null : css.desktopIcon}
+        inputClassName={isMobile ? null : css.desktopInput}
+        predictionsClassName={isMobile ? css.mobilePredictions : css.desktopPredictions}
         placeholder={intl.formatMessage({ id: 'TopbarSearchForm.placeholder' })}
         format={null}
         component={LocationAutocompleteInput}
@@ -42,9 +43,9 @@ const TopbarSearchFormComponent = props => {
   );
 };
 
-const { func, string } = PropTypes;
+const { func, string, bool } = PropTypes;
 
-TopbarSearchFormComponent.defaultProps = { rootClassName: null, className: null };
+TopbarSearchFormComponent.defaultProps = { rootClassName: null, className: null, isMobile: false };
 
 TopbarSearchFormComponent.propTypes = {
   ...formPropTypes,
@@ -52,6 +53,7 @@ TopbarSearchFormComponent.propTypes = {
   rootClassName: string,
   className: string,
   onSubmit: func.isRequired,
+  isMobile: bool,
 
   // from injectIntl
   intl: intlShape.isRequired,