fix: alignment issues

https://bigc-b2b.atlassian.net/browse/BUN-899
bigcommerce · Apr 20, 2023 · 5d3e7c4 · 5d3e7c4
1 parent 939a394
commit 5d3e7c4
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 20 deletions.
diff --git a/apps/storefront/src/components/B3DropDown.tsx b/apps/storefront/src/components/B3DropDown.tsx
@@ -57,6 +57,9 @@ export const B3DropDown: <T>(props: B3DropDownProps<T>) => ReactElement = ({
     >
       <ListItemButton
         onClick={handleClick}
+        sx={{
+          pr: 0,
+        }}
       >
         <ListItemText primary={title} />
         {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}

diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -123,7 +123,7 @@ const mobileItemStyle = {
   },
   qty: {
     width: '100%',
-    padding: '0 0 0 72px',
+    padding: '0 0 0 76px',
   },
 }
 
@@ -262,6 +262,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
           <FlexItem
             textAlignLocation={textAlign}
             {...itemStyle.default}
+            width={isMobile ? '100%' : actionWidth}
           >
             <ProductHead>{totalText}</ProductHead>
           </FlexItem>
@@ -416,7 +417,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
                 padding={quantityEditable ? '10px 0 0' : ''}
                 {...itemStyle.default}
                 width={isMobile ? '100%' : actionWidth}
-                textAlignLocation="right"
+                textAlignLocation={textAlign}
               >
                 {isMobile && (
                 <span>

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -162,7 +162,12 @@ const B3FilterMore:<T, Y> ({
 
       {
         ((fiterMoreInfo && fiterMoreInfo.length) || isShowMore) && (
-        <Box onClick={handleDialogClick}>
+        <Box
+          onClick={handleDialogClick}
+          sx={{
+            mr: '-10px',
+          }}
+        >
           {
             !isFiltering && (
             <IconButton

diff --git a/apps/storefront/src/components/layout/B3AccountInfo.tsx b/apps/storefront/src/components/layout/B3AccountInfo.tsx
@@ -105,7 +105,7 @@ export const B3AccountInfo = ({
             minWidth: '150px',
             display: 'flex',
             justifyContent: 'end',
-            mr: '8px',
+            mr: '-2px',
             fontSize: '16px',
             color: '#333333',
           }}

diff --git a/apps/storefront/src/components/upload/BulkUploadTable.tsx b/apps/storefront/src/components/upload/BulkUploadTable.tsx
@@ -236,7 +236,11 @@ const BulkUploadTable = (props: BulkUploadTableProps) => {
             handleOpenBtnList(e)
           }}
         >
-          <MoreHoriz />
+          <MoreHoriz
+            sx={{
+              color: '#5E637A',
+            }}
+          />
         </Button>
 
         <Menu

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -19,6 +19,10 @@ import {
   useMobile,
 } from '@/hooks'
 
+import {
+  PRODUCT_DEFAULT_IMAGE,
+} from '@/constants'
+
 import {
   OrderProductOption,
   EditableProductItem,
@@ -275,7 +279,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
               onChange={() => handleSelectChange(product.variant_id)}
             />
             <FlexItem>
-              <ProductImage src={product.imageUrl} />
+              <ProductImage src={product.imageUrl || PRODUCT_DEFAULT_IMAGE} />
               <Box
                 sx={{
                   marginLeft: '16px',

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -398,6 +398,7 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
             onProductChange={handleProductChange}
             currencyInfo={currencyInfo}
             setCheckedArr={setCheckedArr}
+            textAlign={isMobile ? 'left' : 'right'}
           />
 
           {

diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
@@ -116,6 +116,22 @@ const StyledImage = styled('img')(() => ({
   marginRight: '0.5rem',
 }))
 
+const StyleQuickOrderTable = styled(Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+
+  '& tbody': {
+    '& tr': {
+      '& td': {
+        verticalAlign: 'top',
+      },
+      '& td: first-of-type': {
+        paddingTop: '25px',
+      },
+    },
+  },
+}))
+
 interface QuickorderTableProps {
   setIsRequestLoading: Dispatch<SetStateAction<boolean>>,
   setCheckedArr: (values: CustomFieldItems) => void,
@@ -411,6 +427,9 @@ const QuickorderTable = ({
         />
       ),
       width: '15%',
+      style: {
+        textAlign: 'right',
+      },
     },
     {
       key: 'lastOrderedAt',
@@ -434,12 +453,7 @@ const QuickorderTable = ({
     <B3Sping
       isSpinning={isRequestLoading}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
+      <StyleQuickOrderTable>
         <Typography
           sx={{
             fontSize: '24px',
@@ -555,8 +569,7 @@ const QuickorderTable = ({
             />
           )}
         />
-
-      </Box>
+      </StyleQuickOrderTable>
     </B3Sping>
   )
 }

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -508,6 +508,7 @@ const ShoppingListDetails = ({
         currencyToken={currencyToken}
         setValidateFailureProducts={setValidateFailureProducts}
         setValidateSuccessProducts={setValidateSuccessProducts}
+        textAlign={isMobile ? 'left' : 'right'}
       />
 
       <ShoppingDetailDeleteItems

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
@@ -91,6 +91,13 @@ const ProductOptionText = styled('div')(() => ({
   color: '#455A64',
 }))
 
+const StyleTextField = styled(TextField)(() => ({
+  '& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button': {
+    marginTop: '-8px',
+    marginBottom: '8px',
+  },
+}))
+
 interface ChooseOptionsDialogProps {
   isOpen: boolean,
   product?: ShoppingListProductItem,
@@ -386,7 +393,7 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
                   </FlexItem>
 
                   <FlexItem>
-                    <TextField
+                    <StyleTextField
                       type="number"
                       variant="filled"
                       label="Qty"

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
@@ -221,7 +221,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
               <ProductTable
                 products={productList}
                 quantityEditable
-                textAlign="left"
+                textAlign={isMobile ? 'left' : 'right'}
                 canToProduct
                 onProductQuantityChange={onProductQuantityChange}
                 renderAction={(product) => (

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx
@@ -73,6 +73,7 @@ interface ShoppingProductsProps {
   onProductChange?: (products: ProductsProps[]) => void
   setValidateFailureProducts: (arr: ProductsProps[]) => void,
   setValidateSuccessProducts: (arr: ProductsProps[]) => void,
+  textAlign?: string,
 }
 
 interface FlexProps {
@@ -86,6 +87,7 @@ interface FlexItemProps {
   flexBasis?: string,
   alignItems?: string,
   flexDirection?: 'column' | 'inherit' | '-moz-initial' | 'initial' | 'revert' | 'unset' | 'column-reverse' | 'row' | 'row-reverse',
+  textAlignLocation?: string,
 }
 
 const Flex = styled('div')(({
@@ -127,8 +129,10 @@ const FlexItem = styled(Box)(({
   flexBasis,
   flexDirection = 'row',
   alignItems,
+  textAlignLocation,
 }: FlexItemProps) => ({
   display: 'flex',
+  justifyContent: textAlignLocation === 'right' ? 'flex-end' : 'flex-start',
   flexDirection,
   flexGrow: width ? 0 : 1,
   flexShrink: width ? 0 : 1,
@@ -189,6 +193,7 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
     allowJuniorPlaceOrder,
     setValidateFailureProducts,
     setValidateSuccessProducts,
+    textAlign = 'left',
   } = props
 
   const [isOpen, setOpen] = useState<boolean>(false)
@@ -375,18 +380,25 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
                     <FlexItem>
                       <ProductHead>Product</ProductHead>
                     </FlexItem>
-                    <FlexItem {...itemStyle.default}>
+                    <FlexItem
+                      {...itemStyle.default}
+                      textAlignLocation={textAlign}
+                    >
                       <ProductHead>Price</ProductHead>
                     </FlexItem>
                     <FlexItem
                       sx={{
                         justifyContent: 'center',
                       }}
                       {...itemStyle.default}
+                      textAlignLocation={textAlign}
                     >
                       <ProductHead>Qty</ProductHead>
                     </FlexItem>
-                    <FlexItem {...itemStyle.default}>
+                    <FlexItem
+                      {...itemStyle.default}
+                      textAlignLocation={textAlign}
+                    >
                       <ProductHead>Total</ProductHead>
                     </FlexItem>
                     <FlexItem {...itemStyle.delete}>
@@ -484,11 +496,15 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
                         </FlexItem>
                         <FlexItem
                           {...itemStyle.default}
+                          textAlignLocation={textAlign}
                         >
                           {isMobile && <span>Price: </span>}
                           {`${currencyToken}${price.toFixed(2)}`}
                         </FlexItem>
-                        <FlexItem {...itemStyle.default}>
+                        <FlexItem
+                          {...itemStyle.default}
+                          textAlignLocation={textAlign}
+                        >
                           <B3QuantityTextField
                             isStock={isStock}
                             maxQuantity={maxQuantity}
@@ -502,6 +518,7 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
                         </FlexItem>
                         <FlexItem
                           {...itemStyle.default}
+                          textAlignLocation={textAlign}
                         >
                           {isMobile && <div>Total: </div>}
                           {`${currencyToken}${total.toFixed(2)}`}

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -134,7 +134,7 @@ const StyledShoppingListTableContainer = styled('div')(() => ({
         verticalAlign: 'top',
       },
       '& td: first-of-type': {
-        verticalAlign: 'inherit',
+        paddingTop: '25px',
       },
     },
     '& tr: hover': {