Merge pull request #143 from sharetribe/topbar-style-fixes

Added correct icons and some other style fixes

src/components/MobileMenu/MobileMenu.css

@@ -43,4 +43,8 @@
 
 .signupLink {
   margin-right: 1rem;
+  text-decoration: none;
+}
+.loginLink {
+  text-decoration: none;
 }

src/components/MobileMenu/MobileMenu.js

@@ -18,7 +18,7 @@ const MobileMenu = props => {
           <NamedLink name="SignUpPage" className={css.signupLink}>
             <FormattedMessage id="MobileMenu.signupLink" />
           </NamedLink>
-          <NamedLink name="LogInPage">
+          <NamedLink name="LogInPage" className={css.loginLink}>
             <FormattedMessage id="MobileMenu.loginLink" />
           </NamedLink>
         </div>

src/containers/Topbar/Topbar.css

@@ -6,7 +6,7 @@
 
   /* Size */
   width: 100%;
-  height: 80px;
+  height: 50px;
 
   /* Layout for child components */
   display: flex;
@@ -16,11 +16,15 @@
   padding: 0 1rem;
 
   /* fill */
-  background-color: #f9f9f9;
+  background-color: #fff;
+
+  /* shadows */
+  box-shadow: 0 1px 1px 0 #dcdcdc;
 }
 
 .home {
-  font-size: 2rem;
+  font-size: 24px;
+  text-decoration: none;
 }
 
 .navDropDown {

src/containers/Topbar/Topbar.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
 import { FlatButton, MobileMenu, Modal, NamedLink } from '../../components';
@@ -11,14 +12,10 @@ 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 css from './Topbar.css';
 
-/* eslint-disable react/no-danger */
-const House = () => <span dangerouslySetInnerHTML={{ __html: '&#127968;' }} />;
-const Burger = () => <span dangerouslySetInnerHTML={{ __html: '&#9776;' }} />;
-const Search = () => <span dangerouslySetInnerHTML={{ __html: '&#128269;' }} />;
-/* eslint-enable react/no-danger */
-
 const redirectToURLWithModalState = (props, modalStateParam) => {
   const { history, location } = props;
   const { pathname, search, state } = location;
@@ -87,6 +84,7 @@ class TopbarComponent extends Component {
       isAuthenticated,
       authInProgress,
       currentUser,
+      intl,
       location,
       togglePageClassNames,
     } = this.props;
@@ -104,15 +102,15 @@ class TopbarComponent extends Component {
       <div className={css.root}>
         <div className={css.container}>
           <FlatButton className={css.hamburgerMenu} onClick={this.handleMobileMenuOpen}>
-            <Burger />
+            <img src={hamburgerIcon} alt={intl.formatMessage({ id: 'Topbar.menuIcon' })} />
           </FlatButton>
           <div>
             <NamedLink className={css.home} name="LandingPage">
-              <House />
+              Saunatime
             </NamedLink>
           </div>
           <FlatButton className={css.searchMenu} onClick={this.handleMobileSearchOpen}>
-            <Search />
+            <img src={searchIcon} alt={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
           </FlatButton>
         </div>
         <Modal
@@ -134,6 +132,8 @@ class TopbarComponent extends Component {
   }
 }
 
+TopbarComponent.defaultProps = { currentUser: null };
+
 const { arrayOf, bool, func, shape, string } = PropTypes;
 
 TopbarComponent.propTypes = {
@@ -153,6 +153,9 @@ TopbarComponent.propTypes = {
 
   // from withFlattenedRoutes
   flattenedRoutes: arrayOf(propTypes.route).isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -167,8 +170,10 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => ({ onLogout: historyPush => dispatch(logout(historyPush)) });
 
-const Topbar = compose(connect(mapStateToProps, mapDispatchToProps), withFlattenedRoutes)(
-  TopbarComponent
-);
+const Topbar = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withFlattenedRoutes,
+  injectIntl
+)(TopbarComponent);
 
 export default Topbar;

src/containers/Topbar/images/hamburgerIcon.svg

@@ -0,0 +1 @@
+<svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"><g fill="#34495E" fill-rule="evenodd" opacity=".7"><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>

src/containers/Topbar/images/searchIcon.svg

@@ -0,0 +1 @@
+<svg 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)" stroke="#34495E" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M11.733 11.733l3.727 3.727"/><circle cx="6.4" cy="6.4" r="6.4"/></g></svg>

src/translations/en.json

@@ -125,5 +125,7 @@
   "StripePaymentForm.stripe.validation_error.invalid_swipe_data": "The card's swipe data is invalid.",
   "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"
+  "StripePaymentForm.submitPaymentInfo": "Send request",
+  "Topbar.menuIcon": "Open menu",
+  "Topbar.searchIcon": "Open search"
 }