Merge pull request #292 from sharetribe/design-review

various design review fixes
2026-07-28 20:53:24 +10:00 · 2017-07-10 18:32:10 +03:00 · 2017-07-10 18:32:10 +03:00 · c3b5c1df3f
commit c3b5c1df3f
parent ac10d2e0c7 a991f3b043
19 changed files with 61 additions and 19 deletions
--- a/src/components/AddImages/AddImages.css
+++ b/src/components/AddImages/AddImages.css
@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
  width: 100%;
  min-height: 120px;
@ -17,7 +19,7 @@
  float: left;
  position: relative;
  width: 100%;
-  margin: 5px 0;
+  margin: 5px 0 12px 0;
  overflow: hidden;
 }

@ -35,6 +37,7 @@
  width: 100%;
  height: 100%;
  object-fit: cover;
+  border-radius: var(--borderRadius);
 }

 .thumbnailLoading {
--- a/src/components/Avatar/Avatar.css
+++ b/src/components/Avatar/Avatar.css
@ -62,3 +62,15 @@
  background-color: var(--matterColorAnti);
  color: var(--matterColorLight);
 }
+
+.initials {
+  padding-bottom: 4px;
+}
+
+.mediumAvatar .initials {
+  padding-bottom: 5px;
+}
+
+.largeAvatar .initials {
+  padding-bottom: 6px;
+}
--- a/src/components/Avatar/Avatar.js
+++ b/src/components/Avatar/Avatar.js
@ -12,7 +12,7 @@ const Avatar = props => {

  const placeHolderAvatar = (
    <div className={classes} title={authorName}>
-      <span>{initials}</span>
+      <span className={css.initials}>{initials}</span>
    </div>
  );

--- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.css
+++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.css
@ -10,3 +10,7 @@
 .form {
  flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}
--- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
+++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
@ -13,7 +13,7 @@ const EditListingDescriptionPanel = props => {

  return (
    <div className={classes}>
-      <h1><FormattedMessage id="EditListingDescriptionPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingDescriptionPanel.title" /></h1>
      <EditListingDescriptionForm
        className={css.form}
        initialValues={{ title, description }}
--- a/src/components/EditListingLocationPanel/EditListingLocationPanel.css
+++ b/src/components/EditListingLocationPanel/EditListingLocationPanel.css
@ -10,3 +10,7 @@
 .form {
  flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}
--- a/src/components/EditListingLocationPanel/EditListingLocationPanel.js
+++ b/src/components/EditListingLocationPanel/EditListingLocationPanel.js
@ -39,7 +39,7 @@ const EditListingLocationPanel = props => {

  return (
    <div className={classes}>
-      <h1><FormattedMessage id="EditListingLocationPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingLocationPanel.title" /></h1>
      <EditListingLocationForm
        className={css.form}
        initialValues={initialSearchFormValues}
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
@ -24,3 +24,7 @@
  margin-bottom: 36px;
  padding: 0 24px;
 }
+
+.title {
+  margin-bottom: 19px;
+}
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
@ -90,7 +90,7 @@ class EditListingPhotosPanel extends Component {

    return (
      <div className={classes}>
-        <h1><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
+        <h1 className={css.title}><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
        <EditListingPhotosForm
          className={css.form}
          disabled={fetchInProgress}
--- a/src/components/EditListingPricingPanel/EditListingPricingPanel.css
+++ b/src/components/EditListingPricingPanel/EditListingPricingPanel.css
@ -10,3 +10,7 @@
 .form {
  flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}
--- a/src/components/EditListingPricingPanel/EditListingPricingPanel.js
+++ b/src/components/EditListingPricingPanel/EditListingPricingPanel.js
@ -13,7 +13,7 @@ const EditListingPricingPanel = props => {

  return (
    <div className={classes}>
-      <h1><FormattedMessage id="EditListingPricingPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingPricingPanel.title" /></h1>
      <EditListingPricingForm className={css.form} initialValues={{ price }} onSubmit={onSubmit} />
    </div>
  );
--- a/src/components/EditListingWizard/EditListingWizard.css
+++ b/src/components/EditListingWizard/EditListingWizard.css
@ -10,8 +10,7 @@
  /* Layout */
  display: flex;
  flex-direction: row;
-  justify-content: space-between;
-  padding: 11px 24px 0 24px;
+  padding: 10px 24px 0 24px;

  border-top-width: 1px;
  border-top-color: var(--matterColorNegative);
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@ -3,12 +3,11 @@
 .root {
  display: flex;
  flex-direction: row;
-  justify-content: space-between;
  overflow-x: auto;
 }

 .tab {
-  margin-left: 24px;
+  margin-left: 16px;

  &:first-child {
    margin-left: 0;
@ -39,10 +38,11 @@

 .selectedLink {
  border-bottom: 2px solid var(--matterColorDark);
+  color: var(--matterColorDark);
 }

 .disabled {
  pointer-events: none;
-  color: #999;
+  color: var(--matterColorAnti);
  text-decoration: none;
 }
--- a/src/components/TopbarDesktop/snapshots/TopbarDesktop.test.js.snap
+++ b/src/components/TopbarDesktop/snapshots/TopbarDesktop.test.js.snap
@ -92,7 +92,8 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
      <div
        className=""
        title="">
-        <span>
+        <span
+          className={undefined}>
          
        </span>
      </div>
--- a/src/containers/EditListingDescriptionForm/snapshots/EditListingDescriptionForm.test.js.snap
+++ b/src/containers/EditListingDescriptionForm/snapshots/EditListingDescriptionForm.test.js.snap
@ -37,7 +37,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
      onDragStart={[Function]}
      onDrop={[Function]}
      onFocus={[Function]}
-      placeholder=" "
+      placeholder="How many people can fit in at once? Does the sauna come with towels?"
      value="" />
  </div>
  <button
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
@ -11,6 +11,7 @@

 .imagesField {
  flex-shrink: 0;
+  margin: 1px 0 11px 0;
 }

 .addImageWrapper {
@ -50,10 +51,11 @@
  margin-top: 0;

  /* Colors */
-  background-color: #F2F2F2;
+  background-color: #F7F7F7;
  border-style: dashed;
  border-color: #E6E6E6;
  border-width: 2px;
+  border-radius: 2px;

  /* Behaviour */
  cursor: pointer;
@ -68,6 +70,7 @@
 .chooseImage {
  @apply --marketplaceH4FontStyles;
  color: var(--matterColor);
+  font-weight: var(--fontWeightSemiBold);

  margin-top: 0;
  margin-bottom: 0;
@ -101,6 +104,8 @@
 .tip {
  flex-shrink: 0;
  color: var(--matterColorAnti);
+  margin-top: 0;
+  margin-bottom: 60px;
 }

 .error {
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@ -159,8 +159,9 @@
  /* Font */
  @apply --marketplaceH4FontStyles;
  color: var(--matterColor);
+  line-height: 18px;

-  margin-top: 0;
+  margin-top: 3px;
  margin-bottom: 0px;
  @media (--desktopViewport) {
    margin-top: 0;
@ -172,7 +173,7 @@
  /* Font */
  @apply --marketplaceH5FontStyles;

-  margin-top: 4px;
+  margin-top: 0px;
  margin-bottom: 0px;
  @media (--desktopViewport) {
    margin-top: 4px;
@ -200,6 +201,9 @@

 .namePending {
  font-weight: var(--fontWeightBold);
+  margin-top: 1px;
+  line-height: 18px;
+  margin-bottom: 3px;
 }

 .timePending {
--- a/src/containers/InboxPage/snapshots/InboxPage.test.js.snap
+++ b/src/containers/InboxPage/snapshots/InboxPage.test.js.snap
@ -226,7 +226,8 @@ exports[`InboxPage matches snapshot 2`] = `
    <div
      className=""
      title="provider-user-id first name provider-user-id last name">
-      <span>
+      <span
+        className={undefined}>
        pp
      </span>
    </div>
@ -480,7 +481,8 @@ exports[`InboxPage matches snapshot 4`] = `
    <div
      className=""
      title="customer-user-id first name customer-user-id last name">
-      <span>
+      <span
+        className={undefined}>
        cc
      </span>
    </div>
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -45,7 +45,7 @@
  "DateRangeInputField.screenReaderInputMessage": "Date input",
  "DateRangeInputField.startDatePlaceholderText": "Add start date",
  "EditListingDescriptionForm.description": "Describe your sauna",
-  "EditListingDescriptionForm.descriptionPlaceholder": " ",
+  "EditListingDescriptionForm.descriptionPlaceholder": "How many people can fit in at once? Does the sauna come with towels?",
  "EditListingDescriptionForm.descriptionRequired": "You need to add a description.",
  "EditListingDescriptionForm.maxLength": "Must be {maxLength} characters or less",
  "EditListingDescriptionForm.title": "Name of your sauna",