EditListingWizard: photos tab

src/components/EditListingPhotosPanel/EditListingPhotosPanel.css

@@ -1,10 +1,14 @@
 .root {
+  flex-grow: 1;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 0 1rem;
-  flex: 1;
+  padding: 11px 24px 0 24px;
+}
+
+.form {
+  flex-grow: 1;
 }
 
 .payoutModalOpen {
@@ -12,9 +16,6 @@
 }
 
 .payoutDetails {
-  margin: 1rem;
+  margin: 24px;
 }
 
-.form {
-  flex-grow: 1;
-}

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -82,25 +82,8 @@ class EditListingPhotosPanel extends Component {
     });
     const currency = config.currencyConfig.currency;
 
-    const payoutDetailsModal = (
-      <Modal
-        className={css.payoutModal}
-        isOpen={this.state.showPayoutDetails}
-        onClose={this.handlePayoutModalClose}
-        onManageDisableScrolling={onManageDisableScrolling}
-      >
-        <PayoutDetailsForm
-          className={css.payoutDetails}
-          currency={currency}
-          disabled={fetchInProgress}
-          onSubmit={this.handlePayoutSubmit}
-        />
-      </Modal>
-    );
-
     return (
       <div className={classes}>
-        {payoutDetailsModal}
         <h1><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
         <EditListingPhotosForm
           className={css.form}
@@ -111,6 +94,20 @@ class EditListingPhotosPanel extends Component {
           onSubmit={this.handlePhotosSubmit}
           onUpdateImageOrder={onUpdateImageOrder}
         />
+        <Modal
+          id="EditListingPhotosPanel.payoutModal"
+          className={css.payoutModal}
+          isOpen={this.state.showPayoutDetails}
+          onClose={this.handlePayoutModalClose}
+          onManageDisableScrolling={onManageDisableScrolling}
+        >
+          <PayoutDetailsForm
+            className={css.payoutDetails}
+            currency={currency}
+            disabled={fetchInProgress}
+            onSubmit={this.handlePayoutSubmit}
+          />
+        </Modal>
       </div>
     );
   }

src/containers/EditListingPhotosForm/EditListingPhotosForm.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   width: 100%;
   height: 100%;
@@ -7,7 +9,6 @@
 }
 
 .imagesField {
-  flex-grow: 1;
 }
 
 .addImageWrapper {
@@ -32,6 +33,8 @@
 }
 
 .addImage {
+  /* Layout */
+  /* Maintain aspect ratio */
   position: absolute;
   top: 0;
   bottom: 0;
@@ -39,12 +42,49 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: lightgrey;
   display: flex;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
   margin-top: 0;
+
+  /* Colors */
+  background-color: #F2F2F2;
+  border-style: dashed;
+  border-color: #E6E6E6;
+  border-width: 2px;
+
+  /* Behaviour */
+  cursor: pointer;
+}
+
+.chooseImageText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.chooseImage {
+  @apply --marketplaceH4FontStyles;
+  color: var(--matterColor);
+
+  margin-top: 0;
+  margin-bottom: 0;
+  @media (--desktopViewport) {
+    margin-top: 0;
+    margin-bottom: 0;
+   }
+ }
+
+.imageTypes {
+  @apply --marketplaceH5FontStyles;
+  color: var(--matterColorAnti);
+
+  margin-top: 0;
+  margin-bottom: 0;
+  @media (--desktopViewport) {
+    margin-top: 0;
+    margin-bottom: 0;
+   }
 }
 
 .addImageInput {
@@ -56,7 +96,11 @@
   clear: both;
 }
 
-.submitButton {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.tip {
+  color: var(--matterColorAnti);
+}
+
+.submitButton {
+  margin-top: auto;
+  margin-bottom: 24px;
 }

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -1,12 +1,12 @@
 import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { isEqual } from 'lodash';
 import { arrayMove } from 'react-sortable-hoc';
 import classNames from 'classnames';
 import { noEmptyArray } from '../../util/validators';
-import { AddImages, Button, ValidationError } from '../../components';
+import { AddImages, PrimaryButton, ValidationError } from '../../components';
 
 import css from './EditListingPhotosForm.css';
 
@@ -27,7 +27,7 @@ const RenderAddImage = props => {
   );
 };
 
