[chore]: Adjust cart styling (#2104)

magento · Jan 17, 2020 · ca08ad8 · ca08ad8
1 parent d4c13b7
commit ca08ad8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git a/packages/venia-ui/lib/components/Accordion/section.css b/packages/venia-ui/lib/components/Accordion/section.css
@@ -7,21 +7,25 @@
 }
 
 .contents_container {
-    padding-left: 2em;
+    padding: 1.5rem;
+}
+.contents_container:empty {
+    display: none;
 }
 
 .title {
+    font-weight: 600;
 }
 
 .title_container {
     cursor: pointer;
     display: flex;
+    height: 4.5rem;
     justify-content: space-between;
-    padding: 2em;
+    padding: 0 1.5rem;
     width: 100%;
 }
 
 .title_container_open {
     composes: title_container;
-    border-bottom: solid 1px rgb(var(--venia-border));
 }
diff --git a/...ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap b/...ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap
@@ -70,7 +70,7 @@ exports[`renders PriceSummary correctly 1`] = `
       type="button"
     >
       <span>
-        PROCEED TO CHECKOUT
+        Proceed to Checkout
       </span>
     </button>
   </div>

diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css
@@ -1,12 +1,10 @@
 .root {
-    padding: 0 1rem 1rem 1rem;
 }
 
 .lineItems {
     display: grid;
     grid-row-gap: 0.75rem;
     grid-template-columns: 50% 50%;
-    padding-bottom: 1rem;
     line-height: 1.5rem;
 }
 
@@ -29,5 +27,10 @@
 }
 
 .checkoutButton_container {
-    text-align: center;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    margin-top: 1rem;
+    min-height: 5.5rem;
+    width: 100%;
 }
diff --git a/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js b/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js
@@ -91,7 +91,7 @@ const PriceSummary = props => {
             </div>
             <div className={classes.checkoutButton_container}>
                 <Button priority={'high'} onClick={handleProceedToCheckout}>
-                    {'PROCEED TO CHECKOUT'}
+                    {'Proceed to Checkout'}
                 </Button>
             </div>
         </div>

diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css
@@ -1,13 +1,13 @@
 .root {
-    padding-top: 1.5rem;
-    max-width: 64rem;
+    padding: 2.5rem 3rem;
+    max-width: 1080px;
     margin: 0 auto;
 }
 
 .body {
     display: grid;
     gap: 2rem;
-    grid-template-columns: 66% auto;
+    grid-template-columns: 1fr 18rem;
     /* The summary grid item spans the entire right column. */
     grid-template-areas:
         'items summary'
@@ -19,8 +19,7 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
 }
 
 .heading {
@@ -29,10 +28,14 @@
 
 .items_container {
     grid-area: items;
-
     /* TEMPORARY STYLES FOR SCROLLABLE SUMMARY, CAN BE REMOVED */
-    height: 900px;
-    border: 1px dotted red;
+    align-items: center;
+    border: 1px solid rgb(var(--venia-border));
+    border-radius: 0.5rem;
+    color: rgb(var(--venia-text-hint));
+    display: flex;
+    height: 40rem;
+    justify-content: center;
 }
 
 .price_adjustments_container {
@@ -57,17 +60,22 @@
     position: sticky;
     /*
      * TODO: Use CSS Properties (variables) or something instead of hardcoding this.
-     *  - 3.5 rem = min-height of nav header. See the "toolbar" class in header.css.
-     *  - 1 rem = Spacing just for the sticky container.
+     *  - 3.5rem = min-height of nav header. See the "toolbar" class in header.css.
+     *  - 2rem = padding-top of the cart page.
      */
-    top: calc(3.5rem + 1rem);
+    top: 5.5rem;
 }
 
 /*
  * Mobile-specific styles.
  */
 
-@media (max-width: 640px) {
+@media (max-width: 960px) {
+    .root {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+
     .body {
         /* Only one column in mobile view. */
         grid-template-columns: 100%;