diff --git a/src/components/DateRangeInputField/DateRangeInput.css b/src/components/DateRangeInputField/DateRangeInput.css index 9fbfd545..29968006 100644 --- a/src/components/DateRangeInputField/DateRangeInput.css +++ b/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); diff --git a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js index b6271d03..b26df219 100644 --- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js +++ b/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 = ( + + {listingTitle} + + ); + const panelTitle = currentListing.id - ? + ? : ; return ( diff --git a/src/components/EditListingLocationPanel/EditListingLocationPanel.js b/src/components/EditListingLocationPanel/EditListingLocationPanel.js index d83ce66d..7adcfdbe 100644 --- a/src/components/EditListingLocationPanel/EditListingLocationPanel.js +++ b/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 = ( + + {listingTitle} + + ); + const panelTitle = currentListing.id - ? + ? : ; // Only render current search if full place object is available in the URL params diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js index 7d771353..d6da034f 100644 --- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js +++ b/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 = ( + + {listingTitle} + + ); const panelTitle = currentListing.id - ? + ? : ; return ( diff --git a/src/components/EditListingPricingPanel/EditListingPricingPanel.js b/src/components/EditListingPricingPanel/EditListingPricingPanel.js index e3cca0d6..5e408679 100644 --- a/src/components/EditListingPricingPanel/EditListingPricingPanel.js +++ b/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 = ( + + {listingTitle} + + ); + const panelTitle = currentListing.id - ? + ? : ; return ( diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css index 300ea117..66bbb13a 100644 --- a/src/components/HeroSection/HeroSection.css +++ b/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 { diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index f510edb6..6afb2c4d 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/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); diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index 59db5792..07fbc59c 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/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); diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css index a23c08ae..54fd3ffa 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css +++ b/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) { diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css index 64dead7a..dbb9fb57 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css +++ b/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; } } diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css index 3b32d02d..5ffd82ad 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.css +++ b/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,'); diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.js b/src/containers/ContactDetailsForm/ContactDetailsForm.js index 61e471b7..87b8a9ec 100644 --- a/src/containers/ContactDetailsForm/ContactDetailsForm.js +++ b/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} -
+

diff --git a/src/containers/EditListingPage/EditListingPage.css b/src/containers/EditListingPage/EditListingPage.css index 60c13efd..745ecf52 100644 --- a/src/containers/EditListingPage/EditListingPage.css +++ b/src/containers/EditListingPage/EditListingPage.css @@ -29,6 +29,10 @@ .desktopTopbar, .mobileTopbar { box-shadow: none; + + @media (--viewportLarge) { + box-shadow: var(--boxShadowLight); + } } .wizard { diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css index b42b10d1..a89a0b9d 100644 --- a/src/containers/InboxPage/InboxPage.css +++ b/src/containers/InboxPage/InboxPage.css @@ -26,6 +26,15 @@ } } +.desktopTopbar, +.mobileTopbar { + box-shadow: none; + + @media (--viewportLarge) { + box-shadow: var(--boxShadowLight); + } +} + .container { width: 100%; diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js index 7356fab7..f418886b 100644 --- a/src/containers/InboxPage/InboxPage.js +++ b/src/containers/InboxPage/InboxPage.js @@ -256,6 +256,7 @@ export const InboxPageComponent = props => {
-
+

diff --git a/src/translations/en.json b/src/translations/en.json index 8f2cffb7..17110375 100644 --- a/src/translations/en.json +++ b/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\".",