improve cart mobile styles

This commit is contained in:
2025-09-10 06:34:34 +03:00
parent 8b3e58e833
commit 76433684e7
5 changed files with 43 additions and 44 deletions

View File

@@ -38,7 +38,7 @@ export default function DiscountCode({ cart }: {
const loading = toast.loading(t('cart:discountCode.removeLoading'));
const result = await removePromotionCodeAction(code, appliedCodes)
toast.dismiss(loading);
if (result.success) {
toast.success(t('cart:discountCode.removeSuccess'));
@@ -50,7 +50,7 @@ export default function DiscountCode({ cart }: {
const addPromotionCode = async (code: string) => {
const loading = toast.loading(t('cart:discountCode.addLoading'));
const result = await addPromotionCodeAction(code)
toast.dismiss(loading);
if (result.success) {
toast.success(t('cart:discountCode.addSuccess'));
@@ -69,11 +69,15 @@ export default function DiscountCode({ cart }: {
});
return (
<div className="w-full bg-white flex flex-col txt-medium">
<div className="w-full h-full bg-white flex flex-col txt-medium gap-y-4">
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:discountCode.subtitle'} />
</p>
<Form {...form}>
<form
onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2"
className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2 flex-1"
>
<FormField
name={'code'}
@@ -89,14 +93,14 @@ export default function DiscountCode({ cart }: {
<Button
type="submit"
variant="secondary"
className="h-full"
className="h-min"
>
<Trans i18nKey={'cart:discountCode.apply'} />
</Button>
</form>
</Form>
{promotions.length > 0 ? (
{promotions.length > 0 && (
<div className="w-full flex items-center mt-4">
<div className="flex flex-col w-full gap-y-2">
<p>
@@ -110,12 +114,12 @@ export default function DiscountCode({ cart }: {
className="flex items-center justify-between w-full max-w-full mb-2"
data-testid="discount-row"
>
<Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
<Text className="flex gap-x-1 items-baseline text-sm w-4/5 pr-1">
<span className="truncate" data-testid="discount-code">
<Badge
color={promotion.is_automatic ? "green" : "grey"}
size="small"
className="px-4"
className="px-4 text-sm"
>
{promotion.code}
</Badge>{" "}
@@ -166,10 +170,6 @@ export default function DiscountCode({ cart }: {
})}
</div>
</div>
) : (
<p className="text-sm text-muted-foreground">
<Trans i18nKey={'cart:discountCode.subtitle'} />
</p>
)}
</div>
)