fix(dashboard): align items inside quick view popover (#8847)

* fix(dashboard): align items inside quick view popover

* chore: remove unwanted w-* classes
This commit is contained in:
Riqwan Thamir
2024-08-28 14:37:35 +02:00
committed by GitHub
parent ba24e6882d
commit 8fbfb1445d

View File

@@ -53,24 +53,21 @@ function ActivityItems(props: ActivityItemsProps) {
<Popover.Content
align="center"
side="top"
className="bg-ui-bg-component p-0"
className="bg-ui-bg-component p-0 max-w-[200px]"
>
<div className="flex flex-col">
{!!itemsToSend?.length && (
<div className="p-3">
<div className="txt-compact-small-plus">
<div className="txt-compact-small-plus mb-1">
{t("orders.activity.events.common.toSend")}
</div>
<div className="flex flex-col items-center">
<div className="flex flex-col">
{itemsToSend?.map((item) => {
const originalItem = itemsMap?.get(item.item_id)!
return (
<div
className="flex flex-1 items-center gap-x-3"
key={item.id}
>
<div className="flex items-center gap-x-3" key={item.id}>
<Text size="small" className="text-ui-fg-subtle">
{item.quantity}x
</Text>
@@ -78,11 +75,10 @@ function ActivityItems(props: ActivityItemsProps) {
<Thumbnail
src={originalItem?.variant?.product?.thumbnail}
/>
<div className="">
<Text className="txt-compact-small text-ui-fg-subtle">
{`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
</Text>
</div>
<Text className="txt-compact-small text-ui-fg-subtle truncate">
{`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
</Text>
</div>
)
})}
@@ -94,19 +90,16 @@ function ActivityItems(props: ActivityItemsProps) {
{!!itemsToReturn?.length && (
<div className="border-t-2 border-dotted p-3">
<div className="txt-compact-small-plus">
<div className="txt-compact-small-plus mb-1">
{t("orders.activity.events.common.toReturn")}
</div>
<div className="flex flex-col items-center">
<div className="flex flex-col">
{itemsToReturn?.map((item) => {
const originalItem = itemsMap?.get(item.item_id)!
return (
<div
className="flex flex-1 items-center gap-x-3"
key={item.id}
>
<div className="flex items-center gap-x-3" key={item.id}>
<Text size="small" className="text-ui-fg-subtle">
{item.quantity}x
</Text>
@@ -114,11 +107,10 @@ function ActivityItems(props: ActivityItemsProps) {
<Thumbnail
src={originalItem?.variant?.product?.thumbnail}
/>
<div className="">
<Text className="txt-compact-small text-ui-fg-subtle">
{`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
</Text>
</div>
<Text className="txt-compact-small text-ui-fg-subtle truncate">
{`${originalItem?.variant?.title} · ${originalItem?.variant?.product?.title}`}
</Text>
</div>
)
})}