Change booking breakdown layout

Make the subtotal line stick out a bit more.
sharetribe · Apr 5, 2019 · 9a0f1df · 9a0f1df
1 parent 1951d21
commit 9a0f1df
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -32,6 +32,21 @@
   justify-content: space-between;
 }
 
+.subTotalLineItem {
+  @apply --marketplaceH4FontStyles;
+  font-weight: var(--fontWeightBold);
+
+  margin: 4px 0 1px 0;
+
+  @media (--viewportMedium) {
+    margin: 6px 0 9px 0;
+  }
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .itemLabel {
   flex: 1;
   margin-top: 1px; /* align with baseline */

diff --git a/src/components/BookingBreakdown/LineItemSubTotalMaybe.js b/src/components/BookingBreakdown/LineItemSubTotalMaybe.js
@@ -81,7 +81,7 @@ const LineItemSubTotalMaybe = props => {
   const formattedSubTotal = lineItems.length > 0 ? formatMoney(intl, subTotal) : null;
 
   return formattedSubTotal && showSubTotal ? (
-    <div className={css.lineItem}>
+    <div className={css.subTotalLineItem}>
       <span className={css.itemLabel}>
         <FormattedMessage id="BookingBreakdown.subTotal" />
       </span>