diff --git a/src/components/orders/OrderStatusView.module.scss b/src/components/orders/OrderStatusView.module.scss index 884d2c1..27cad64 100644 --- a/src/components/orders/OrderStatusView.module.scss +++ b/src/components/orders/OrderStatusView.module.scss @@ -326,6 +326,11 @@ flex-shrink: 0; } + // The shackle lifts above the 24-unit viewBox when unlocked. + .lockIcon { + overflow: visible; + } + .cancelButton { padding: $space-1 $space-2; border: none; diff --git a/src/components/orders/OrderStatusView.tsx b/src/components/orders/OrderStatusView.tsx index 009c80e..0bbac9a 100644 --- a/src/components/orders/OrderStatusView.tsx +++ b/src/components/orders/OrderStatusView.tsx @@ -113,6 +113,10 @@ const ActionIcon = ({ name }: { name: keyof typeof actionIconPaths }) => ( ) const LOCK_DURATION_SECONDS = 0.25 +// Same commands in both so the shackle morphs: unlocked, the left leg +// stretches up from the body and the right leg shrinks to a stub. +const LOCKED_SHACKLE = 'M7 11V7a5 5 0 0 1 10 0v4' +const UNLOCKED_SHACKLE = 'M7 11V4a5 5 0 0 1 10 0v1' // The shackle lifts while the box is open, and drops back first when the // button leaves after closing, so the lock visibly snaps shut. @@ -123,7 +127,7 @@ const LockIcon = ({ open }: { open: boolean }) => { : { duration: LOCK_DURATION_SECONDS, ease: 'easeOut' as const } return ( { >