Merge pull request #1 from najomar68/omar-stashDesignChanges

changed logo and background images

CHANGELOG.md

@@ -14,6 +14,18 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+## [v3.5.1] 2019-09-16
+
+- [add] add orverriding function `onAdd` and `onRemove` for `CustomOverlayView` in
+  `SearchMapWithGoogleMap` to abide to React rules and do not `unmountComponentAtNode` when a
+  component is rendered by React and use `appendChild` on `onAdd` instead of `draw` to
+  [improve performance](https://github.com/tomchentw/react-google-maps/issues/817).
+  [#1200](https://github.com/sharetribe/flex-template-web/pull/1200)
+- [fix] fix `CustomOverlayView` in `SearchMapWithGoogleMap` to work with new `react-intl` version,
+  overriding `render` method to render child object by using `createPortal` instead of
+  `unstable_renderSubtreeIntoContainer`.
+  [#1200](https://github.com/sharetribe/flex-template-web/pull/1200)
+
 ## [v3.5.0] 2019-08-29
 
 - [change] Change the design of `BookingBreakdown` and add options to show only dates or booking

README.md

@@ -56,6 +56,10 @@ See the Flex Docs site: https://www.sharetribe.com/docs/
 
 See also the [docs/](docs/) directory for some additional internal documentation.
 
+## Get help – join Sharetribe Flex Developer Slack channel
+
+If you have any questions about development, the best place to ask them is the Flex Developer Slack channel at https://www.sharetribe.com/flex-slack
+
 ## License
 
 This project is licensed under the terms of the Apache-2.0 license.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/components/Logo/IconLogo.js

@@ -10,13 +10,23 @@ const IconLogo = props => {
       {...rest}
       width="21"
       height="25"
-      viewBox="0 0 21 25"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
+      <path d="M229.781,0c-81.569,0-147.93,63.047-147.93,140.543c0,54.028,20.928,84.706,41.178,114.388
-        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"
+		c16.882,24.736,34.339,50.313,35.394,84.912c0.26,8.539,6.353,15.552,14.384,17.289c-7.475,2.291-12.912,9.244-12.912,17.47
-        fillRule="evenodd"
+		c0,7.247,4.23,13.489,10.347,16.442c-6.116,2.954-10.347,9.196-10.347,16.444c0,10.091,8.18,18.271,18.271,18.271h11.167
-      />
+		c3.45,19.216,20.24,33.801,40.448,33.801c20.208,0,37-14.585,40.449-33.801h11.166c10.092,0,18.271-8.181,18.271-18.271
+		c0-7.248-4.23-13.49-10.348-16.444c6.117-2.953,10.348-9.195,10.348-16.442c0-8.189-5.389-15.12-12.812-17.44
+		c8.025-1.742,14.113-8.752,14.375-17.288c1.053-34.586,18.482-60.163,35.354-84.922c20.221-29.668,41.127-60.346,41.127-114.408
+		C377.71,63.047,311.351,0,229.781,0z M306.371,234.396c-15.518,22.771-34.314,50.355-40.014,86.645l-18.83-0.005l26.897-153.13
+		c0.015-0.083,0.028-0.166,0.042-0.249c1.43-9.385-1.296-18.896-7.479-26.093c-5.983-6.964-14.709-11.121-23.342-11.121
+		c-4.852,0-9.609,1.318-13.877,3.762c-4.269-2.444-9.024-3.762-13.877-3.762c-8.559,0-16.967,4.064-23.071,11.15
+		c-6.308,7.324-9.134,16.813-7.753,26.035c0.014,0.093,0.029,0.185,0.045,0.277l26.897,153.12l-18.714-0.006
+		c-5.705-36.312-24.54-63.911-40.091-86.696c-18.68-27.382-34.812-51.029-34.812-93.78c0-57.347,49.968-104.001,111.388-104.001
+		c61.419,0,111.388,46.654,111.388,104.001C341.169,183.337,325.05,206.987,306.371,234.396z M229.768,293.268l-22.669-129.053
+		c-0.537-3.92,1.643-6.947,2.612-8.071c1.783-2.069,4.208-3.406,6.18-3.406c2.472,0,4.369,1.851,5.28,2.953
+		c2.118,2.566,5.27,4.051,8.597,4.051c3.326,0,6.479-1.485,8.597-4.051c0.912-1.103,2.809-2.953,5.281-2.953
+		c2.189,0,4.653,1.286,6.43,3.354c1.133,1.319,2.936,4.115,2.365,8.103L229.768,293.268z"/>
     </svg>
   );
 };

src/components/Logo/Logo.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import config from '../../config';
-import IconLogo from './IconLogo';
+// import IconLogo from './IconLogo';
-import LogoImage from './saunatime-logo.png';
+import LogoImage from './inventionpad-logo.png';
 import css from './Logo.css';
 
 const Logo = props => {
@@ -15,7 +15,7 @@ const Logo = props => {
     return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
   }
 
-  return <IconLogo className={mobileClasses} {...rest} />;
+  return <img src={LogoImage} width="80px" height="30px" alt={config.siteTitle} className={mobileClasses} {...rest} />;
 };
 
 const { oneOf, string } = PropTypes;

src/components/SearchMap/SearchMapWithGoogleMap.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import invariant from 'invariant';
 import { arrayOf, func, node, number, oneOfType, shape, string } from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { withGoogleMap, GoogleMap, OverlayView } from 'react-google-maps';
@@ -86,12 +88,46 @@ export const isMapsLibLoaded = () =>
  * https://github.com/tomchentw/react-google-maps/issues/482
  */
 class CustomOverlayView extends OverlayView {
+  onRemove() {
+    this.containerElement.parentNode.removeChild(this.containerElement);
+    //Remove `unmountComponentAtNode` for react version 16
+    //I decided to keep the code here incase React decides not to give out warning when `unmountComponentAtNode` in newer version
+    if (!React.version.match(/^16/)) {
+      ReactDOM.unmountComponentAtNode(this.containerElement);
+    }
+    this.containerElement = null;
+  }
+
+  onAdd() {
+    this.containerElement = document.createElement(`div`);
+    this.containerElement.style.position = `absolute`;
+
+    const { mapPaneName } = this.props;
+    invariant(
+      !!mapPaneName,
+      `OverlayView requires either props.mapPaneName or props.defaultMapPaneName but got %s`,
+      mapPaneName
+    );
+
+    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
+    mapPanes[mapPaneName].appendChild(this.containerElement);
+    this.onPositionElement();
+    this.forceUpdate();
+  }
+
+  render() {
+    if (React.version.match(/^16/) && this.containerElement) {
+      return ReactDOM.createPortal(React.Children.only(this.props.children), this.containerElement);
+    }
+    return false;
+  }
+
   draw() {
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
     const mapPanes = this.state[OVERLAY_VIEW].getPanes();
     // Add conditional to ensure panes and container exist before drawing
     if (mapPanes && this.containerElement) {
-      super.draw();
+      this.onPositionElement();
     }
   }
 }

src/marketplace.css

@@ -23,7 +23,7 @@
   --backgroundImage: {
     /* Gradient direction and overlaying the black color on top of the image for better readability */
     background: linear-gradient(-45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
-      url('../../assets/background-1440.jpg');
+      url('../../assets/ideas-image.jpg');
 
     /* Add loading color for the div */
     background-color: var(--matterColor);
@@ -42,9 +42,9 @@
 
   /* ================ Colors ================ */
 
-  --marketplaceColor: #c0392b;
+  --marketplaceColor: #ffbe0e;
-  --marketplaceColorLight: #ff4c38;
+  --marketplaceColorLight: #ffffff;
-  --marketplaceColorDark: #8c291e;
+  --marketplaceColorDark: #000000;
 
   /* Used with inline CSS SVGs */
   --marketplaceColorEncoded: %23c0392b;

src/translations/en.json

@@ -146,16 +146,16 @@
   "EditListingDescriptionForm.categoryPlaceholder": "Choose the type of your sauna…",
   "EditListingDescriptionForm.categoryRequired": "You need to select a category for your sauna.",
   "EditListingDescriptionForm.createListingDraftError": "Failed to create a draft listing. Please try again.",
-  "EditListingDescriptionForm.description": "Describe your sauna",
+  "EditListingDescriptionForm.description": "Describe your invention",
   "EditListingDescriptionForm.descriptionPlaceholder": "How many people can fit at once? Does the sauna come with towels?",
   "EditListingDescriptionForm.descriptionRequired": "A description is required.",
   "EditListingDescriptionForm.maxLength": "Must be {maxLength} characters or less",
   "EditListingDescriptionForm.showListingFailed": "Fetching listing data failed",
-  "EditListingDescriptionForm.title": "The name of your sauna",
+  "EditListingDescriptionForm.title": "The name of your invention",
-  "EditListingDescriptionForm.titlePlaceholder": "What's the name of your sauna?",
+  "EditListingDescriptionForm.titlePlaceholder": "What's the name of your invention?",
   "EditListingDescriptionForm.titleRequired": "You need to add a name.",
   "EditListingDescriptionForm.updateFailed": "Failed to update listing. Please try again.",
-  "EditListingDescriptionPanel.createListingTitle": "Add your sauna",
+  "EditListingDescriptionPanel.createListingTitle": "Add your invention",
   "EditListingDescriptionPanel.title": "Edit details of {listingTitle}",
   "EditListingFeaturesForm.showListingFailed": "Fetching listing data failed",
   "EditListingFeaturesForm.updateFailed": "Failed to update listing. Please try again.",
@@ -291,7 +291,7 @@
   "Footer.toContactPage": "Contact",
   "Footer.toFAQPage": "FAQ",
   "Footer.toHelpPage": "Help",
-  "Footer.toNewListingPage": "Add your sauna",
+  "Footer.toNewListingPage": "Add your invention",
   "ImageCarousel.imageAltText": "Listing image {index}/{count}",
   "ImageFromFile.couldNotReadFile": "Could not read file",
   "InboxPage.fetchFailed": "Could not load all messages. Please try again.",
@@ -357,7 +357,7 @@
   "ListingPage.viewImagesButton": "View photos ({count})",
   "ListingPage.yourHostHeading": "Your host",
   "LocationAutocompleteInput.currentLocation": "Current location",
-  "LocationSearchForm.placeholder": "Search saunas…",
+  "LocationSearchForm.placeholder": "Search experts…",
   "LoginForm.emailInvalid": "A valid email address is required",
   "LoginForm.emailLabel": "Email",
   "LoginForm.emailPlaceholder": "john.doe@example.com",
@@ -665,6 +665,8 @@
   "ProfileSettingsForm.bioInfo": "Saunatime is built on relationships. Help other people get to know you.",
   "ProfileSettingsForm.bioLabel": "Bio",
   "ProfileSettingsForm.bioPlaceholder": "Tell us a little bit about yourself…",
+  "ProfileSettingsForm.linkedinLabel": "Linkedin",
+  "ProfileSettingsForm.linkedinPlaceholder": "Linkedin",
   "ProfileSettingsForm.changeAvatar": "Change",
   "ProfileSettingsForm.fileInfo": ".JPG, .GIF or .PNG. Max. 10 MB",
   "ProfileSettingsForm.firstNameLabel": "First name",
@@ -733,9 +735,9 @@
   "SearchPage.searchError": "Search failed. Please try again.",
   "SearchResultsPanel.nextPage": "Next page",
   "SearchResultsPanel.previousPage": "Previous page",
-  "SectionHero.browseButton": "Browse saunas",
+  "SectionHero.browseButton": "Start inventing",
-  "SectionHero.subTitle": "The largest online community to rent saunas in Finland.",
+  "SectionHero.subTitle": "The place to take your napkin sketch all the way to manufacturing",
-  "SectionHero.title": "Book saunas everywhere.",
+  "SectionHero.title": "Where ideas become REAL Products",
   "SectionHowItWorks.createListingLink": "PS. You can also become a Saunatime host in just a few clicks!",
   "SectionHowItWorks.part1Text": "Start by searching for a location. Once you find a sauna you like, simply check the availability, book it, and make a secure payment right away.",
   "SectionHowItWorks.part1Title": "1. Browse and book",
@@ -743,10 +745,10 @@
   "SectionHowItWorks.part2Title": "2. Have a great bath",
   "SectionHowItWorks.part3Text": "If you enjoyed the experience, let others know by reviewing your sauna host. Help others know where to go.",
   "SectionHowItWorks.part3Title": "3. Review the host",
-  "SectionHowItWorks.titleLineOne": "The sauna ritual",
+  "SectionHowItWorks.titleLineOne": "The Invention Process",
-  "SectionHowItWorks.titleLineTwo": "(or how Saunatime works).",
+  "SectionHowItWorks.titleLineTwo": "(or how InventionPad works).",
   "SectionLocations.listingsInLocation": "Saunas in {location}",
-  "SectionLocations.title": "Explore exotic locations in Finland",
+  "SectionLocations.title": "Find experts to help you",
   "SelectMultipleFilter.labelSelected": "{labelText} • {count}",
   "SelectMultipleFilterPlainForm.labelSelected": "{labelText} • {count}",
   "SelectSingleFilter.popupClear": "Clear",
@@ -881,7 +883,7 @@
   "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.accountSettingsLink": "Account settings",
-  "TopbarDesktop.createListing": "+ Add your sauna",
+  "TopbarDesktop.createListing": "+ Add your invention",
   "TopbarDesktop.inbox": "Inbox",
   "TopbarDesktop.login": "Log in",
   "TopbarDesktop.logo": "Saunatime",
@@ -894,13 +896,13 @@
   "TopbarMobileMenu.inboxLink": "Inbox",
   "TopbarMobileMenu.loginLink": "Log in",
   "TopbarMobileMenu.logoutLink": "Log out",
-  "TopbarMobileMenu.newListingLink": "+ Add your sauna",
+  "TopbarMobileMenu.newListingLink": "+ Add your invention",
   "TopbarMobileMenu.profileSettingsLink": "Profile settings",
   "TopbarMobileMenu.signupLink": "Sign up",
   "TopbarMobileMenu.signupOrLogin": "{signup} or {login}",
   "TopbarMobileMenu.unauthorizedGreeting": "Hello there,{lineBreak}would you like to {signupOrLogin}?",
   "TopbarMobileMenu.yourListingsLink": "Your listings",
-  "TopbarSearchForm.placeholder": "Search saunas…",
+  "TopbarSearchForm.placeholder": "Search experts…",
   "TopbarSearchForm.searchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district \"Sörnäinen\".",
   "TransactionPage.deletedListing": "deleted listing",
   "TransactionPage.fetchOrderFailed": "Fetching order data failed.",