diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.module.css b/src/pages/product/components/ActionsButtons/ActionsButtons.module.css index e50e351..ffb71c3 100644 --- a/src/pages/product/components/ActionsButtons/ActionsButtons.module.css +++ b/src/pages/product/components/ActionsButtons/ActionsButtons.module.css @@ -16,7 +16,7 @@ align-items: center; padding: 0 1px; border-radius: 888px; - width: 140px; + width: 110px; height: 48px; } diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.tsx b/src/pages/product/components/ActionsButtons/ActionsButtons.tsx index 0c753da..e9fc4b8 100644 --- a/src/pages/product/components/ActionsButtons/ActionsButtons.tsx +++ b/src/pages/product/components/ActionsButtons/ActionsButtons.tsx @@ -58,10 +58,11 @@ export default function ActionsButtons({ className={styles.quantityButton} {...(min && { disabled: quantity === min })} style={{ - width: 48, - height: 48, - minWidth: 48, + width: 36, + height: 36, + minWidth: 36, borderColor: "#DEDEE0", + backgroundColor: "var(--secondary-background)" }} /> ) : ( @@ -85,10 +86,10 @@ export default function ActionsButtons({ className={styles.addButton} style={{ background: "#FEF2F2", - width: 48, - height: 48, + width: 36, + height: 36, border: "none", - minWidth: 48, + minWidth: 36, }} /> @@ -112,10 +113,10 @@ export default function ActionsButtons({ className={styles.quantityButton} {...(max && { disabled: quantity >= max })} style={{ - width: 48, - height: 48, + width: 36, + height: 36, borderColor: "#DEDEE0", - minWidth: 48, + minWidth: 36, }} /> diff --git a/src/pages/product/page.tsx b/src/pages/product/page.tsx index 319269e..572f952 100644 --- a/src/pages/product/page.tsx +++ b/src/pages/product/page.tsx @@ -176,7 +176,7 @@ export default function ProductDetailPage({ return (