-const { func, object, shape, string } = PropTypes;
+const { func, node, object, shape, string } = PropTypes;
 
 RenderAddImage.propTypes = {
   accept: string.isRequired,
@@ -36,7 +36,7 @@ RenderAddImage.propTypes = {
     onChange: func.isRequired,
     name: string.isRequired,
   }).isRequired,
-  label: string.isRequired,
+  label: node.isRequired,
   type: string.isRequired,
 };
 
@@ -77,6 +77,19 @@ export class EditListingPhotosFormComponent extends Component {
       submitting,
     } = this.props;
 
+    const chooseImageText = (
+      <span className={css.chooseImageText}>
+        <span className={css.chooseImage}>
+          <FormattedMessage id="EditListingPhotosForm.chooseImage" />
+        </span>
+        <span className={css.imageTypes}>
+          <FormattedMessage id="EditListingPhotosForm.imageTypes" />
+        </span>
+      </span>
+      );
+
+    // TODO Add tip #2: re-order text
+
     const imageRequiredMessage = intl.formatMessage({ id: 'EditListingPhotosForm.imageRequired' });
 
     const classes = classNames(css.root, className);
@@ -86,9 +99,10 @@ export class EditListingPhotosFormComponent extends Component {
 
         <AddImages className={css.imagesField} images={images} onSortEnd={this.onSortEnd}>
           <Field
+            id="EditListingPhotosForm.AddImages"
             accept={ACCEPT_IMAGES}
             component={RenderAddImage}
-            label="+ Add image"
+            label={chooseImageText}
             name="addImage"
             onChange={this.onImageUploadHandler}
             type="file"
@@ -110,13 +124,17 @@ export class EditListingPhotosFormComponent extends Component {
           />
         </AddImages>
 
-        <Button
+        <p className={css.tip}>
+          <FormattedMessage id="EditListingPhotosForm.addImagesTip" />
+        </p>
+
+        <PrimaryButton
           className={css.submitButton}
           type="submit"
           disabled={invalid || submitting || disabled}
         >
           {saveActionMsg}
-        </Button>
+        </PrimaryButton>
       </form>
     );
   }

src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap

@@ -9,7 +9,21 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
     <Field
       accept="image/*"
       component={[Function]}
-      label="+ Add image"
+      id="EditListingPhotosForm.AddImages"
+      label={
+        <span>
+          <span>
+            <FormattedMessage
+              id="EditListingPhotosForm.chooseImage"
+              values={Object {}} />
+          </span>
+          <span>
+            <FormattedMessage
+              id="EditListingPhotosForm.imageTypes"
+              values={Object {}} />
+          </span>
+        </span>
+      }
       name="addImage"
       onChange={[Function]}
       type="file" />
@@ -23,11 +37,14 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
         ]
       } />
   </AddImages>
-  <Button
-    className={null}
-    rootClassName={null}
+  <p>
+    <FormattedMessage
+      id="EditListingPhotosForm.addImagesTip"
+      values={Object {}} />
+  </p>
+  <Component
     type="submit">
     Publish listing
-  </Button>
+  </Component>
 </form>
 `;

src/translations/en.json

@@ -61,7 +61,10 @@
   "EditListingPage.titleEditListing": "Edit listing",
   "EditListingPhotosForm.bankAccountNumberRequired": "You need to add a bank account number.",
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
-  "EditListingPhotosPanel.title": "Add photos",
+  "EditListingPhotosForm.chooseImage": "+ Choose an image...",
+  "EditListingPhotosForm.imageTypes": ".JPG, .GIF or .PNG max. 5mb",
+  "EditListingPhotosForm.addImagesTip": "Tip: Choose 2-3 best photos of your sauna from different angles in a good light that really show the space.",
+  "EditListingPhotosPanel.title": "Add a few photos",
   "EditListingPricingForm.priceInputPlaceholder": "Choose your price...",
   "EditListingPricingForm.pricePerNight": "Price per night in euros",
   "EditListingPricingForm.priceRequired": "You need to add a valid price.",