fix(canvas): redesign compare toggle with larger hit target
This commit is contained in:
parent
db1e6138e4
commit
f344ac6b0e
@ -1717,12 +1717,15 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"absolute right-2 top-1/2 z-[180] inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border text-white transition-colors",
|
||||
"absolute right-2 top-1/2 z-[220] inline-flex h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full border text-white transition-all data-[state=on]:scale-100",
|
||||
isCompareMode
|
||||
? "border-sky-200 bg-sky-500/90 shadow-[0_0_0_2px_rgba(255,255,255,0.55)]"
|
||||
: "border-white/75 bg-black/75 hover:bg-black/85"
|
||||
? "border-sky-100 bg-sky-500/95 shadow-[0_0_0_3px_rgba(255,255,255,0.55),0_10px_22px_rgba(14,165,233,0.42)]"
|
||||
: "border-white/80 bg-black/78 shadow-[0_8px_18px_rgba(0,0,0,0.34)] hover:bg-black/88"
|
||||
)}
|
||||
data-state={isCompareMode ? "on" : "off"}
|
||||
data-canvas-no-drag="true"
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={(event) => {
|
||||
@ -1734,15 +1737,16 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="M12 5v14" />
|
||||
<rect x="3" y="4" width="18" height="16" rx="4.5" />
|
||||
<path d="M12 4v16" />
|
||||
<circle cx="12" cy="12" r="2.8" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user