Merge pull request #276 from sharetribe/checkout-fixes-merge-fix

Checkout fixes merge fix

src/components/DateRangeInputField/DateRangeInput.css

@@ -3,7 +3,7 @@
 :root {
   --selectionHeight: 36px;
   --hoveredOverlayColor: rgba(255, 255, 255, 0.2);
-  --datepickerDistanceToTop: 242px;
+  --datepickerDistanceToTop: 252px;
 }
 
 .inputRoot {
@@ -17,7 +17,7 @@
     display: block;
   }
   & :global(.DateRangePicker__picker--horizontal) {
-    top: 34px;
+    top: 36px;
     width: 100%;
     min-height: calc(100vh - var(--datepickerDistanceToTop));
     background-color: var(--marketplaceColor);
@@ -43,10 +43,18 @@
   }
   & :global(.DayPicker__week-header) {
     color: var(--matterColorLight);
+    top: 57px;
+  }
+
+  & :global(.DayPicker__week-header li) {
+    font-weight: 400;
   }
 
   & :global(.CalendarMonth__caption) {
     color: var(--matterColorLight);
+    @apply --marketplaceH2FontStyles;
+    margin: 1px 0 14px;
+    font-weight: 400;
   }
   & :global(.DayPickerNavigation__prev),
   & :global(.DayPickerNavigation__next) {
@@ -64,12 +72,17 @@
       margin-bottom: 0;
     }
   }
+
+  /* Add an underline for '.renderedDay' */
   & :global(.CalendarDay--today) {
-    text-decoration: underline;
+    background-image: url("data:image/svg+xml;utf8,<svg width='14' height='2' viewBox='0 0 14 2' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h14v2H0z' fill='#FFF' fill-rule='evenodd'/></svg>");
+    background-position: center 30px;
   }
+
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay--hovered-span),
   & :global(.CalendarDay--selected-span) {
+    background-image: transparent;
     background-color: transparent;
   }
   & :global(.CalendarDay--hovered-span .renderedDay) {
@@ -91,6 +104,7 @@
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay--selected-start) {
     background-color: transparent;
+    background-image: none;
   }
   & :global(.CalendarDay--selected-start .renderedDay) {
     display: flex;
@@ -175,15 +189,15 @@
 .withMobileMargins {
   & :global(.DateRangePickerInput) {
     width: calc(100% - 48px);
-    margin: 0 24px;
+    margin: 0 24px 3px 24px;
   }
 
   /* Create gutter between inputs */
   & :global(.DateInput) {
-    width: calc(100% - 9px);
+    width: calc(100% - 6px);
   }
   & :global(.DateInput:first-of-type) {
-    margin-right: 18px;
+    margin-right: 12px;
   }
 }
 

src/components/DateRangeInputField/DateRangeInputField.css

@@ -33,15 +33,17 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
+  transition: all 0.15s ease-out;
 }
 
 .input {
   flex-basis: 50%;
   border-bottom-style: solid;
-  border-bottom-width: 3px;
+  border-bottom-width: 2px;
   border-bottom-color: var(--attentionColor);
 
   transition: border-bottom-color var(--transitionStyle);
+  transition: all 0.15s ease-out;
 
   &:hover,
   &:focus {
@@ -73,10 +75,11 @@
   /* Gutter between inputs (when calendar is not visible) */
   & .startDateLabel,
   & .endDateLabel {
-    flex-basis: calc(50% - 9px);
+    flex-basis: calc(50% - 6px);
   }
 
   & .input {
-    flex-basis: calc(50% - 9px);
+    flex-basis: calc(50% - 6px);
+    transition: all 0.15s ease-out;
   }
 }

src/containers/BookingDatesForm/BookingDatesForm.css

@@ -7,7 +7,7 @@
 
 .bookingDates {
   flex-shrink: 0;
-  margin-bottom: 46px;
+  margin-bottom: 54px;
 }
 
 .priceBreakdownContainer {
@@ -40,6 +40,7 @@
 
 .smallPrint {
   @apply --marketplaceTinyFontStyles;
+  color: var(--matterColorAnti);
   text-align: center;
   margin: auto 24px 21px 24px;
   flex-shrink: 0;

src/containers/BookingDatesForm/BookingDatesForm.js

@@ -101,14 +101,14 @@ export const BookingDatesFormComponent = props => {
   const endDateErrorMessage = intl.formatMessage({ id: 'DateRangeInputField.invalidEndDate' });
 
   const hasBookingInfo = startDate && endDate;
-  const bookingInfo = (
-    <div className={css.priceBreakdownContainer}>
-      <h3 className={css.priceBreakdownTitle}>
-        <FormattedMessage id="BookingDatesForm.priceBreakdownTitle" />
-      </h3>
-      {breakdown(startDate, endDate, unitPrice)}
-    </div>
-  );
+  const bookingInfo = hasBookingInfo
+    ? <div className={css.priceBreakdownContainer}>
+        <h3 className={css.priceBreakdownTitle}>
+          <FormattedMessage id="BookingDatesForm.priceBreakdownTitle" />
+        </h3>
+        {breakdown(startDate, endDate, unitPrice)}
+      </div>
+    : null;
 
   const submitDisabled = submitting || invalid || !hasBookingInfo;
 

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

@@ -92,13 +92,6 @@ exports[`BookingDatesForm matches snapshot without selected dates 1`] = `
         [Function],
       ]
     } />
-  <div>
-    <h3>
-      <FormattedMessage
-        id="BookingDatesForm.priceBreakdownTitle"
-        values={Object {}} />
-    </h3>
-  </div>
   <p>
     <FormattedMessage
       id="BookingDatesForm.youWontBeChargedInfo"

src/containers/ListingPage/ListingPage.css

@@ -101,7 +101,7 @@
 .author {
   width: 100%;
   @apply --marketplaceH4FontStyles;
-  margin-top: 2px;
+  margin-top: 7px;
   margin-bottom: 0;
   @media (--desktopViewport) {
     margin-top: 0;
@@ -212,7 +212,7 @@
 
 .modalHeading {
   margin-top: 89px;
-  margin-bottom: 33px;
+  margin-bottom: 36px;
   padding: 0 24px;
 }