ListingPage 'per night' text

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 {

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;

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 {
         <div className={listingClasses}>
           <div className={css.header}>
             <h1 className={css.title}>{title}</h1>
-            <div className={css.price} title={priceTitle}>{formattedPrice}</div>
+            <div className={css.price}>
+              <div className={css.priceValue} title={priceTitle}>
+                {formattedPrice}
+              </div>
+              <div className={css.perNight}>
+                <FormattedMessage id="ListingPage.perNight" />
+              </div>
+            </div>
+
           </div>
           {imageCarousel}
           {/* eslint-disable react/no-danger */}

src/translations/en.json

@@ -73,6 +73,7 @@
   "ListingPage.ctaButtonMessage": "Book {title}",
   "ListingPage.loadingListingData": "Loading listing data",
   "ListingPage.noListingData": "Could not find listing data",
+  "ListingPage.perNight": "/ night",
   "LoginForm.emailLabel": "Email",
   "LoginForm.emailRequired": "required",
   "LoginForm.logIn": "Log in",