Change BookingPanel title margin on tx page

sharetribe · Dec 27, 2018 · 39539f2 · 39539f2
1 parent 2a728a6
commit 39539f2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
@@ -52,6 +52,7 @@ const BookingPanel = props => {
   const {
     rootClassName,
     className,
+    titleClassName,
     listing,
     isOwnListing,
     unitType,
@@ -89,6 +90,7 @@ const BookingPanel = props => {
     : 'BookingPanel.perUnit';
 
   const classes = classNames(rootClassName || css.root, className);
+  const titleClasses = classNames(css.bookingTitle, titleClassName);
 
   return (
     <div className={classes}>
@@ -108,7 +110,7 @@ const BookingPanel = props => {
         </div>
 
         <div className={css.bookingHeading}>
-          <h2 className={css.bookingTitle}>{title}</h2>
+          <h2 className={titleClasses}>{title}</h2>
           {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
         {!isClosed ? (
@@ -154,6 +156,7 @@ const BookingPanel = props => {
 BookingPanel.defaultProps = {
   rootClassName: null,
   className: null,
+  titleClassName: null,
   isOwnListing: false,
   subTitle: null,
   unitType: config.bookingUnitType,
@@ -164,6 +167,7 @@ BookingPanel.defaultProps = {
 BookingPanel.propTypes = {
   rootClassName: string,
   className: string,
+  titleClassName: string,
   listing: propTypes.listing.isRequired,
   isOwnListing: bool,
   unitType: propTypes.bookingUnitType,

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
@@ -419,3 +419,7 @@
 .bookingPanel {
   margin: 16px 48px 48px 48px;
 }
+
+.bookingTitle {
+  margin-bottom: 1px;
+}
diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -198,6 +198,7 @@ export const BookingPanelMaybe = props => {
   return canShowBookingPanel ? (
     <BookingPanel
       className={css.bookingPanel}
+      titleClassName={css.bookingTitle}
       isOwnListing={false}
       listing={listing}
       handleBookingSubmit={() => console.log('submit')}