Merge pull request #202 from sharetribe/topbar-mobile-bar

Topbar (mobile bar)

src/components/Button/Button.css

@@ -38,7 +38,7 @@
 */
 .flatButton {
   display: block;
-  padding: 0.5rem;
+  padding: 12px;
 
   /* fill colors should be in sync with marketplace color palette */
   background-color: transparent;

src/components/HeroSection/HeroSection.css

@@ -1,6 +1,6 @@
 .section {
   width: 100%;
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 60px);
   background-image: url("data:image/svg+xml;utf8,<svg width='375' height='240' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd'><path fill='#D8D8D8' d='M0 0h375v240H0z' vector-effect='non-scaling-stroke'/><path d='M375 0l-375 240M.5.5l375 240' stroke='#979797' stroke-linecap='square' vector-effect='non-scaling-stroke'/></g></svg>");
   background-size: 100% 100%;
   background-position: center;

src/containers/Topbar/LogoIcon.js

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+
+const LogoIcon = props => {
+  const { className } = props;
+
+  return (
+    <svg
+      className={className}
+      width="21"
+      height="25"
+      viewBox="0 0 21 25"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
+        fill="#C0392B"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+const { string } = PropTypes;
+
+LogoIcon.defaultProps = {
+  className: null,
+};
+
+LogoIcon.propTypes = {
+  className: string,
+};
+
+export default LogoIcon;

src/containers/Topbar/MenuIcon.js

@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './Topbar.css';
+
+const MenuIcon = props => {
+  const { className, rootClassName } = props;
+  const classes = classNames(rootClassName || css.rootMenuIcon, className);
+
+  return (
+    <svg
+      className={classes}
+      width="18"
+      height="12"
+      viewBox="0 0 18 12"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fillRule="evenodd">
+        <rect width="18" height="2" rx="1" />
+        <rect y="5" width="18" height="2" rx="1" />
+        <rect y="10" width="18" height="2" rx="1" />
+      </g>
+    </svg>
+  );
+};
+
+const { string } = PropTypes;
+
+MenuIcon.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+MenuIcon.propTypes = {
+  className: string,
+  rootClassName: string,
+};
+
+export default MenuIcon;

src/containers/Topbar/SearchIcon.js

@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './Topbar.css';
+
+const SearchIcon = props => {
+  const { className, rootClassName } = props;
+  const classes = classNames(rootClassName || css.rootSearchIcon, className);
+
+  return (
+    <svg
+      className={classes}
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        transform="matrix(-1 0 0 1 17 1)"
+        strokeWidth="2"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M11.733 11.733l3.727 3.727" /><circle cx="6.4" cy="6.4" r="6.4" />
+      </g>
+    </svg>
+  );
+};
+
+const { string } = PropTypes;
+
+SearchIcon.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+SearchIcon.propTypes = {
+  className: string,
+  rootClassName: string,
+};
+
+export default SearchIcon;

src/containers/Topbar/Topbar.css

@@ -8,17 +8,17 @@
 
   /* Size */
   width: 100%;
-  height: 50px;
+  height: 60px;
 
   /* Layout for child components */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0 12px;
 
   /* fill */
-  background-color: #fff;
+  background-color: var(--matterColorLight);
 
   /* shadows */
   box-shadow: 0 1px 1px 0 #dcdcdc;
@@ -29,23 +29,7 @@
 }
 
 .home {
-  font-size: 24px;
-  text-decoration: none;
-}
-
-.navDropDown {
-  height: 60px;
-  width: 60px;
-  font-size: 2rem;
-  border-radius: 0;
-  appearance: none;
-  margin-left: 1rem;
-  outline: none;
-}
-
-.user {
-  min-width: 15rem;
-  text-align: right;
+  padding: 18px;
 }
 
 .logoutButton {
@@ -55,6 +39,8 @@
 /* Child component's size (and positioning) should be given here */
 .hamburgerMenu,
 .searchMenu {
+  display: flex;
+  align-items: center;
   width: 44px;
 }
 
@@ -69,3 +55,9 @@
     display: block;
   }
 }
+
+/* Icon component styles */
+.rootMenuIcon,
+.rootSearchIcon {
+  stroke: var(--matterColor);
+}

src/containers/Topbar/Topbar.js

@@ -12,8 +12,9 @@ import { ensureUser } from '../../util/data';
 import { createResourceLocatorString, pathByRouteName } from '../../util/routes';
 import * as propTypes from '../../util/propTypes';
 
-import hamburgerIcon from './images/hamburgerIcon.svg';
-import searchIcon from './images/searchIcon.svg';
+import MenuIcon from './MenuIcon';
+import LogoIcon from './LogoIcon';
+import SearchIcon from './SearchIcon';
 import css from './Topbar.css';
 
 const redirectToURLWithModalState = (props, modalStateParam) => {
@@ -124,15 +125,13 @@ class TopbarComponent extends Component {
       <div className={css.root}>
         <div className={css.container}>
           <FlatButton className={css.hamburgerMenu} onClick={this.handleMobileMenuOpen}>
-            <img src={hamburgerIcon} alt={intl.formatMessage({ id: 'Topbar.menuIcon' })} />
+            <MenuIcon title={intl.formatMessage({ id: 'Topbar.menuIcon' })} />
           </FlatButton>
-          <div>
-            <NamedLink className={css.home} name="LandingPage">
-              Saunatime
-            </NamedLink>
-          </div>
+          <NamedLink className={css.home} name="LandingPage">
+            <LogoIcon title={intl.formatMessage({ id: 'Topbar.logoIcon' })} />
+          </NamedLink>
           <FlatButton className={css.searchMenu} onClick={this.handleMobileSearchOpen}>
-            <img src={searchIcon} alt={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
+            <SearchIcon title={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
           </FlatButton>
         </div>
         <div className={css.desktop}>

src/translations/en.json

@@ -183,6 +183,7 @@
   "StripePaymentForm.stripe.validation_error.missing": "There is no card on a customer that is being charged.",
   "StripePaymentForm.stripe.validation_error.processing_error": "An error occurred while processing the card.",
   "StripePaymentForm.submitPaymentInfo": "Send request",
+  "Topbar.logoIcon": "Go to homepage",
   "Topbar.menuIcon": "Open menu",
   "Topbar.searchIcon": "Open search",
   "TopbarDesktop.createListing": "+ Add your sauna",