fix: update order details style

bigcommerce · Dec 29, 2022 · e619926 · e619926
1 parent a7d4a5c
commit e619926
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -62,6 +62,7 @@ const Flex = styled('div')(({
   const flexWrap = isMobile ? 'wrap' : 'initial'
 
   return {
+    color: '#212121',
     display: 'flex',
     wordBreak: 'break-word',
     padding: '8px 0 0',
@@ -134,6 +135,7 @@ interface ProductProps <T> {
   showCheckbox?: boolean,
   setCheckedArr?: (items: Array<T & ProductItem>) => void
   selectAllText?: string,
+  totalText?: string,
 }
 
 export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props) => {
@@ -148,6 +150,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
     showCheckbox = false,
     setCheckedArr = noop,
     selectAllText = 'Select all products',
+    totalText = 'Total',
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
@@ -244,7 +247,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
             <ProductHead>Qty</ProductHead>
           </FlexItem>
           <FlexItem {...itemStyle.default}>
-            <ProductHead>Total</ProductHead>
+            <ProductHead>{totalText}</ProductHead>
           </FlexItem>
           {
             renderAction && (
@@ -356,7 +359,12 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
               padding={quantityEditable ? '10px 0 0' : ''}
               {...itemStyle.default}
             >
-              {isMobile && <span>Total:</span>}
+              {isMobile && (
+              <span>
+                {totalText}
+                :
+              </span>
+              )}
               {`${currency} ${getProductTotals(getQuantity(product) || 0, product.base_price)}`}
             </FlexItem>
 

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -92,7 +92,7 @@ const PaymentItemContainer = styled('div')((props: PaymentItemContainerProps) =>
 const StyledCurrency = styled('div')(() => ({
   display: 'flex',
   alignItems: 'center',
-  width: '40%',
+  width: '37%',
   justifyContent: 'space-between',
 }))
 

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderHistory.tsx b/apps/storefront/src/pages/orderDetail/components/OrderHistory.tsx
@@ -83,7 +83,10 @@ export const OrderHistory = () => {
   return (
     history.length > 0 ? (
       <Card>
-        <CardContent>
+        <CardContent sx={{
+          paddingBottom: '50px',
+        }}
+        >
           <Typography
             variant="h5"
             sx={{

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx
@@ -33,6 +33,7 @@ import {
 
 const ShipmentTitle = styled('span')(() => ({
   fontWeight: 'bold',
+  color: '#313440',
 }))
 
 export const OrderShipping = () => {
@@ -101,6 +102,7 @@ export const OrderShipping = () => {
             <CardContent>
               <Box sx={{
                 wordBreak: 'break-word',
+                color: '#313440',
               }}
               >
                 <Typography
@@ -158,6 +160,7 @@ export const OrderShipping = () => {
                         quantityKey="current_quantity_shipped"
                         products={shipment.itemsInfo}
                         currency={currency}
+                        totalText="Cost"
                       />
                     </Fragment>
                   ) : <></>
@@ -181,6 +184,7 @@ export const OrderShipping = () => {
                       quantityKey="not_shipping_number"
                       products={shipping.notShip.itemsInfo}
                       currency={currency}
+                      totalText="Cost"
                     />
                   </Fragment>
                 ) : <></>