From d68806aaf8c9a961044f4cb48159dbf7791049d9 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Thu, 1 Oct 2026 11:38:31 +0200
Subject: [PATCH] Draw the unlocked pickup box lock as an open padlock

The shackle now morphs instead of lifting: unlocked, the left leg stays
on the body and the right leg shrinks to a stub. The icon may draw past
its viewBox so the raised arc isn't clipped.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/orders/OrderStatusView.module.scss |  5 +++++
 src/components/orders/OrderStatusView.tsx         | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

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 (
     <svg
-      className={styles.actionIcon}
+      className={`${styles.actionIcon} ${styles.lockIcon}`}
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -134,10 +138,9 @@ const LockIcon = ({ open }: { open: boolean }) => {
     >
       <path d="M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z" />
       <motion.path
-        d="M7 11V7a5 5 0 0 1 10 0v4"
         initial={false}
-        animate={{ y: open ? -3 : 0 }}
-        exit={{ y: 0 }}
+        animate={{ d: open ? UNLOCKED_SHACKLE : LOCKED_SHACKLE }}
+        exit={{ d: LOCKED_SHACKLE }}
         transition={transition}
       />
     </svg>