From a415b96e7054faf489b35fce29d239b5996e57e9 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 15 May 2017 21:00:34 +0300
Subject: [PATCH] ListingPage 'per night' text

---
 src/components/ListingCard/ListingCard.css |  2 ++
 src/containers/ListingPage/ListingPage.css | 24 +++++++++++++++++++++-
 src/containers/ListingPage/ListingPage.js  | 12 +++++++++--
 src/translations/en.json                   |  1 +
 4 files changed, 36 insertions(+), 3 deletions(-)

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 {
         <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 */}
diff --git a/src/translations/en.json b/src/translations/en.json
index f23a744d..d80b93fb 100644
--- a/src/translations/en.json
+++ b/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",