frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update default styles and components

Browse Source
This commit is contained in:
Rami Bitar
2026-05-10 15:49:28 -04:00
parent 383a593c42
commit 0a1fbd62bb
13 changed files with 144 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/commerce/cart-drawer.tsx
View File

@@ -98,10 +98,10 @@ const CartDrawer: React.FC = () => {
return (
<div
key={item.id}
className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0"
className="flex items-start space-x-4 pb-6 border-b border-border last:border-b-0"
>
{/* Product Image */}
<div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
<div className="w-20 h-20 bg-muted rounded-lg overflow-hidden flex-shrink-0">
{image ? (
<img
src={image}
@@ -109,7 +109,7 @@ const CartDrawer: React.FC = () => {
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
<ImageIcon size={24} />
</div>
)}
@@ -117,13 +117,13 @@ const CartDrawer: React.FC = () => {
{/* Product Details */}
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
<h4 className="font-semibold text-foreground mb-1 line-clamp-2">
{item.merchandise.product.title}
</h4>
{/* Variant Info */}
{selectedOptions.length > 0 && (
<div className="text-sm text-gray-500 mb-2">
<div className="text-sm text-muted-foreground mb-2">
{selectedOptions.map((option, index) => (
<span key={option.name}>
{option.value}
@@ -137,7 +137,7 @@ const CartDrawer: React.FC = () => {
{/* Quantity Controls */}
<div className="flex items-center mt-3">
<div className="flex items-center border border-gray-300 rounded-lg">
<div className="flex items-center border border-border rounded-lg">
<Button
onClick={() =>
updateItemQuantity(item.id, item.quantity - 1)
@@ -169,7 +169,7 @@ const CartDrawer: React.FC = () => {
{/* Price */}
<div className="flex-shrink-0">
<span className="text-sm font-semibold text-gray-900">
<span className="text-sm font-semibold text-foreground">
${parseFloat(item.merchandise.price.amount).toFixed(2)}
</span>
</div>
@@ -181,7 +181,7 @@ const CartDrawer: React.FC = () => {
variant="ghost"
size="icon-sm"
disabled={loading}
className="text-gray-400 hover:text-gray-700"
className="text-muted-foreground hover:text-foreground"
>
<X size={18} />
</Button>
@@ -204,7 +204,7 @@ const CartDrawer: React.FC = () => {
</span>
</div>
<div className="text-sm text-gray-500 mb-4">
<div className="text-sm text-muted-foreground mb-4">
Shipping and taxes calculated at checkout
</div>