From 9f22dda21e54b4def19a218536fecf8706b4e252 Mon Sep 17 00:00:00 2001
From: Tony Field <tony@kingsway.digital>
Date: Tue, 24 Mar 2026 01:47:11 -0400
Subject: [PATCH] feat: add concave notch styling on sequence-end buttons

---
 app/assets/css/components.css                 | 19 +++++++++++++++++++
 .../controls/DefenceStratControl.tsx          |  2 +-
 .../controls/GenericEventTypeButton.tsx       |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/assets/css/components.css b/app/assets/css/components.css
index c8aadd1a..8f2bb258 100644
--- a/app/assets/css/components.css
+++ b/app/assets/css/components.css
@@ -429,6 +429,25 @@ main.track button.btn-sequence::after {
     border-radius: 0 4px 0 0;
 }
 
+main.track button.btn-sequence-end {
+    position: relative;
+    border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
+    padding-left: 1.4rem;
+    margin-left: 1.2rem;
+}
+
+main.track button.btn-sequence-end::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -1.08rem;
+    width: 1.8rem;
+    height: 1.8rem;
+    background-color: var(--color-bg-primary);
+    transform: translateY(-50%) rotate(45deg);
+    border-radius: 0 4px 0 0;
+}
+
 main.track button.event-tracked {
     background-color: var(--color-event-tracked);
     transition: background-color 0.05s ease, transform 0.2s;
diff --git a/app/common/track/event-type/controls/DefenceStratControl.tsx b/app/common/track/event-type/controls/DefenceStratControl.tsx
index c8538b18..a77d098e 100644
--- a/app/common/track/event-type/controls/DefenceStratControl.tsx
+++ b/app/common/track/event-type/controls/DefenceStratControl.tsx
@@ -41,7 +41,7 @@ const DefenceStratControl = ({
       <div className="event-button-row">
         <button
           type="button"
-          className={flashing ? "event-tracked" : error ? "event-error" : ""}
+          className={`${flashing ? "event-tracked" : error ? "event-error" : ""}${sequenceEnd ? " btn-sequence-end" : ""}`}
           onClick={() => {
             handleClick();
           }}
diff --git a/app/common/track/event-type/controls/GenericEventTypeButton.tsx b/app/common/track/event-type/controls/GenericEventTypeButton.tsx
index 88d9e489..bb1da389 100644
--- a/app/common/track/event-type/controls/GenericEventTypeButton.tsx
+++ b/app/common/track/event-type/controls/GenericEventTypeButton.tsx
@@ -41,7 +41,7 @@ const GenericEventTypeButton = ({
       <div className="event-button-row">
         <button
           type="button"
-          className={flashing ? "event-tracked" : error ? "event-error" : ""}
+          className={`${flashing ? "event-tracked" : error ? "event-error" : ""}${sequenceEnd ? " btn-sequence-end" : ""}`}
           onClick={() => {
             handleClick();
           }}