Further modify /cart UI

Author: scorpiontornado

components/cart/clothingItem.tsx

@@ -23,7 +23,10 @@ const ClothingItem = ({
   );
   return (
     <Row className={"mb-5 " + styles["clothingItem"]}>
-      <Col className="d-flex text-center justify-content-center align-items-center">
+      <Col
+        className="d-flex text-center justify-content-center align-items-center"
+        xs="4"
+      >
         <Image
           src={item.product.images[0]}
           width={150}
@@ -33,7 +36,7 @@ const ClothingItem = ({
         />
         <h5 className="m-0 ms-4">{item.product.name}</h5>
       </Col>
-      <Col className={styles["clothingRow"]}>
+      <Col className={styles["clothingRow"]} xs="2">
         <h5 className="m-0">${(item.price.cents ?? 0) / 100}</h5>
       </Col>
       <Col className={styles["clothingRow"]}>

pages/cart.tsx

@@ -78,17 +78,17 @@ const Cart = () => {
         </Row>
         <Container
           className="d-flex flex-column align-items-between"
-          style={{ width: "80%" }}
+          style={{ width: "75%" }}
           fluid
         >
           {/* TODO: align header row with ClothingItem at smaller display widths - bootstrap columns? */}
           {/* <Row className={styles["cartHeader"]}> */}
           <Row className="mt-5 my-4">
             {/* <Col className={styles["cartHeaderCol"]}> */}
-            <Col className="text-center">
+            <Col className="text-center" xs="4">
               <h4>Item</h4>
             </Col>
-            <Col className="text-center">
+            <Col className="text-center" xs="2">
               <h4>Price</h4>
             </Col>
             <Col className="text-center">
@@ -109,18 +109,20 @@ const Cart = () => {
               />
             ))}
           </Row>
-        </Container>
-        <Container className="d-flex flex-column align-items-end mt-3">
-          <h4 className="w-auto">Total: ${calculateTotal()}</h4>
-          <Button
-            className="mt-3"
-            color="primary"
-            target="_blank"
-            onClick={() => handlePay()}
-            style={{ width: 200, color: "white" }}
-          >
-            <h5 style={{ color: "white", margin: "0" }}>Buy Now</h5>
-          </Button>
+          <Row>
+            <Col className="d-flex flex-column align-items-end me-1">
+              <h4> Total: ${calculateTotal()}</h4>
+              <Button
+                className="mt-3"
+                color="primary"
+                target="_blank"
+                onClick={() => handlePay()}
+                style={{ width: 200, color: "white" }}
+              >
+                <h5 style={{ color: "white", margin: "0" }}>Check Out</h5>
+              </Button>
+            </Col>
+          </Row>
         </Container>
       </section>
     </>

styles/modules/Cart.module.scss

@@ -28,10 +28,11 @@
     // margin-bottom: 40px;
     // margin-left: 40px;
     // margin-right: 40px;
-    background-color: rgb(238, 238, 238);
+    padding: 0px;
+    background-color: rgb(242, 242, 242);
     display: flex;
     align-items: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
     border-radius: 4px;
 }