diff --git a/src/components/ListingCard/ListingCard.css b/src/components/ListingCard/ListingCard.css index 0f495932..6857bb8f 100644 --- a/src/components/ListingCard/ListingCard.css +++ b/src/components/ListingCard/ListingCard.css @@ -62,6 +62,8 @@ display: flex; flex-direction: row; justify-content: flex-end; + flex-shrink: 0; + padding-left: 1rem; } .priceValue { diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 34281f4f..2bdb6f24 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -16,7 +16,7 @@ .title, .price { - font-size: 2em; + font-size: 22px; margin: 0.67em 0; } @@ -24,6 +24,28 @@ flex-grow: 1; } +.price { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding-left: 1rem; + flex-shrink: 0; + +} + +.priceValue { + font-size: 22px; +} + +.perNight { + margin-left: 6px; + font-size: 16px; + + /* Align small price unit text with bigger font (priceValue) */ + line-height: 23px; + padding-top: 6px; +} + .mainImage { width: 100%; position: relative; diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index b1e4987f..b2ab37ae 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import { intlShape, injectIntl } from 'react-intl'; +import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { union, without } from 'lodash'; @@ -166,7 +166,15 @@ export class ListingPageComponent extends Component {