refactored some of ordersummary

calblueprint · Apr 3, 2024 · 1999a01 · 1999a01
1 parent 99772a2
commit 1999a01
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 61 deletions.
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
@@ -23,7 +23,7 @@ export const CartItemsDiv = styled.div`
   align-items: center;
   border-radius: 10px;
   width: 750px;
-  overflow: scroll;
+  overflow: auto;
 `;
 
 export const BackDiv = styled.button`
@@ -130,7 +130,7 @@ export const ContentDiv = styled.div`
 `;
 
 export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
+  overflow: auto;
   width: 350px;
   height: 300px;
 `;

diff --git a/src/components/OrderSummaryFolder/OrderSummary.tsx b/src/components/OrderSummaryFolder/OrderSummary.tsx
@@ -2,15 +2,15 @@
 
 import { Body1, Body1Bold, Body2Light, Heading3Bold } from '@/styles/fonts';
 import {
-  HeaderShiftLeft,
-  OrderSummaryDiv,
-  HeaderShiftRight,
-  OrderTotalDiv,
-  PShiftLeft,
+  // HeaderShiftLeft,
+  // OrderSummaryDiv,
+  // HeaderShiftRight,
+  // OrderTotalDiv,
+  // PShiftLeft,
   WhiteBackgroundDiv,
-  ItemSummaryDiv,
-  Qty,
-  PShiftRight,
+  // ItemSummaryDiv,
+  // Qty,
+  // PShiftRight,
   ContainerDiv,
   TotalDiv,
   OrderRow,
@@ -98,7 +98,7 @@ export default function OrderSummary(props: {
             </OrderRow>
           </thead>
           <OrderTableBody>
-            {cartItems.map(cartItem => (
+            {cart.map(cartItem => (
               <OrderRow key={cartItem.id}>
                 <td>
                   <Body1>{cartItem.name}</Body1>

diff --git a/src/components/OrderSummaryFolder/styles.ts b/src/components/OrderSummaryFolder/styles.ts
@@ -1,61 +1,52 @@
 import COLORS from '@/styles/colors';
 import styled from 'styled-components';
 
-export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
-  width: 350px;
-  height: 300px;
-`;
+// export const OrderSummaryDiv = styled.div`
+//   overflow: scroll;
+//   width: 350px;
+//   height: 300px;
+// `;
 
-export const ItemSummaryDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 20px;
-  justify-content: space-between;
-  padding-left: 10px;
-  padding-right: 10px;
-`;
+// export const ItemSummaryDiv = styled.div`
+//   display: flex;
+//   flex-direction: row;
+//   margin-bottom: 20px;
+//   justify-content: space-between;
+//   padding-left: 10px;
+//   padding-right: 10px;
+// `;
 
-export const OrderTotalDiv = styled.div`
-  height: 50px;
-  padding-top: 10px;
-  width: 350px;
-  padding-left: 0px;
-  border-top: 1px black solid;
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
-`;
+// export const OrderTotalDiv = styled.div`
+//   height: 50px;
+//   padding-top: 10px;
+//   width: 350px;
+//   padding-left: 0px;
+//   border-top: 1px black solid;
+//   display: flex;
+//   flex-flow: row;
+//   justify-content: space-between;
+// `;
 
-export const Qty = styled.p`
-  width: 100%;
-  padding-left: 290px;
-`;
+// export const Qty = styled.p`
+//   width: 100%;
+//   padding-left: 290px;
+// `;
 
-export const WhiteBackgroundDiv = styled.div`
-  background: ${COLORS.white};
-  padding: 24px;
-  padding-bottom: 0px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
+// export const HeaderShiftRight = styled.h2`
+//   margin-right: 30px;
+// `;
 
-export const HeaderShiftRight = styled.h2`
-  margin-right: 30px;
-`;
+// export const PShiftRight = styled.p`
+//   margin-right: 30px;
+// `;
 
-export const PShiftRight = styled.p`
-  margin-right: 30px;
-`;
+// export const HeaderShiftLeft = styled.h2`
+//   margin-left: 15px;
+// `;
 
-export const HeaderShiftLeft = styled.h2`
-  margin-left: 15px;
-`;
-
-export const PShiftLeft = styled.p`
-  margin-left: 15px;
-`;
+// export const PShiftLeft = styled.p`
+//   margin-left: 15px;
+// `;
 
 
 export const ContainerDiv = styled.div`
@@ -89,9 +80,27 @@ export const OrderRow = styled.tr`
 
 export const OrderTable = styled.table`
   width: 100%;
-  max-height: 200px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
 `;
 
 export const OrderTableBody = styled.tbody`
-  overflow: scroll;
+  overflow: auto;
+  display: block;
+  flex-grow: 1;
+  min-height: 0;
+`;
+
+export const WhiteBackgroundDiv = styled.div`
+  min-height: 0;
+  background: ${COLORS.white};
+  padding: 24px;
+  padding-bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex-grow: 1;
+  overflow: hidden;
 `;