Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(seller): make inline price editor obviously tappable on touch

Browse Source 
The pencil hint was hover-only, so on phones the price read as plain text.
Style the display as an editable field (subtle border + grey fill) with an
always-visible pencil, and drop the negative margins that fought the border.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Arda Samadi 2026-07-09 12:51:36 +03:30
parent 5c8e19001c
commit 72e4baab10
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/seller/InlinePriceEditor.tsx
View File

@ -194,9 +194,13 @@ export function InlinePriceEditor({
onClick={openEditor}
disabled={isPending}
aria-label={ariaLabel}
// Looks like an editable field (subtle border + grey fill) with an
// always-visible pencil, so it reads as tappable on touch devices where
// there is no hover to reveal the affordance.
className={cn(
"group inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 min-h-[36px]",
"transition-colors hover:bg-VITROWN_BLUE/5 cursor-pointer disabled:cursor-default",
"group inline-flex items-center gap-1.5 rounded-lg border border-GRAY3 bg-WHITE3 px-2.5 py-1.5 min-h-[36px]",
"transition-colors hover:border-VITROWN_BLUE hover:bg-VITROWN_BLUE/5 active:bg-VITROWN_BLUE/10",
"cursor-pointer disabled:cursor-default disabled:opacity-70",
alignClass,
className
)}
@ -204,7 +208,7 @@ export function InlinePriceEditor({
{isPending ? (
<Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-VITROWN_BLUE" />
) : (
<Pencil className="h-3.5 w-3.5 shrink-0 text-GRAY opacity-0 transition-opacity group-hover:opacity-100" />
<Pencil className="h-3.5 w-3.5 shrink-0 text-VITROWN_BLUE/70 transition-colors group-hover:text-VITROWN_BLUE" />
)}
{hasValue ? (
<span className={cn("font-semibold tabular-nums", sizeText)}>

2
app/routes/store.$storeId.products.tsx
View File

@ -104,7 +104,6 @@ function ProductAccordionItem({
size="sm"
align="start"
ariaLabel="ویرایش قیمت محصول"
className="-mr-2"
/>
</div>
</div>
@ -221,7 +220,6 @@ function ProductAccordionItem({
size="sm"
align="start"
ariaLabel="ویرایش قیمت این تنوع"
className="-mr-2"
/>
</div>