CSS tweaks after merge

Signed-off-by: sirugh <rugh@adobe.com>
magento · Mar 20, 2020 · e5ad429 · e5ad429
1 parent 1ec72da
commit e5ad429
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 22 deletions.
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
@@ -8,20 +8,34 @@
     grid-template-columns: 2fr 1fr;
 }
 
+.heading_container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    grid-column: 1 / span 1;
+}
+
 .heading {
     line-height: 1.25em;
 }
 
-.signin_container {
-    grid-column: 1 / span 1;
+.stepper_heading {
+    line-height: 1.25em;
     border-bottom: 1px solid rgb(var(--venia-border));
+    padding-bottom: 2rem;
 }
 
-.heading_container {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
+.shipping_method_heading {
+    composes: stepper_heading;
+}
+
+.payment_information_heading {
+    composes: stepper_heading;
+}
+
+.signin_container {
     grid-column: 1 / span 1;
+    border-bottom: 1px solid rgb(var(--venia-border));
 }
 
 .empty_cart_container {
@@ -83,4 +97,14 @@
         grid-row: unset;
         height: auto;
     }
+
+    .stepper_heading {
+        padding-bottom: 1rem;
+    }
+
+    .payment_information_heading {
+        composes: stepper_heading;
+        /* On mobile, order summary has a top border, so avoid doubling up. */
+        border-bottom: unset;
+    }
 }
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -123,22 +123,18 @@ const CheckoutPage = props => {
                             : 'Review and Place Order'}
                     </h1>
                 </div>
-                <div className={classes.body}>
-                    <div className={classes.shipping_information_container}>
-                        <ShippingInformation
-                            onSave={setShippingInformationDone}
-                        />
-                    </div>
-                    <div className={classes.shipping_method_container}>
-                        {shippingMethodSection}
-                    </div>
-                    <div className={classes.payment_information_container}>
-                        {paymentInformationSection}
-                    </div>
-                    {itemsReview}
-                    <div className={classes.summary_container}>
-                        <OrderSummary isUpdating={isUpdating} />
-                    </div>
+                <div className={classes.shipping_information_container}>
+                    <ShippingInformation onSave={setShippingInformationDone} />
+                </div>
+                <div className={classes.shipping_method_container}>
+                    {shippingMethodSection}
+                </div>
+                <div className={classes.payment_information_container}>
+                    {paymentInformationSection}
+                </div>
+                {itemsReview}
+                <div className={classes.summary_container}>
+                    <OrderSummary isUpdating={isUpdating} />
                 </div>
                 {placeOrderButton}
             </Fragment>