Merge pull request #442 from sharetribe/fine-tuning

various fine-tuning fixes

src/components/DateRangeInputField/DateRangeInput.css

@@ -38,6 +38,7 @@
     display: flex;
     justify-content: space-between;
     border: none;
+    background: none;
   }
   & :global(.DayPicker--horizontal) {
     margin: 0 auto;
@@ -221,6 +222,7 @@
   /* Create gutter between inputs */
   & :global(.DateInput) {
     width: calc(50% - 6px);
+    background: none;
 
     @media (--viewportMedium) {
       width: calc(50% - 12px);

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js

@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { ensureListing } from '../../util/data';
+import { createSlug } from '../../util/urlHelpers';
+import { NamedLink } from '../../components';
 import { EditListingDescriptionForm } from '../../containers';
 
 import css from './EditListingDescriptionPanel.css';
@@ -23,8 +25,15 @@ const EditListingDescriptionPanel = props => {
   const currentListing = ensureListing(listing);
   const { description, title } = currentListing.attributes;
   const listingTitle = title || '';
+  const params = { id: currentListing.id.uuid, slug: createSlug(title) };
+  const listingLink = (
+    <NamedLink name="ListingPage" params={params}>
+      {listingTitle}
+    </NamedLink>
+  );
+
   const panelTitle = currentListing.id
-    ? <FormattedMessage id="EditListingDescriptionPanel.title" values={{ listingTitle }} />
+    ? <FormattedMessage id="EditListingDescriptionPanel.title" values={{ listingTitle:listingLink }} />
     : <FormattedMessage id="EditListingDescriptionPanel.createListingTitle" />;
 
   return (

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -1,8 +1,10 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { EditListingLocationForm } from '../../containers';
 import { ensureListing } from '../../util/data';
+import { createSlug } from '../../util/urlHelpers';
+import { NamedLink } from '../../components';
+import { EditListingLocationForm } from '../../containers';
 
 import css from './EditListingLocationPanel.css';
 
@@ -23,8 +25,15 @@ const EditListingLocationPanel = props => {
   const currentListing = ensureListing(listing);
   const { address, geolocation, title } = currentListing.attributes;
   const listingTitle = title || '';
+  const params = { id: currentListing.id.uuid, slug: createSlug(title) };
+  const listingLink = (
+    <NamedLink name="ListingPage" params={params}>
+      {listingTitle}
+    </NamedLink>
+  );
+
   const panelTitle = currentListing.id
-    ? <FormattedMessage id="EditListingLocationPanel.title" values={{ listingTitle }} />
+    ? <FormattedMessage id="EditListingLocationPanel.title" values={{ listingTitle:listingLink }} />
     : <FormattedMessage id="EditListingLocationPanel.createListingTitle" />;
 
   // Only render current search if full place object is available in the URL params

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -2,9 +2,10 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { omitBy, isUndefined } from 'lodash';
+import { createSlug } from '../../util/urlHelpers';
 import { EditListingPhotosForm, PayoutDetailsForm } from '../../containers';
 import { ensureListing } from '../../util/data';
-import { Modal } from '../../components';
+import { Modal, NamedLink } from '../../components';
 import * as propTypes from '../../util/propTypes';
 
 import css from './EditListingPhotosPanel.css';
@@ -98,8 +99,15 @@ class EditListingPhotosPanel extends Component {
     const currentListing = ensureListing(listing);
     const { title } = currentListing.attributes;
     const listingTitle = title || '';
+
+    const params = { id: currentListing.id.uuid, slug: createSlug(title) };
+    const listingLink = (
+      <NamedLink name="ListingPage" params={params}>
+        {listingTitle}
+      </NamedLink>
+    );
     const panelTitle = currentListing.id
-      ? <FormattedMessage id="EditListingPhotosPanel.title" values={{ listingTitle }} />
+      ? <FormattedMessage id="EditListingPhotosPanel.title" values={{ listingTitle:listingLink }} />
       : <FormattedMessage id="EditListingPhotosPanel.createListingTitle" />;
 
     return (

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
+import { createSlug } from '../../util/urlHelpers';
+import { NamedLink } from '../../components';
 import { EditListingPricingForm } from '../../containers';
 import { ensureListing } from '../../util/data';
 
@@ -23,8 +25,16 @@ const EditListingPricingPanel = props => {
   const currentListing = ensureListing(listing);
   const { price, title } = currentListing.attributes;
   const listingTitle = title || '';
+
+  const params = { id: currentListing.id.uuid, slug: createSlug(title) };
+  const listingLink = (
+    <NamedLink name="ListingPage" params={params}>
+      {listingTitle}
+    </NamedLink>
+  );
+
   const panelTitle = currentListing.id
-    ? <FormattedMessage id="EditListingPricingPanel.title" values={{ listingTitle }} />
+    ? <FormattedMessage id="EditListingPricingPanel.title" values={{ listingTitle:listingLink }} />
     : <FormattedMessage id="EditListingPricingPanel.createListingTitle" />;
 
   return (

src/components/HeroSection/HeroSection.css

@@ -12,27 +12,26 @@
   height: 100%;
 
   /* Text positioning is done with paddings */
-  padding: 0 24px 98px 24px;
+  padding: 0 24px 0 24px;
 
   @media (min-width: 768px) {
-    padding: 0 24px 15vw 15vw;
-  }
-
-  @media (min-width: 1024px){
-    padding: 0 0 195px 192px;
+    padding: 0 0 0 15vw;
   }
 }
 
 .heroMainTitle {
   @apply --marketplaceHeroTitleFontStyles;
   color: var(--matterColorLight);
-  margin-top: auto;
-  margin-bottom: 22px;
 
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
-    margin-top: auto;
-    margin-bottom: 22px;
+  }
+
+  @media (--viewportXLarge) {
+    font-size: 144px;
+    line-height: 144px;
+    max-width: 1000px;
+    margin-bottom: 60px;
   }
 }
 
@@ -44,6 +43,12 @@
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
   }
+
+  @media (--viewportXLarge) {
+    font-size: 24px;
+    line-height: 36px;
+    max-width: 1000px;
+  }
 }
 
 .mobileSearchButton {

src/components/LocationAutocompleteInput/LocationAutocompleteInput.css

@@ -61,7 +61,7 @@ size and position, etc.
 .predictionsRoot {
   position: absolute;
   width: 100%;
-  padding-bottom: 98px;
+  padding-bottom: 72px;
   top: var(--inputHeight);
   left: 0;
   background-color: var(--marketplaceColor);

src/components/ManageListingCard/ManageListingCard.css

@@ -127,7 +127,7 @@
 }
 
 .iconWrapper {
-  padding: 2px 10px 0 10px;
+  padding: 0px 10px 1px 10px;
   color: var(--matterColorLight);
   border-radius: 4px;
   transition: var(--transitionStyleButton);

src/components/OrderDetailsPanel/OrderDetailsPanel.css

@@ -12,7 +12,7 @@
     flex-direction: row;
     justify-content: center;
     max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
-    margin: 0 auto;
+    margin: 0 auto 60px;
     padding: 0 48px;
   }
 }
@@ -129,7 +129,7 @@
 }
 
 .bookingBreakdownContainer {
-  margin: 1px 0 40px 0;
+  margin: 1px 0 0 0;
 
   @media (--viewportLarge) {
 

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -11,7 +11,7 @@
   @media (--viewportLarge) {
     flex-direction: row;
     max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
-    margin: 0 auto;
+    margin: 0 auto 60px;
     padding: 0 48px;
   }
 }

src/containers/ContactDetailsForm/ContactDetailsForm.css

@@ -39,12 +39,17 @@
   flex-direction: column;
   margin-bottom: 60px;
   padding: 0;
+  opacity: 0;
 
   @media (--viewportLarge) {
     padding: 4px 0 0 0;
   }
 }
 
+.confirmChangesSectionVisible {
+  opacity: 1;
+}
+
 .emailVerified {
   @apply --infoTextStyles;
   background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%232ECC71" fill-rule="evenodd"/></svg>');

src/containers/ContactDetailsForm/ContactDetailsForm.js

@@ -166,6 +166,7 @@ class ContactDetailsFormComponent extends Component {
       ? passwordFailedMessage
       : null;
 
+    const confirmClasses = classNames(css.confirmChangesSection, { [css.confirmChangesSectionVisible]: !pristine });
     const classes = classNames(rootClassName || css.root, className);
     const submitDisabled = invalid || submitting || inProgress;
 
@@ -183,7 +184,7 @@ class ContactDetailsFormComponent extends Component {
           {emailVerifiedInfo}
         </div>
 
-        <div className={css.confirmChangesSection}>
+        <div className={confirmClasses}>
           <h3 className={css.confirmChangesTitle}>
             <FormattedMessage id="ContactDetailsForm.confirmChangesTitle" />
           </h3>

src/containers/EditListingPage/EditListingPage.css

@@ -29,6 +29,10 @@
 .desktopTopbar,
 .mobileTopbar {
   box-shadow: none;
+
+  @media (--viewportLarge) {
+    box-shadow: var(--boxShadowLight);
+  }
 }
 
 .wizard {

src/containers/InboxPage/InboxPage.css

@@ -26,6 +26,15 @@
   }
 }
 
+.desktopTopbar,
+.mobileTopbar {
+  box-shadow: none;
+
+  @media (--viewportLarge) {
+    box-shadow: var(--boxShadowLight);
+  }
+}
+
 .container {
   width: 100%;
 

src/containers/InboxPage/InboxPage.js

@@ -256,6 +256,7 @@ export const InboxPageComponent = props => {
       <Topbar
         className={css.topbar}
         mobileRootClassName={css.mobileTopbar}
+        desktopClassName={css.desktopTopbar}
         isAuthenticated={isAuthenticated}
         authInProgress={authInProgress}
         currentUser={currentUser}

src/containers/LandingPage/LandingPage.css

@@ -18,4 +18,11 @@
 
 .hero {
   flex-grow: 1;
+  justify-content: flex-end;
+  padding-bottom: 98px;
+
+  @media (min-width: 768px) {
+    justify-content: center;
+    padding-top: 60px;
+  }
 }

src/containers/LocationSearchForm/LocationSearchForm.css

@@ -29,4 +29,8 @@
 .searchPredictions {
   margin-top: 16px;
   margin-bottom: 102px;
+
+  @media (--viewportXLarge) {
+    margin-bottom: 0;
+  }
 }

src/containers/PasswordChangeForm/PasswordChangeForm.css

@@ -18,12 +18,17 @@
   flex-direction: column;
   margin-bottom: 60px;
   padding: 0;
+  opacity: 0;
 
   @media (--viewportLarge) {
     padding: 4px 0 0 0;
   }
 }
 
+.confirmChangesSectionVisible {
+  opacity: 1;
+}
+
 .confirmChangesTitle {
   /* Font */
   color: var(--matterColorAnti);

src/containers/PasswordChangeForm/PasswordChangeForm.js

@@ -28,6 +28,7 @@ class PasswordChangeFormComponent extends Component {
       inProgress,
       intl,
       invalid,
+      pristine,
       ready,
       reset,
     } = this.props;
@@ -96,6 +97,7 @@ class PasswordChangeFormComponent extends Component {
       ? passwordFailedMessage
       : null;
 
+    const confirmClasses = classNames(css.confirmChangesSection, { [css.confirmChangesSectionVisible]: !pristine });
     const classes = classNames(rootClassName || css.root, className);
     const submitDisabled = invalid || submitting || inProgress;
 
@@ -119,7 +121,7 @@ class PasswordChangeFormComponent extends Component {
           />
         </div>
 
-        <div className={css.confirmChangesSection}>
+        <div className={confirmClasses}>
           <h3 className={css.confirmChangesTitle}>
             <FormattedMessage id="PasswordChangeForm.confirmChangesTitle" />
           </h3>

src/translations/en.json

@@ -196,7 +196,7 @@
   "LoginForm.passwordRequired": "This field is required",
   "ManageListingCard.actionFailed": "Whoops, something went wrong. Please refresh the page and try again.",
   "ManageListingCard.closeListing": "Close listing",
-  "ManageListingCard.closedListing": "This listing is closed and hidden from the marketplace.",
+  "ManageListingCard.closedListing": "This listing is closed and not visible on the marketplace.",
   "ManageListingCard.edit": "Edit",
   "ManageListingCard.openListing": "Open listing",
   "ManageListingCard.perNight": "per night",
@@ -459,7 +459,7 @@
   "Topbar.checkInbox": "Please check your inbox and verify your email {email}",
   "Topbar.closeVerifyEmailReminder": "Later",
   "Topbar.fixEmail": "Whoops, typo in your email? {fixEmailLink}",
-  "Topbar.fixEmailLinkText": "Fix it",
+  "Topbar.fixEmailLinkText": "Fix it.",
   "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\".",